React - multiple files input

In this article, we would like to show you how to upload multiple files in React.

There are two main approaches how to let users to select multiple files:

• using multiple property with input element that allows to select in many files per one input,
• using multiple input elements that each one input let's user to select only one file.

In this article, we want to show how to use the second option.

The below example uses multiple <input type="file" /> elements that help us to select files from a computer and upload them with fetch() method that uses FormData class object to wrap files like classic form element submit action does, but here we send it via AJAX / XHR request. It is very important to give for each input element proper name to be able to distinct it on the server - the below example uses file1, file2 and file3.

Runnable example:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const formStyle = {
    margin: 10,
    padding: 5,
    border: '1px solid #c7c7c7',
    borderRadius: 3,
    width: 300
}

const submitStyle = {
    margin: '0 5px 5px auto',
    padding: '7px 10px',
    border: '1px solid #efffff',
    borderRadius: 3,
    background: '#3085d6',
    fontSize: 15,
    color: 'white',
    display: 'flex',
    cursor: 'pointer'
}

const labelStyle = {
    padding: 10,
    border: 10
}

const Form = () => {
    const handleSubmit = (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        fetch('/example/upload', { method: 'POST', body: formData })
            .then(response => response.text()) // or response.json()
            .then(responseText => {
              	console.log(responseText);
            })
            .catch(error => {
              	console.error('File upload error!');
            });
    };
    return (
      <form onSubmit={handleSubmit} style={formStyle}>
        <label htmlFor="userfile" style={labelStyle}>Files uploader:</label>
        <br />
        <br />
        <input type="file" name="file1" /><br />
        <input type="file" name="file2" /><br />
        <input type="file" name="file3" /><br />
        <br />
        <input style={submitStyle} type="submit" value="Upload" />
      </form>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<Form />, root);

Important:

• each file must be given a name,
• the number of occurrences of the <input type = "file" /> element indicates the number of files that we send to send to the server.