REACT Upload Multiple Files using window.FileReader

Question

I have currently implemented uploading a single file to my react app, but want to upload multiple files, below is the code I am using to upload a single file. Is it possible to upload multiple files?

 captureFile = (event) => {
    const file = event.target.files[0]
    const reader = new window.FileReader()
    reader.readAsArrayBuffer(file)
    reader.onloadend = () => {
      this.setState({
        buffer: Buffer(reader.result),
        file: URL.createObjectURL(file),
      })
    }
  }

This is what I am trying to do at the moment

  captureFile = (event) => {
    const files = event.target.files
    for (let i = 0; i < files.length; i++) {
      const file = files[i]
      const reader = new window.FileReader()
      reader.readAsArrayBuffer(file)

    reader.onloadend = () => {
      this.setState({
        buffer: Buffer(reader.result),
        file: URL.createObjectURL(file),
      })
    }
  }

What have you tried so far in order to handle multiple files? — smashed-potatoes
– smashed-potatoes, Commented May 17, 2019 at 2:53
you can use multiple prop if you are using default input — Sumanth Madishetty
– Sumanth Madishetty, Commented May 17, 2019 at 15:25
Hi @sumanth, thank you for your help, what would the best way to do that be? — n_lyons10
– n_lyons10, Commented May 18, 2019 at 3:23

Fazel Farnia · Accepted Answer · 2020-04-06 09:07:19Z

2

You can use FileReader or UrlObject for read images or files like this:

    const[selectedFiles,setSelectedFiles] = useState([]);

    captureFile = (event) => {
    let files = [];
    for (let file of event.target.files) {
      files.push(URL.createObjectURL(file));
      }
    setSelectedFiles(files);
   }

then you can iterate over selectedFiles by map function like:

   selectedFiles.map((item,key) => (<img key={key} src={item} />));

It works for me instead of FileReader because it uses callback functions.

answered Apr 6, 2020 at 9:07

Fazel Farnia

1612 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

REACT Upload Multiple Files using window.FileReader

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related