enable multiple file upload

[dohomi]

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

[endigo]

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

[marktani]

Awesome, thanks for sharing @endigo!

[jhalborg]

+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 🙌

[kbrandwijk]

In the meantime, you can use my multi-file-proxy example: https://github.com/graphcool-examples/functions/tree/master/file-proxy#multiple-file-proxy

[marktani]

This issue has been moved to graphcool/graphcool-framework.