CODEWITHSUNDEEP
htmlfile
Mika H.
Mika H.

Reputation: 4329

HTML input tag file handling

In this code for the PDF reader pdf-js there is an input tag to let the user upload an input file

 <input id="fileInput" class="fileInput" type="file" oncontextmenu="return false;" style="visibility: hidden; position: fixed; right: 0; top: 0" />

This input tag is not a part of any form. Once the user uploads the file, where does it go? Where is the code that processes the file? (I'm asking in general, not necessarily specific to this piece of code.)

Upvotes: 0

Views: 653

Answers (1)

Okan Kocyigit
Okan Kocyigit

Reputation: 13421

"Then it's interesting. This code doesn't have server side"

No, It doesn't.

Pdf.js is a client side program that written with javascript. So that works on javascript side.

It actually takes the file that you wanna show, and does whatever must be done like converting the buffer to Uint8Array than renders it.

All processes happen on javascript side. No server side, no file upload.

Here is an article about reading local files in javascript

Here is the related part of code in pdf.viewer.js

window.addEventListener('change', function webViewerChange(evt) {
  var files = evt.target.files;
  if (!files || files.length === 0)
    return;

  // Read the local file into a Uint8Array.
  var fileReader = new FileReader();
  fileReader.onload = function webViewerChangeFileReaderOnload(evt) {
    var buffer = evt.target.result;
    var uint8Array = new Uint8Array(buffer);
    PDFView.open(uint8Array, 0);
  };

  var file = files[0];
  fileReader.readAsArrayBuffer(file);
  PDFView.setTitleUsingUrl(file.name);

  // URL does not reflect proper document location - hiding some icons.
  document.getElementById('viewBookmark').setAttribute('hidden', 'true');
  document.getElementById('download').setAttribute('hidden', 'true');
}, true);

Upvotes: 3

Related Questions