如果Ajax失败，Dropzone.js将重试 [英] Dropzone.js retry if ajax failed

问题描述

我使用dropzone.js将某些文件上传到我的服务器。我有问题，有时服务器不能跟上连接，并拒绝一些上传，所以他们将失败，并获得与红色标记为X.我想在一段时间后自动重试，或者至少让用户能够手动重新启动它。

在dropzone.js中是否有一个实现的功能，这是一个简单的方法来实现它自己或有一个更好的工具，通过拖放做这些有点上传，预览，ajax等...

解决方案

它只是一个指令。

我的dropzone现在重试（无限，但我会解决这个问题），直到它成功。需要更多的工作来重置进度条，但这应该足以让你到某个地方（如果你仍然在意这一点）。

编辑dropzone.js （在美化版本中）：

$ $ $ $ $ $ $ $ $ $ $ $ $成功：函数（文件）{
file.previewElement.classList.remove （ DZ-误差）;
返回file.previewElement.classList.add（dz-success）;
}

在哪里添加了删除行。当$文件成功上传时，这会将Xs更改为ticks。

angular命令如下：

$ $ $ $ $ $ $ $ $ .directive 'dropZone'，函数（$ rootScope）{
返回函数（$ scope，element，attr）{
var myDropZone = element.dropzone（{$ b $ url：api / ImageUpload，
maxFilesize：100，
paramName：uploadfile，
maxThumbnailFilesize：5，
autoProcessQueue：false，
parallelUploads：99999，$ b $ uploadMultiple：false，
//这是我的标识符，所以我的后端可以一起索引图像
params：{identifier：$ scope.identifier}，
//当添加文件时，我似乎需要这样做，否则它不会更新
init：function（）{this.on（addedfile，function（file）{$ rootScope。$ digest（）;}）}
}）;
//抓住e的dropzone对象，并把它放在控制器可以达到的地方
$ scope.dropZone = myDropZone.context.dropzone;
//如果我们正在完成
$ scope.errors = [];
//这是我们的重试机制
myDropZone.context.dropzone.addEventListener（error，function（file，errorMessage，xhr）
{
//记录失败我们不会无意中完成
$ scope.errors.push（file.name）;
// retry！
myDropZone.context.dropzone.uploadFile（file）;
} ）;
myDropZone.context.dropzone.addEventListener（success，function（file，errorMessage，xhr）
{
//从错误列表中删除一次success（_not_complete）
$ scope.errors.splice（$ scope.errors.indexOf（file.name），1）;
}）;
//因为我们的重试而被多次调用
myDropZone.context.dropzone.addEventListener（queuecomplete，function（）
{
// if if we' （$ scope.errors.length == 0）
{
//这是我回调控制器来表示我们都是完成
$ scope.uploadComplete（）;
}
}）;
};
））

不知道是否所有的myDropZone.context.dropZone东西是必要的，我有点吸吮javascript和花了很多我的时间console.logging（）对象，并在调试器中检查它们。这是我找到dropzone组件的地方，也许有一个更简单的方法？

I'm using dropzone.js to upload certain files to my server. I have the problem that sometimes the server isn't able to keep up with the connections and refuses some uploads so they will fail and get marked red with an x. I would like to automaticaly retry after a certain amount of time or at least give the user the ability to restart it manually.

Is there an implemented feature in dropzone.js, an easy enough way to implement it for myself or is there a better tool to do those kinda uploads via drag/drop, preview, ajax, etc...?

解决方案

One small modification to dropzone.js is required to make things look pretty but otherwise its just a directive.
My dropzone now retries (infinitely, but I'll fix that later) until it succeeds. A little more work is required to reset the progress bars but this should be enough to get you somewhere (if you still care about this).

The edit to dropzone.js is (in the beautified version):

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

Where I've added the remove line. This changes Xs to ticks when a file successfully uploads.
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();
                }
            });
        };
    })

not sure if all that myDropZone.context.dropZone stuff is necessary, I kinda suck at javascript and spend a lot of my time console.logging() objects and examining them in the debugger. This is where I found the dropzone component, perhaps there is an easier way?

这篇关于如果Ajax失败，Dropzone.js将重试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！