Sometimes, we want to enable multiple file selection with the file input with React

In this article, we’ll look at how to enable multiple file selection with the file input with React

How to input multiple file from form with React?

To enable multiple file selection with the file input with React, we can add the multiple prop to the file input.

For instance, we write:

import React from "react";

export default function App() {
  const onChange = (e) => {
    console.log(e.target.files);
  };

  return (
    <form>
      <input type="file" multiple onChange={onChange} />
    </form>
  );
}

We have a file input which we create by setting the type attribute to file.

And we add the multiple prop to it to make it allow multiple file selection.

Finally, we set the onChange prop to the onChange function to get the files selected when they’re selected.

Therefore, when we select one or more files with the file input, we should see the e.target.files logged.

e.target.files should have all the files selected.

Conclusion

To enable multiple file selection with the file input with React, we can add the multiple prop to the file input.