Background
Application/Program: Lightweight Website (40,000 HTML Pages | 5 ASPX Pages)
Goal: HTML Functionality that sends Uploaded PDFs to an ASPX Page (for processing)
Problem: Uploaded PDFs Get Corrupted
Desire: Uncorrupted PDF Uploads
Tech Specs
Server Architecture: IIS 8.0 (Prod) | IIS 10.0 (Dev)
Client-Side: HTML; Javascript (Vanilla); AJAX
Server-Side: ASPX; Visual Basic
Connection/Communication: One Server/Domain (ie, the HTML pages are on the same website as the ASPX page)
Details
On my HTML page, I have a FileUpload control. I want website visitors to use that control to upload PDFs. I want to store those uploaded PDFs [directly] onto my server (in an actual directory).
To accomplish that, I want my HTML pages to “send” the users’ uploaded PDFs to my ASPX page. Whereby my ASPX page will perform the file storage.
Unfortunately, these uploaded PDFs end up getting corrupted [upon server storage]. They get corrupted in the following ways:
- The Uploaded PDFs Cannot Be Opened (typical error); or
- The Uploaded PDFs are missing content (eg, no text/image/content whatsoever; missing metadata).
Code
HTML Page
<form>
<label for="inptFl" id="inptLbl"></label>
<input type="file" name="inptFlNm" id="inptFl" accept=".pdf, application/pdf" multiple onchange="PickFiles();" />
<button type="button" onclick="PushToServer();" >Submit</button>
</form>Javascript
function PickFiles() {
const flLst = document.getElementById("inptFl").files;
var otPtLbl = document.getElementById("inptLbl");
const flRdr = new FileReader();
flRdr.addEventListener("load", (evnt) => {
otPtLbl.setAttribute("data-loadedSource", evnt.target.result);
});
flRdr.ReadAsDataURL(flLst[0]);
//flRdr.readAsBinaryString(flLst[0]);
}
function PushToServer() {
const ajaxObj = new XMLHttpRequest();
let otPtLbl = document.getElementById("inptLbl");
let datURL = otPtLbl.getAttribute("data-loadedSource");
ajaxObj.open("POST", "/WriteHere.aspx", true);
//ajaxObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
ajaxObj.send(datURL);
//ajaxObj.send(encodeURIComponent(datURL));
}ASPX Code-Behind (VB.net)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Request.InputStream.Position = 0
Dim strm = Request.InputStream
Dim n = CInt(strm.Length)
Dim arrStrm() As Byte
ReDim arrStrm(n)
Dim strmRd = strm.Read(arrStrm, 0, n)
IO.File.WriteAllBytes("/Foldy/Filey.pdf", arrStrm)
End SubTroubleshooting
I’ve spent the past 3 days trying to solve this problem. My troubleshooting has included – but has not been limited to – the following:
- Using different JS permutations of
FileReader().readAsDataURL() - Using different JS permutations of
FileReader().readAsBinaryString() - Using different JS permutations of
FileReader().readAsArrayBuffer() - Using different JS permutations of
enctype=multipart/form-data - Using different JS permutations of
enctype=application/x-www-form-urlencoded - Using different JS permutations of
enctype=application/pdf; charset=x-user-defined-binary - Using different JS permutations of
enctype=encodeURIComponent - Using different VB permutations of
Request.InputStream.Position - Using different VB permutations of
Request.InputStream.Read() - Using different VB permutations of
Request.InputStream.ReadASync() - Scouring the web for help (especially StackOverflow.com)
- Glancing into technology manuals (eg, The Complete Reference to IIS 6)
Request
May you please help me get my HTML-to-ASPX file upload functionality to work for uploaded PDFs?
Thank You
