Prisma1: enable multiple file upload

Created on 23 Feb 2017 · 5Comments · Source: prisma/prisma1

Hi Guys,

currently the file API is restricted to work with one file only at a time. I would like to enable multiple file upload:

 const data = new FormData();
                [...files].forEach(file => {
                    data.append('data', file, file.name);
                }); // => works only for one file

it would be great if data could be an array:

 [...files].forEach(file => {
                    data.append('data[]', file, file.name);
                }); // => should work for an array of files.

Hope this makes sense, Cheers

Source

dohomi

👍4

Most helpful comment

Hello,
I made this way

    let {files,} = this.state
     promises = [];

    // create request for every files
    files.forEach(file => {      
      const data = new FormData();
      data.append('data', file);

      const request = fetch(GRAPHCOOL_ENDPOINT, {
        method: 'POST',
        body: data,
      }).then(response => response.json());

      promises.push(request);
    });

    // then call it
    uploadedFiles = await Promise.all(promises);

endigo on 17 Apr 2017

👍5

All 5 comments

Hello,
I made this way

    let {files,} = this.state
     promises = [];

    // create request for every files
    files.forEach(file => {      
      const data = new FormData();
      data.append('data', file);

      const request = fetch(GRAPHCOOL_ENDPOINT, {
        method: 'POST',
        body: data,
      }).then(response => response.json());

      promises.push(request);
    });

    // then call it
    uploadedFiles = await Promise.all(promises);

endigo on 17 Apr 2017

👍5

Awesome, thanks for sharing @endigo!

marktani on 17 Apr 2017

+1 for this request. We have an app where it's often relevant to upload multiple files, and it would be preferable to not perform the handshake overhead for each upload if possible :-) A fairly easy was to do it (I think) would be to expose a seperate endpoint that takes an array of files under the same key. Would be used like this:

formDataBody.append('data', file1)
formDataBody.append('data', file2)

It would also be much easier to show a progress bar to the user, as the length of the payload would be cumulative, allowing XHR onProgress to be used 🙌