web-dev-qa-db-fra.com

Comment afficher le message d'erreur de la zone de dépôt jquery

J'utilise dropzone avec CI, je ne sais pas comment afficher un message d'erreur et un message personnalisé lors d'un téléchargement faux, c'est mon script

Dropzone.autoDiscover = false;
        try {
            var myDropzone = new Dropzone("#adminform" , {
                paramName: "filename", // The name that will be used to transfer the file
                maxFilesize: 0.5, // MB
                url: window.location.href,
                addRemoveLinks : true,
                dictDefaultMessage :
                '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload \
                <span class="smaller-80 grey">(or click)</span> <br /> \
                <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>',
                dictResponseError: 'Error while uploading file!',

                //change the previewTemplate to use Bootstrap progress bars
                previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
            });
        } 
        catch(e) {
            alert('Dropzone does not support older browsers!');
        }

Et PHP return 400:

$this->output->set_header("HTTP/1.0 400 Bad Request");

Mais quand je survole l'image, il affiche [Object Object] mais le message est:

dictResponseError: 'Erreur lors du téléchargement du fichier!'

enter image description here

dropzone.js
16
Code Metal

Pour toute personne dans le besoin:

Vous pouvez renvoyer un message de réponse du serveur à l'aide de l'écho. Ensuite, dans le code js, ajoutez un gestionnaire d'événements d'erreur

PHP

header("HTTP/1.0 400 Bad Request");
echo "Ups error message";

JS

this.on('error', function(file, response) {
    $(file.previewElement).find('.dz-error-message').text(response);
});
21
Alwin Kesler

Pour moi, ce code a finalement fonctionné, utilisé comme option de zone de dépôt:

error: function(file, message) {
      $(file.previewElement).addClass("dz-error").find('.dz-error-message').text(message.Message);
    }

J'ai utilisé message.Message car ASP.net WebAPI renvoie un objet JSON, mais pas avec la clé "erreur" requise.

10
Fabian von Ellerts

Vous pouvez simplement renvoyer le message depuis le serveur via le fichier PHP

if($file_uploaded == true)
{

   //perform operations on valid upload

} else {

  //upload failed, echo back negative response to dropzone.js
  $this->output->set_header("HTTP/1.0 400 Bad Request");
  echo "Error uploading file";

}

Alors que votre fichier HTML peut ressembler à:

<script type="text/javascript">
    Dropzone.options.myAwesomeDropzone = {
        paramName: "icon_image", // The name that will be used to transfer the file
        maxFilesize: 2, // MB
        init: function() {
            this.on("error", function(file, response) {
                // do stuff here.
                alert(response);

            });

        }
    };
</script>

J'espère que cela aide :)

9
user2354671