web-dev-qa-db-fra.com

Comment invoquer une erreur de la réponse du serveur (JSON) dans Dropzone JS?

J'ai un téléchargeur qui rejette le téléchargement des utilisateurs lorsqu'ils dépassent leur quota. La réponse est en JSON et est la suivante:

{msg: "Upload limit reached", status: "error", code: "403"}

Les options Dropzone JS sont les suivantes:

Dropzone.options.uploadDropzone = {
    paramName: "file1", 
    maxFilesize: 200, 
    maxThumbnailFilesize: 10,
    success: function(file, response){
      ????
  }
};

Que dois-je faire avec la réponse dans success pour afficher une erreur à mes utilisateurs dans l'uploader?

javascriptdropzone.js
20
MK Yung

ok, ce qui suit fonctionnerait, il suffit d'extraire de la source:

success: function(file, response){
  if(response.code == 501){ // succeeded
    return file.previewElement.classList.add("dz-success"); // from source
  }else if (response.code == 403){  //  error
    // below is from the source code too
    var node, _i, _len, _ref, _results;
    var message = response.msg // modify it to your error message
    file.previewElement.classList.add("dz-error");
    _ref = file.previewElement.querySelectorAll("[data-dz-errormessage]");
    _results = [];
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      node = _ref[_i];
      _results.Push(node.textContent = message);
    }
    return _results;
  }
}
18
MK Yung

Dropzone a intégré la détection d'erreurs. Faites ceci:

mydropzone = new Dropzone("#mydropzone",{
    url: "/dropzone",
    addRemoveLinks : true,
    maxFilesize: 2.0,
    maxFiles: 100,
    error: function(file, response) {
        if($.type(response) === "string")
            var message = response; //dropzone sends it's own error messages in string
        else
            var message = response.message;
        file.previewElement.classList.add("dz-error");
        _ref = file.previewElement.querySelectorAll("[data-dz-errormessage]");
        _results = [];
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            node = _ref[_i];
            _results.Push(node.textContent = message);
        }
        return _results;
    }   
});
9
spitz

Vous pouvez le faire comme ceci:

success: function(file, response, action) {
    // PHP server response
    if(response == 'success') // Validate whatever you send from the server
    {
        this.defaultOptions.success(file);
    }
    else
    {
        this.defaultOptions.error(file, 'An error occurred!');  
    }
}
7
CIRCLE

dans PHP side:

    header("HTTP/1.0 400 Bad Request");
    echo "Error uploading file";

et côté jQuery:

        error: function(response){
            alert(response.xhr.responseText);
        }
2
Wajdi Jurry

Après avoir essayé un mélange des différentes réponses, j'ai compris que la dropzone 5.5 actuelle fonctionnait bien en procédant de cette façon:

Sur PHP, lorsque vous souhaitez lancer une erreur, définissez l'en-tête de 400 avec un texte d'état personnalisé comme ceci:

header('HTTP/1.1 400 Invalid file (test error).');
// no need to echo anything, unless you want more data to parse

Ensuite, ajustez l'option d'erreur de dropzone avec les 3 paramètres complets:

mydropzone = new Dropzone("#mydropzone",{
    ....
    error: function(file, response, xhr) {
        console.log('errored',file,response,xhr);// for debugging
        if (typeof xhr !== 'undefined') {
            this.defaultOptions.error(file,xhr.statusText);// use xhr err (from server)
        } else {
            this.defaultOptions.error(file,response);// use default (from dropzone)
        }
    }   
});

Cela place ensuite le texte d'erreur dans le framework dz approprié afin qu'il affiche les bons éléments à l'aide de ses commentaires CSS et Hover intégrés.

0
IncredibleHat