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:

1. The Uploaded PDFs Cannot Be Opened (typical error); or
2. 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 Sub

Troubleshooting

I’ve spent the past 3 days trying to solve this problem. My troubleshooting has included – but has not been limited to – the following:

1. Using different JS permutations of FileReader().readAsDataURL()
2. Using different JS permutations of FileReader().readAsBinaryString()
3. Using different JS permutations of FileReader().readAsArrayBuffer()
4. Using different JS permutations of enctype=multipart/form-data
5. Using different JS permutations of enctype=application/x-www-form-urlencoded
6. Using different JS permutations of enctype=application/pdf; charset=x-user-defined-binary
7. Using different JS permutations of enctype=encodeURIComponent
8. Using different VB permutations of Request.InputStream.Position
9. Using different VB permutations of Request.InputStream.Read()
10. Using different VB permutations of Request.InputStream.ReadASync()
11. Scouring the web for help (especially StackOverflow.com)
12. 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