Languages
[Edit]
EN

React - multiple files input

3 points
Created by:
maryam
1031

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

Multiple files upload form in React.
Multiple files upload form 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.

Alternative titles

Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

ReactJS

React - multiple files input
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join