How to send File uploads using fetch via Netlify forms?

Support
1

I can’t find any documentation on file uploads for Netlify forms using fetch for submission.

I am using Formik with yup for validation and need to send a form with a range of fields, including one field with multiple file uploads.

The form is successfully posting to Netlify with all other data using Object.keys, encodeURIComponent and .join(“&”). But this won’t work for Files as it needs to send the File object. Any idea how I can send this data along with other fields so that Netlify recognises and has access to the files from the Form alongside this data?

This article was useful to get me so far with encoding data to post via fetch, but not for files. How to Integrate Netlify’s Form Handling in a React App

Really appreciate the help.

2

Hi @danwebb, while there is no documentation that specifically covers file uploads for react apps, we do have an example in a repo from the author of that article. Let me know if that helps.

3

Thank you for the reply Dennis. Looks like that could be useful yes.
I’ll let you know how I get on.

1 Like
5

Using that repo as a guide, I was able to get a ‘single’ File sent after validation. However I can’t seem to get Netlify to recognise multiple files within the Filelist object that is sent for a single field. I even tried creating a new array with the given File objects instead, but the response for that field Netlify side is then blank:

function encode(data) {
const formData = new FormData();

for (const key of Object.keys(data)) {
    if(key === 'repairs_files'){
        const files = Object.entries(data[key]);
        let filesArr = [];
        files.map(file => {
           return filesArr.push(file[1]);
        })
        formData.append(key, filesArr);
    } else {
        formData.append(key, data[key]);
    }
}
return formData;

}

So I guess the question is in what format does Netlify accept ‘multiple’ File uploads for a single field. Or does it only accept single File uploads? And therefore I’d need to create 3 fields for single File uploads?

6

Yup, I think we have an unstated limit of one file upload per field. Does that work better for you if you reconfigure it to be one-per?

7

Sure, thanks for letting me know. Yeah, I’ll need to modify the UI and will let the client know it’s not currently achievable in one field.

It might be useful to add that to the Forms docs, as I spent quite a while establishing whether it would work or not. Keep up the good work :slight_smile:

9

Great suggestion, Dan. We got an enhancement request filed with our documentarians :slight_smile:

10

Hi @fool and @danwebb just wondering if there has ben any progress made on Netlify forms supporting multiple file uploads?

1 Like
11

Hi @macksol. Not to my knowledge. I’m sure @fool can help?

12

I wouldn’t expect any changes to this behavior anytime in the near future. As promised, we will follow up here if things ever do change, which is definitely possible but not at all guaranteed.

14

For anyone else wondering how to handle multiple file uploads with Netlify Forms, if you’re using React you can use a combination of react-dropzone and JSZip to zip the files client side. Here’s the basic idea that I just got working on a site…

First, react-dropzone has an onDrop callback…

<Dropzone onDrop={this.handleDrop}>
  {({ getRootProps, getInputProps }) => (
    <section>
      <div {...getRootProps()}>
        <input {...getInputProps()} name="files" />
        <p>Drag n' drop some files here, or click to select files</p>
      </div>
    </section>
  )}
</Dropzone>

Where the magic happens…

  handleDrop = (files) => {
    const zip = new JSZip();

    files.forEach((file) => zip.file(file.name, file));

    zip.generateAsync({ type: 'blob' }).then((blob) => {
      const zippedFiles = new File([blob], 'whatever.zip', {
        lastModified: Date.now(),
        type: 'application/zip'
      });

      this.setState({
        zippedFiles
      });
    });
  };

  handleSubmit = (e) => {
    e.preventDefault();

    const form = e.target;

    axios({
      url: '/',
      method: 'POST',
      data: this.encodeData({
        'form-name': form.getAttribute('name'),
        files: this.state.zippedFiles
      })
    })
  };

  encodeData = (data) => {
    const formData = new FormData();

    Object.keys(data).forEach((key) => formData.append(key, data[key]));

    return formData;
  };
3 Likes
15

My example uses Axios, but you get the idea! :slight_smile:

16

Awesome! Thanks so much for sharing that :trophy:

1 Like
17

Hello @chocobuckle thanks for the example code, have you got this working in full anywhere which is sharable? like Codepen or an open source repo?

18

It was used on a gated site that’s only accessible upon receiving an email invite - and I’m not at liberty to send those invites to just anyone I’m afraid. But the code above was pretty similar to what I used in production - the only change I ended up making was changing the file type in the handleDrop function from blob to uint8array…

  zip.generateAsync({ type: 'uint8array' }).then((data) => {
    const zippedFiles = new File([data], 'whatever.zip', {
      lastModified: Date.now(),
      type: 'application/zip'
    });

    return zippedFiles;
  });
19

I also ended up putting all the JSZip functionality into a web worker, just to take a little stress off the main browser thread.

20

I’m looking into using file uploads for the first time and noticed the comment above about the unstated limit of one. As far as I can see, that is still not documented. Can that be prioritized? Unless multifile support is around the corner of course. :wink:

21

hey there, thanks for letting us know.

We’re a skeleton crew at the moment, but we’ll touch base on this after the new year and get an update for you and the other folks in this thread :slight_smile:

24

Hey there,
We have an open internal issue for this docs change and we’ve added your comment. We’ll update you if/when the update ships.

25

Has anyone found a solution in pure HTML and JS? I would really like to have a <input type="file" multiple> and have multiple URL-s directly on the forms page without having to worry about third-party file senders etc.