{"action":"opened","issue":{"url":"https://api.github.com/repos/felixrieseberg/React-Dropzone-Component/issues/187","repository_url":"https://api.github.com/repos/felixrieseberg/React-Dropzone-Component","labels_url":"https://api.github.com/repos/felixrieseberg/React-Dropzone-Component/issues/187/labels{/name}","comments_url":"https://api.github.com/repos/felixrieseberg/React-Dropzone-Component/issues/187/comments","events_url":"https://api.github.com/repos/felixrieseberg/React-Dropzone-Component/issues/187/events","html_url":"https://github.com/felixrieseberg/React-Dropzone-Component/issues/187","id":373050719,"node_id":"MDU6SXNzdWUzNzMwNTA3MTk=","number":187,"title":"how to make chunk upload in parallel ?","user":{"login":"SoyAndresHernandez","id":15066510,"node_id":"MDQ6VXNlcjE1MDY2NTEw","avatar_url":"https://avatars2.githubusercontent.com/u/15066510?v=4","gravatar_id":"","url":"https://api.github.com/users/SoyAndresHernandez","html_url":"https://github.com/SoyAndresHernandez","followers_url":"https://api.github.com/users/SoyAndresHernandez/followers","following_url":"https://api.github.com/users/SoyAndresHernandez/following{/other_user}","gists_url":"https://api.github.com/users/SoyAndresHernandez/gists{/gist_id}","starred_url":"https://api.github.com/users/SoyAndresHernandez/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SoyAndresHernandez/subscriptions","organizations_url":"https://api.github.com/users/SoyAndresHernandez/orgs","repos_url":"https://api.github.com/users/SoyAndresHernandez/repos","events_url":"https://api.github.com/users/SoyAndresHernandez/events{/privacy}","received_events_url":"https://api.github.com/users/SoyAndresHernandez/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-10-23T15:06:05Z","updated_at":"2018-10-23T15:06:05Z","closed_at":null,"author_association":"NONE","body":"Someone can help me, to know how I can do with dropzone to upload chunk is parallel. I have this component in react.\r\n```\r\n\r\nimport React from 'react';\r\nimport DropzoneComponent from 'react-dropzone-component';\r\nimport request, { defaultHeaders } from 'utils/request';\r\nimport Modal from 'components/Atoms/Modal';\r\nimport Button from 'components/Atoms/Button';\r\n\r\nimport ModalFigureError from 'images/modal/modal-figure-error.svg';\r\nimport Styles from './documentPage.css';\r\nexport default class Example extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      showPlaceholder: true,\r\n      filename: '',\r\n      sliceSize: 262144,\r\n      start: 0,\r\n      totalChunks: 0,\r\n      numRequest: 1,\r\n      modalIsOpen: false,\r\n      errorCopie: '',\r\n      modalErrorReportIsOpen: false,\r\n      errorReportLimit: {},\r\n      errorObject: {}\r\n    };\r\n\r\n    this.djsConfig = {\r\n      addRemoveLinks: true,\r\n      autoProcessQueue: false,\r\n      headers: defaultHeaders(true),\r\n      maxFilesize: 2048,\r\n      paramName: 'csv',\r\n      params: {\r\n        industry: 'ecommerce'\r\n      },\r\n      chunking: true,\r\n      chunkSize: 262144,\r\n      timeout: 60000,\r\n      maxFiles: 1,\r\n      parallelUploads: 5,\r\n      acceptedFiles: '.csv',\r\n      retryChunks: true,\r\n      retryChunksLimit: 5\r\n    };\r\n\r\n    this.componentConfig = {\r\n      iconFiletypes: ['.csv'],\r\n      showFiletypeIcon: true,\r\n      postUrl: `${process.env.apiUrl}/csv/upload`\r\n    };\r\n\r\n    this.dropzone = null;\r\n  }\r\n\r\n  handleAddedFile = (file) => {\r\n    this.setState({\r\n      errorCopie: ''\r\n    });\r\n    console.log(this.djsConfig);\r\n    console.log(this.dropzone, 'this.dropzone');\r\n    if (file.size <= 1048576) {\r\n      this.djsConfig.chunking = false;\r\n      this.dropzone.options.chunking = false;\r\n    }\r\n    request(`${process.env.apiUrl}/csv/filename`, {\r\n      method: 'GET'\r\n    }).then((res) => {\r\n      this.setState({\r\n        filename: res.filename,\r\n        totalChunks: file.upload.totalChunkCount\r\n      });\r\n      this.dropzone.processQueue();\r\n      console.time();\r\n    });\r\n\r\n    this.handleShowPlaceholder();\r\n  };\r\n\r\n  handleRemovedFile = () => {\r\n    this.setState({ filename: '', start: 0, totalChunks: 0, numRequest: 1 });\r\n    // this.props.handleHiddenButton();\r\n  };\r\n\r\n  handleShowPlaceholder = () => {\r\n    this.setState({\r\n      showPlaceholder: !this.state.showPlaceholder\r\n    });\r\n  };\r\n\r\n  handleSendingFile = (file, xhr, formData) => {\r\n    this.dropzone.processQueue();\r\n    const { filename, sliceSize, start, totalChunks, numRequest } = this.state;\r\n    let end = start + sliceSize;\r\n\r\n    if (file.size - end < 0) {\r\n      end = file.size;\r\n    }\r\n\r\n    formData.append('filename', filename);\r\n    formData.append('start', start);\r\n    formData.append('size', file.size);\r\n    formData.append('total_chunks', totalChunks);\r\n    formData.append('id_chunk', numRequest);\r\n    console.log(numRequest, 'numRequest');\r\n\r\n    if (end < file.size) {\r\n      this.setState({\r\n        start: this.state.start + sliceSize,\r\n        numRequest: numRequest + 1\r\n      });\r\n    }\r\n  };\r\n\r\n  handleSuccessFile = (file) => {\r\n    console.timeEnd();\r\n    const { filename, totalChunks, numRequest } = this.state;\r\n    if (numRequest === 2 || numRequest === totalChunks) {\r\n      request(`${process.env.apiUrl}/csv/check_csv`, {\r\n        method: 'POST',\r\n        body: {\r\n          industry: 'ecommerce',\r\n          filename\r\n        }\r\n      })\r\n        .then(() => {\r\n          this.handleShowPlaceholder();\r\n          localStorage.setItem('id_csv', this.state.filename);\r\n        })\r\n        .catch((error) => {\r\n          this.dropzone.removeFile(file);\r\n          this.handleShowPlaceholder();\r\n          this.setState({\r\n            errorCopie: error.message\r\n          });\r\n        });\r\n    }\r\n  };\r\n\r\n  handleUploadprogress = (file, progress, bytesSent) => {\r\n    let progressChunk = progress;\r\n    progressChunk = (bytesSent / file.size) * 100; // esint-disable-line\r\n    document.querySelector(\r\n      '[data-dz-uploadprogress]'\r\n    ).style.width = `${progressChunk}%`;\r\n  };\r\n\r\n  handleError = (error) => {\r\n    let errorObject = {\r\n      error:\r\n        'An error occurred, please try again. If the problem persists please contact our support team.'\r\n    };\r\n    if (error.xhr.response && error.xhr.response !== '') {\r\n      errorObject = JSON.parse(error.xhr.response);\r\n    }\r\n    this.setState({\r\n      errorCopie: errorObject\r\n    });\r\n\r\n    if (errorObject.code === 'limit-size') {\r\n      this.openModalmodalError();\r\n    }\r\n    if (errorObject.code === 'report_limit') {\r\n      this.openModalReportError();\r\n    }\r\n  };\r\n\r\n  goNext = () => {\r\n    if (!this.state.showPlaceholder) {\r\n      localStorage.setItem('id_csv', this.state.filename);\r\n    }\r\n  };\r\n\r\n  openModalReportError = () => {\r\n    this.setState({ modalErrorReportIsOpen: true });\r\n  };\r\n\r\n  closeModalReportError = () => {\r\n    this.setState({ modalErrorReportIsOpen: false });\r\n  };\r\n\r\n  openModalmodalError = () => {\r\n    this.setState({ modalErrorIsOpen: true });\r\n  };\r\n\r\n  closeModalmodalError = () => {\r\n    this.setState({ modalErrorIsOpen: false });\r\n  };\r\n\r\n  renderModalError = () => (\r\n    <Modal\r\n      isOpen={this.state.modalErrorIsOpen}\r\n      onRequestClose={this.closeModalmodalError}\r\n    >\r\n      <div className={Styles.Document__Modal}>\r\n        <figure className={Styles.Document__Modal__Logo}>\r\n          <img src={ModalFigureError} alt=\"Figure DataGran Error\" />\r\n        </figure>\r\n        <div className={Styles.Document__Modal__Content}>\r\n          <h2 className={Styles.Document__Modal__Title}>\r\n            Your file is too big!\r\n          </h2>\r\n          <p className={Styles.Document__Modal__Text}>\r\n            Your current BDA plan allows you to upload files up to{' '}\r\n            {this.state.errorCopie.max_size}\r\n            Mb so we are unable to complete this request. Please reduce the size\r\n            and upload it again\r\n          </p>\r\n          <div className={Styles.Document__Modal__Action}>\r\n            <Button onClick={this.closeModalmodalError}>Got it!</Button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Modal>\r\n  );\r\n\r\n  renderModalReportLimit = () => {\r\n    const { errorCopie } = this.state;\r\n    return (\r\n      <Modal\r\n        isOpen={this.state.modalErrorReportIsOpen}\r\n        onRequestClose={this.closeModalReportError}\r\n      >\r\n        <div className={Styles.Document__Modal}>\r\n          <figure className={Styles.Document__Modal__Logo}>\r\n            <img src={ModalFigureError} alt=\"Figure DataGran Error\" />\r\n          </figure>\r\n          <div className={Styles.Document__Modal__Content}>\r\n            <h2 className={Styles.Document__Modal__Title}>\r\n              You have reached your monthly limit!\r\n            </h2>\r\n            <p className={Styles.Document__Modal__Text}>\r\n              Your current BDA plan allows you to create up to{' '}\r\n              {errorCopie.max_reports} reports monthly and you have already\r\n              reached that limit :(\r\n            </p>\r\n            <p className={Styles.Document__Modal__Text}>\r\n              Remember that you can keep exploring and exporting audiences on\r\n              all the reports you have already created.\r\n            </p>\r\n            <div className={Styles.Document__Modal__Action}>\r\n              <Button onClick={this.closeModalReportError}>Got it!</Button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Modal>\r\n    );\r\n  };\r\n\r\n  render() {\r\n    const config = this.componentConfig;\r\n    const djsConfig = this.djsConfig;\r\n\r\n    // For a list of all possible events (there are many), see README.md!\r\n    const eventHandlers = {\r\n      init: (dz) => (this.dropzone = dz),\r\n      addedfile: this.handleAddedFile,\r\n      removedfile: this.handleRemovedFile,\r\n      sending: this.handleSendingFile,\r\n      success: this.handleSuccessFile,\r\n      uploadprogress: this.handleUploadprogress,\r\n      error: this.handleError\r\n    };\r\n\r\n    return (\r\n      <DropzoneComponent\r\n        config={config}\r\n        eventHandlers={eventHandlers}\r\n        djsConfig={djsConfig}\r\n      />\r\n    );\r\n  }\r\n}\r\n```"}}
{"actor":{"display_login":"SoyAndresHernandez"}}