enable multiple file upload

[marktani]

Issue by dohomi Thursday Feb 23, 2017 at 07:39 GMT Originally opened as https://github.com/graphcool/prisma/issues/115

---

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

[marktani]

Comment by endigo Monday Apr 17, 2017 at 13:51 GMT

---

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]

Comment by marktani Monday Apr 17, 2017 at 13:55 GMT

---

Awesome, thanks for sharing @endigo!

[marktani]

Comment by jhalborg Thursday Aug 03, 2017 at 16:24 GMT

---

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

[marktani]

Comment by kbrandwijk Thursday Aug 03, 2017 at 17:43 GMT

---

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