web-dev-qa-db-fra.com

Comment obtenir la valeur de retour Dropzone.js?

Je viens de mettre en œuvre Dropzone.js pour faciliter le téléchargement de fichiers sur mon site Web. Le fichier est bien téléchargé, et une fois le téléchargement terminé, je lui attribue un identifiant et le renvoie au navigateur.

Cela fonctionne bien, sauf que je ne sais pas comment récupérer l'identifiant renvoyé par le serveur. Dans cette SO réponse j'ai trouvé un code qui devrait le faire, mais cela ne fonctionne pas pour moi. Le code que j'ai maintenant est collé ci-dessous.

Quelqu'un sait-il comment obtenir la valeur renvoyée par le serveur? Tous les conseils sont les bienvenus!

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/static/js/external/dropzone.min.js"></script>
    <link href="/static/css/external/dropzone.css" rel="stylesheet">

<script type="text/javascript">
    $(function() {

        Dropzone.options.uiDZResume = {
            success: function(file, response){
                console.log('WE NEVER REACH THIS POINT.');
                alert(response);
            }
        };
    });
</script>

</head>
<body>
<form action="/doc"
      class="dropzone"
      id="my-awesome-dropzone"></form>
</body>
</html>
javascripthtmlfile-uploaddropzone.js
8
kramer65

En regardant le code source de dropzone.js, il semble que vous puissiez écouter beaucoup d’événements.

events: [
  "drop"
  "dragstart"
  "dragend"
  "dragenter"
  "dragover"
  "dragleave"
  "addedfile"
  "removedfile"
  "thumbnail"
  "error"
  "errormultiple"
  "processing"
  "processingmultiple"
  "uploadprogress"
  "totaluploadprogress"
  "sending"
  "sendingmultiple"
  "success"
  "successmultiple"
  "canceled"
  "canceledmultiple"
  "complete"
  "completemultiple"
  "reset"
  "maxfilesexceeded"
  "maxfilesreached"
]

Ici, l'événement "succès" semble être approprié.

Un bon point de départ serait de lier un écouteur d'événement à votre zone de dépôt et de voir quelles données vous obtenez sur un tel événement.

$('#my-awesome-dropzone').on('success', function() {
  var args = Array.prototype.slice.call(arguments);

  // Look at the output in you browser console, if there is something interesting
  console.log(args);
});
17
tomaoq
$("#dropzoneForm").dropzone({
    maxFiles: 2000,
    url: "../Uploader/HttpUploadHandler.ashx?param=" + result.prjID,
    success: function(file, response){
        //alert("Test1");
    }
});
8
Rohit Dodiya

Est-ce que cela aide?

Dropzone.options.myDropzone = {
  init: function() {
        thisDropzone = this;
        this.on("success", function(file, responseText) {
            var responseText = file.id // or however you would point to your assigned file ID here;
            console.log(responseText); // console should show the ID you pointed to
            // do stuff with file.id ...
        });
    }
};

Par exemple, j'ai le mien configuré pour attacher le chemin du serveur au nom de l'image et le transmettre en tant que valeur dans un champ de formulaire lors de l'envoi. Tant que vous définissez responseText pour qu'il pointe vers l'ID de fichier, vous devriez obtenir un retour sur cela.

Ce lien pourrait également vous être utile: https://github.com/enyo/dropzone/issues/244

6
code-sushi

Essaye ça:

Dropzone.options.myAwesomeDropzone = {
    success: function(file, response){
        //alert(response);
        console.log(response);
    }
};
3
Bozu

Ça marche pour moi

$(function() {
    var myDropzone = new Dropzone(".dropzone");
    myDropzone.on("success", function() {
        alert('Uploaded!');
    });
});
1
Jhonny Jr.

J'utilise jQuery et voici ce qui a fonctionné pour moi:

var dz = $(".my-awesome-dropzone").dropzone()[0];
dz.dropzone.on("success", function (file, response) { ... }));

Notez que la méthode dropzone() ajoute un attribut dropzone à l'objet DOM. Vous devez appeler on() sur that object - pas la jQuery on().

0
andy

Je voulais ajouter cela en tant que commentaire, mais je ne peux pas, car j'ai une mauvaise réputation.

Pour ceux d'entre vous qui ont toujours du mal à extraire la réponse du serveur, si vous utilisez le chunking, Dropzone codera en dur une réponse vierge dans cette situation:

https://github.com/enyo/dropzone/blob/caf200c13fd3608dd6bed122926d5848927f55b4/dist/dropzone.js#L2344

if (allFinished) {
    _this14.options.chunksUploaded(file, function () {
        _this14._finished(files, '', null);
     });
}

La récupération de la réponse ne semble donc pas être prise en charge pour les téléchargements groupés.

0
Ovidiu