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?

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?

• javascript
• image
• image-processing

Share Improve this question Follow asked Oct 10, 2018 at 1:15 HeuyieHeuyie 9711 silver badge1313 bronze badges 3

• You might use readAsText if you want to read the file as text, e.g. CSV or JSON. – RobG Commented Oct 10, 2018 at 1:25
• @RobG Hi! Of course, you are right! So, they have no use when I upload image files, you think? – Heuyie Commented Oct 10, 2018 at 1: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 Commented Oct 10, 2018 at 2:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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).