title: Uploading multiple files in ReactJS
body: <p>I am stuck with uploading multiple files in ReactJS. I have uploaded a single file before as shown with the codes below. I used sessionStorage to be able to view the files binaryString.</p>
  
  <pre><code>&lt;input
  type="file"
  onChange={(evt) =&gt; {
  
      let files = evt.target.files;
      let file = files[0];
  
      if (files &amp;&amp; file) {
          let reader = new FileReader();
          reader.onload = function (readerEvt) {
              let binaryString = readerEvt.target.result;
              const image = btoa(binaryString);
              const formattedImage = 'data:image/octet-stream;base64,' + image;
              isLoad = true
              sessionStorage.setItem('load', JSON.stringify(isLoad))
              SingleImageBase64Model.setSingleImageBase64(formattedImage);
          }
          reader.readAsBinaryString(file);
  
  
          if (JSON.parse(sessionStorage.getItem('load')) === true) {
              this.setState({ isImageLoaded: true });
          } else {
              this.setState({ isImageLoaded: false });
          }
      }
  }} /&gt;
  </code></pre>
  
  <p>Today, I'd love to upload multiple files. The data will be sent to a Restful web-service written in Java (Spring Boot). Currently, I have the following in ReactJS and has not worked for uploading multiple files. </p>
  
  <pre><code>// In return method, HTML for file-picker
  &lt;input
  type='file'
  multiple
  onChange={this.onFileChange} /&gt;
  
  // Function for handling file/s uploads
  onFileChange = (event) =&gt; {
  const fileData = event.target.files;
  const blob = new Blob([fileData]);
  const reader = new FileReader();
  
  reader.onloadend = () =&gt; {
      for (let i = 0; i &lt; fileData.length; i++) {
  
          console.log('Data to be sent', {
              name: fileData[i].name,
              fileSize: fileData[i].size,
              fileContentType: fileData[i].type,
              file: reader.result
          });
      }
  }
  reader.readAsDataURL(blob); }
  </code></pre>
  
  <p>My problem is with the <strong>reader.result</strong>, it returns the same binaryString data as shown on the console log.</p>
  
  <p><a href="https://i.stack.imgur.com/ulTmR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ulTmR.png" alt="enter image description here"></a></p>
  
  <p>The above code, if the document upload works! Will be formatted accordingly to accept my backend request (web-service) for saving multiple files.</p>
  
  <p>Backend model is as follows.</p>
  
  <pre><code>@Entity
  public class Document implements Serializable {
  
  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;
  @NotNull
  private String name;
  private String description;
  @Lob
  private byte[] file;
  private int fileSize;
  private String fileContentType;
  
  // constructors
  // getter and setters
  
  }
  </code></pre>