0

While making a simple picture uploader, I am learning about FileReader API. There are 4 formats, which are array buffer, binary string, data URL, and text, to upload a file, and I would like to know how to pick one.

Among few articles, this says that data URL is good when you want to show the uploaded picture and array buffer is good when you manipulate the file. What do you think? And, when is a good occasion to choose binary string or text formats?

Heuyie
  • 87
  • 1
  • 12
  • You might use *readAsText* if you want to read the file as text, e.g. CSV or JSON. – RobG Oct 10 '18 at 01:25
  • @RobG Hi! Of course, you are right! So, they have no use when I upload image files, you think? – Heuyie Oct 10 '18 at 01:39
  • Kaiido has answered that, but the short answer is yes. You don't need to read a file to upload it, though you might want to check the header of a file if you only want to accept certain types rather than rely on the extension (still not foolproof, but harder to spoof). – RobG Oct 10 '18 at 02:32

1 Answers1

9

For a "File Uploader", you should simply not use a FileReader at all.

You don't need to read the file to be able to upload it, you can send it as a Blob directly.

If you need to display it in the current page, you still don't need a FileReader, create a blobURI from the Blob, which will point directly to the File on disk, with no useless memory bloating.

inp.onchange = e => {
  // yes that's all synchronous...
  const url = URL.createObjectURL(inp.files[0]);
  const img = new Image();
  img.src = url;
  document.body.appendChild(img);
};
<input type="file" id="inp" accept="image/*">

The only use cases for a FileReader is when you need to access the content of the File, for instance,

  • if you want to load a text file (or csv, or json) and parse it, then you will use the readAsText() method.
  • if you want to read/edit some binary file (e.g read meta-data of a JPEG file?), then you'll use readAsArrayBuffer(), and work from this buffer.
  • readAsDataURL() is unfortunately too much misused, As said previously, in 99% of the cases, what you'll do from this dataURI could be done with a blobURI, or the Blob directly. The only one case I can see for it, is to append binary data in some standalone document... Or, something that doesn't happen everyday on every website...
  • readAsBinaryString() is rather useless, and had even been removed form the standards. If you really need a binary string representation of your File, you can generate one from an ArrayBuffer, but what you'll do with this String is a mystery. (work with ArrayBuffer directly).
Community
  • 1
  • 1
Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • Thanks for your response! So, I would upload an image file with readAsArrayBuffer() if I want to resize on client side, correct? – Heuyie Oct 10 '18 at 12:42
  • 1
    @Heuyie no. Except if you have the decoder and encoder written in js. But generally what we do is load the image in a img element from a blobURI, draw it resized on a canvas, then get a Blob of the resized canvas. – Kaiido Oct 10 '18 at 13:00
  • Also, if I am allowing others to upload files, I need to read a file and verify its file type and so on for security? – Heuyie Oct 10 '18 at 13:01
  • > get a Blob of the resized canvas. I see! – Heuyie Oct 10 '18 at 13:01
  • 1
    @Heuyie that's a bit useless, bad guys won't use a browser to inject bad things in your server. Do the check server side. – Kaiido Oct 10 '18 at 13:02
  • I see. I will read up more about security. Thanks for again and again :) – Heuyie Oct 10 '18 at 13:03
  • It took me a time to figure out how to resize, but I did. thank you! – Heuyie Oct 15 '18 at 20:48
  • trying to know the image file size in bytes. canvas.toBlob is not supported on iOS. Do you know any good workaround? toDataURL cannot tell me the file size. – Heuyie Oct 29 '18 at 19:38
  • 1
    You can polyfill canvas.toBlob. https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill – Kaiido Oct 29 '18 at 23:26