Dropzone.js retries if ajax failed

Question

I use dropzone.js to upload certain files to my server. I have a problem that sometimes the server is unable to keep up with the connections and refuses some downloads, so they will fail and will be marked in red with x. I would like to automatically retry after a certain time, or at least give the user the option to restart it manually.

Is there a implemented function in dropzone.js, a simple enough way to implement it for yourself, or is there a better tool to perform these interesting downloads using drag and drop, preview, ajax, etc. ??

Answer 1

A little modification to dropzone.js requires everything to look beautiful, but otherwise it's just a directive.
My dropzone now repeats (endlessly, but I will fix it later) until it succeeds. It takes a bit more work to reset the progress bars, but that should be enough to get you somewhere (if you still need to do this).

Editing in dropzone.js (in the improved version):

                    success: function(file) {
                    file.previewElement.classList.remove("dz-error");
                    return file.previewElement.classList.add("dz-success");
                }

Where I added the delete line. This changes the Xs to ticks when the file loads successfully.
The angular directive follows:

.directive('dropZone', function($rootScope) {
        return function ($scope, element, attr) {
            var myDropZone = element.dropzone({
                url: "api/ImageUpload",
                maxFilesize: 100,
                paramName: "uploadfile",
                maxThumbnailFilesize: 5,
                autoProcessQueue: false,
                parallelUploads: 99999,
                uploadMultiple: false,
                // this is my identifier so my backend can index the images together
                params: {identifier: $scope.identifier},
                // I seem to need to do this when a file is added, otherwise it doesn't update
                init: function(){this.on("addedfile", function(file){$rootScope.$digest();})}
            });
            // grabbing the dropzone object and putting it somewhere the controller can reach it
            $scope.dropZone = myDropZone.context.dropzone;
            // what we use to work out if we're _really_ complete
            $scope.errors = [];
            // here is our retry mechanism
            myDropZone.context.dropzone.addEventListener("error", function(file,errorMessage,xhr)
            {
                // log our failure so we don't accidentally complete
                $scope.errors.push(file.name);
                // retry!
                myDropZone.context.dropzone.uploadFile(file);
            });
            myDropZone.context.dropzone.addEventListener("success", function(file,errorMessage,xhr)
            {
               // remove from the error list once "success" (_not_ "complete")          
               $scope.errors.splice($scope.errors.indexOf(file.name), 1);
            });
             // this gets called multiple times because of our "retry"  
            myDropZone.context.dropzone.addEventListener("queuecomplete", function()
            {
                 // if we're here AND have no errors we're done
                if($scope.errors.length == 0)
                {
                      // this is my callback to the controller to state we're all done
                    $scope.uploadComplete();
                }
            });
        };
    })

, , myDropZone.context.dropZone, javascript console.logging() . dropzone, , ?

Answer 2

Dropzone 4 . , CSRF cookie:

var isFirstTry = true;

myDropzone = new Dropzone(document.body, {
    init: function() {
        this.on("sending", function(file, xhr, formData) {
            xhr.setRequestHeader("X-CSRF", Cookies.get('CSRF'));
        });
    },
    error: function(file, errorMessage, xhr){
        if (errorMessage && errorMessage.status === 405 && file && isFirstTry) {
            isFirstTry = false;


            //remove item from preview
            this.removeFile(file)

            //duplicate File objet
            new File([file], file.name, { type: file.type });




            this.uploadFile(file);
        }
    },
    // other configs
});

dropzone error, dropzone complete . dropzone complete. . , File. complete hook .

Answer 3

, Quibblesome, ... Quibblesome!!!!

ajax , dropzone.addEventListener( "error", function (file, errorMessage, xhr) . Quibbomes, dropdzone .

var fileObj;
clientDetailsDropZone = new Dropzone($("#clientDetailsDropZoneArea").get(0), {
  init: function()
	{ 
		this.on("success", function(e,response)
		{
		   //IF THE USERS authtoken is expired..... retry the upload automatically
			if(!authToken.isValid)
			{
				//Get a new Token and then autmoatically re upload -- getFileAuthToken is another ajax call that authorizes the user
				getFileAuthToken(function f(e){
					this.uploadFile(fileObj);				
				});
			}
			else
			{	//They had a good token and the upload worked
				alert("yay your upload worked!");
			}
		});

		this.on("addedfile", function(file) {
			fileObj = file;
		});
	}
});

Hide result