Set retry with dropzone-react-component when upload fails

750 Views Asked by At

In my project I'm using React-Dropzone-Component (https://github.com/felixrieseberg/React-Dropzone-Component) based on Dropzone.js. I'm using this component because I'm developing a SharePoint webpart and there is already an example based on this solution on Microsoft PnP GitHub repository.

Anyway, the upload is working fine, but sometimes, mainly when I keep a web page opened for a couple of minutes doing nothing, I receive an error trying to upload new files. I retry an upload and it fails returning Server responded with (0) code error. I also see on Google Chrome console an ERR_CONNECTION_RESET error. If I try to upload 5 files in second instance, I get error on first 2-3 and then the remaining files works fine. Weird.

I've already investigated my network, but there are no failures. I've also tried with 3 different networks and I've received the same error.

I've also updated the component with the latest Dropzone.js (5.7.2).

This is my code:

    let componentConfig = {
      iconFiletypes: this.props.fileTypes.split(','),
      showFiletypeIcon: true,
      postUrl: _context.pageContext.web.absoluteUrl,
      autoProcessQueue: true
    };
    var djsConfig = {
      headers: {
        "X-RequestDigest": digest1
      },
      addRemoveLinks:false
    };
    let myDropzone;
    let eventHandlers = {
      // This one receives the dropzone object as the first parameter
      // and can be used to additional work with the dropzone.js
      // object
      init: function(dz){       
       myDropzone=dz;
      },
      sending: async function (file, xhr) {
        var fileName = file.name;
        fileName = fileName.replace(/[&\/\\#,+()$~%='":*?<>{}]/g, "");  
        if (file.size <= 10485760) {
            // small upload
            await web.getFolderByServerRelativeUrl("/test/"+_listName).files.add(fileName, file, true).then(_ => console.log("Ok!"));
        } else {
            // large upload
            await web.getFolderByServerRelativeUrl("/test/"+_listName).files.addChunked(fileName, file, data => {}, true).then(_ => console.log("Ok!"));
        }
      },
      error:function(file,error,xhr){
        file.status = myDropzone.ADDED;
        myDropzone.removeFile(file);
        myDropzone.enqueueFile(file);
      }
     };

     <DropzoneComponent eventHandlers={eventHandlers} djsConfig={djsConfig} config={componentConfig}>
        <div className="dz-message icon ion-upload">Drop files here to upload</div>  
     </DropzoneComponent>

If I can't prevent this ERR_CONNECTION_RESET error, I would like to set up an automatic retry for these files. The code I've posted above is not working fine or it returns "Uncaught Error: This file can't be queued because it has already been processed or was rejected.".

Is there a solution or a good way to set up a retry?

0

There are 0 best solutions below