React JS: Upload Multiple Files

Question

I am writing a button component in React.js that allows the user to upload as many files as they want to the app. My problem is, I can only upload one file at a time with the following code:

  const handleClick = event => {
    setViewPath(['My Files']);
    hiddenFileInput.current.click();
  };
  // Call a function (passed as a prop from the parent component)
  // to handle the user-selected file
  const handleChange = event => {
    const fileUploaded = event.target.files[2];
    props.handleFile(fileUploaded);
  };
  return (
    <>
      <Button className={classes.uploadButton}
      onClick={handleClick}>
        +Upload File(s)
      </Button>
      <input
        type="file"
        ref={hiddenFileInput}
        onChange={handleChange}
        style={{display: 'none'}}
      />
    </>
  );

So the function "const handleChange" is what's responsible for uploading the actual file itself. Any ideas on how to make it so that it can upload as many files as the user pleases?

Musadiq Khan · Accepted Answer · 2021-07-01 16:24:12Z

0

You need to add multiple attribute to your input field.

<input type="file" id="files" name="files" multiple>

Your files state should be an array and handleChange should be something like this.

const handleChange = e => {    
setData({
        ...data,
        files: [...data.files, ...e.target.files],
      });
    }

answered Jul 1, 2021 at 16:24

Musadiq Khan

2561 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React JS: Upload Multiple Files

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related