How to send File uploads using fetch via Netlify forms?

Support
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