title: File upload progress using react-dropzone
body: <p>Using react-dropzone to upload the file, I want to achieve the file progress like in percentage of file transfer or mbs data transfer.</p>
  
  <p>Here is the link of: <a href="https://react-dropzone.netlify.com/" rel="nofollow noreferrer">https://react-dropzone.netlify.com/</a></p>
  
  <pre><code>onDrop(acceptedFiles, uploadApi) {
    const filesToBeSent = this.state.filesToBeSent;
    if (acceptedFiles.length) {
      if (acceptedFiles[0].type === FileTypeList.TYPE) {
        filesToBeSent.push(acceptedFiles);
        const formData = new FormData();
        formData.append("file", acceptedFiles[0]);
        uploadApi(formData).then((response) =&gt; {
          this.setState({
            filesPreview: [],
            filesToBeSent: [{}],
            showNotification: true,
            uploadResponse: response,
          });
          this.props.fetchHistory();
        });
      } else {
        this.setState({
          fileType: true,
        });
      }
    } else {
      this.setState({
        fileSize: true,
      });
    }
  }
  </code></pre>
  
  
  
  <pre><code>&lt;Dropzone maxSize={this.props.maxSize} onDrop={(files) =&gt; this.onDrop(files, this.props.uploadApi)}&gt;
    {({ getRootProps, getInputProps }) =&gt; {
      return (
        &lt;div {...getRootProps()} className={"dropzone"}&gt;
          &lt;UploadPanel id="uploadFileContainerId"&gt;
            &lt;p&gt;
              &lt;img id="uploadImage" src={UploadImage} /&gt;
            &lt;/p&gt;
            &lt;input {...getInputProps()} /&gt;
            &lt;div&gt;{t("assets:UPLOAD_FILE")}&lt;/div&gt;
            &lt;Note&gt;
              {this.props.maxSizeTitle ? t("workers:UPLOAD_WORKER_FILE_SIZE") : t("assets:UPLOAD_FILE_SIZE")}
            &lt;/Note&gt;
          &lt;/UploadPanel&gt;
        &lt;/div&gt;
      );
    }}
  &lt;/Dropzone&gt;
  </code></pre>