How to make the following readAsDataURL return multiple readAsDataURLs?

Question

This function read files gotten from an input field and return their dataUrls:

readAsDataURL (target) {
  // target => <input type="file" id="file">
  var reader = new FileReader()
  return new Promise(function (resolve, reject) {
    reader.onload = function (event) {
      resolve(event.target.result)
    }
    reader.readAsDataURL(target.files[0])
  })
},

As you can see, the function only deals with single files. I want to return multiple files. I tried doing reader.readAsDataURL(target.files) but got this error: 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

How to make the function return multiple dataUrls?

Just a note, if you are trying to display multiple media files into the doc, through e.g `` or ` — Kaiido, Jun 13 '17 at 03:10
@Kaiido Oh, I didn't know about this. Could you write an answer with a sample code please? — alex, Jun 13 '17 at 03:12

Matt Way · Accepted Answer · 2017-06-13T03:32:23.493

3

Have you tried using Promise.all? You might be able to do something like:

fileToDataURL(file) {
  var reader = new FileReader()
  return new Promise(function (resolve, reject) {
    reader.onload = function (event) {
      resolve(event.target.result)
    }
    reader.readAsDataURL(file)
  })
}  

readAsDataURL (target) {
  // target => <input type="file" id="file">
  var filesArray = Array.prototype.slice.call(target.files)      
  return Promise.all(filesArray.map(fileToDataURL))
}

This essentially does the same thing you had setup, but creates a promise for each one, returning the result in an array only once all have been completed.

I forgot that you cannot treat target.files directly as an array, so it needs to be converted first. For this you can use: Array.prototype.slice.call(target.files)

edited Jun 13 '17 at 03:32

answered Jun 13 '17 at 02:52

Matt Way

32,319
10
79
85

1

Correct approach using `Promise.all`, but there is no `map` method on `FileList` objects – Kaiido Jun 13 '17 at 03:04
Kaiido is right: `TypeError: target.files.map is not a function` What's the correct way then? – alex Jun 13 '17 at 03:14
2

Have updated my answer to include converting the files to a proper array – Matt Way Jun 13 '17 at 03:34
1

@MattWay Thanks. It also works like this: `return Promise.all([...target.files].map(utils.fileToDataURL))` (For some miraculous reason.) – alex Jun 13 '17 at 03:54
1

You are right. The spread operator essentially does the same thing as the slice call I used. I would use your method (just forgot about it). – Matt Way Jun 13 '17 at 03:55

Kaiido · Answer 2 · 2017-06-13T04:11:03.597

It's not clear from the question what you'll do with these dataURIs, but most of the time, you don't actually need it.

To be able to display a media from a user's File, or from a Blob, into your document, it is better to use the URL.createObjectURL() method which will return a blobURI, that you can use like any url.

Non exhaustive list of blobURIs advantages :

is synchronous. You don't need your Promise wrapping event handlers hell, all can be done in a single loop.
is fast. The browser doesn't read the File or Blob passed, it just creates a symlink in the memory to the real File in the HDD.
is memory light-weight. Because of previous point. When compared to readAsDataURL(), you should note that this latter will first read the file entirely, convert it to a base64 string (~34% bigger than original data), and finally, you will store this big string in the DOM's markup, making it always present in memory. From then, the browser will read it again, convert it to binary, read it again as binary and finally process it as an normal resource.

"But I need to send it to the server !"

Then send the File directly, as multipart data. Less work on the front-side, less work in the pipes (remember ~34%), and less work server-side if you wanted to save a File there. Most server-side languages have easy built-ins methods to catch Files from POST requests, and you can send it easily from the front with the FormData API.

Here is an example of your code, using blobURIs, which excpects all Files are images.

document.querySelector('input').onchange = function(){
  // FileList doesn't have an forEach method yet
  Array.prototype.forEach.call(this.files, function(file){
    if(file.type.indexOf('image/' === 0)){
      var i = new Image();
      i.src = URL.createObjectURL(file);  // creates a blobURI
      document.body.appendChild(i);
      }
    });
  };

<input type="file" multiple>

But note that this method can also have cons :

Don't use it with MediaStreams. It will lock the source of the MediaStream until the blobURI is revoked (either when URL.revokeObject(blobURI) is called, or on an hard refresh of the page. In this case, you should use mediaElement.srcObject = MediaStream; instead.
For Blobs you created, (not coming from an <input>), the same point applies : the blob will be stuck in memory until expressly released. In this case, simply call URL.revokeObjectURL(blobURI) once the resource is loaded.
```
img.onload = URL.revokeObjectURL(img.src); 
img.src = URL.createObjectURL(the_Blob_I_built);
```

How to make the following readAsDataURL return multiple readAsDataURLs?

2 Answers2

"But I need to send it to the server !"

Linked