CODEWITHSUNDEEP
reactjsreact-reduxfilereader
n_lyons10
n_lyons10

Reputation: 73

REACT Upload Multiple Files using window.FileReader

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),
      })
    }
  }

Upvotes: 2

Views: 1490

Answers (1)

Fazel Farnia
Fazel Farnia

Reputation: 161

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.

Upvotes: 2

Related Questions