2017-04-16 1 views
0

J'ai un formulaire dropzone dans le Dom avec certains gestionnaires d'événements. Cependant, aucun des événements se déclencher sur l'action. Les fichiers sont bien envoyés au serveur. Je suis juste essayer de faire passer le message de réponse du serveur afin que je puisse ajouter le lien de l'image à la base de donnéesLes événements Dropzone.js ne se déclenchent pas

html:

<div> 
    <form action="/file/upload" class="dropzone" id="dropzoneForm" method="post"></form> 
</div> 
scénario

:

$(function() { 

    Dropzone.autoDiscover = true; 
    Dropzone.options.dropzoneForm = { 
    init: function() { 
     this.on("success", function(response) { 
     alert('Success event fired! Check console'); 
     console.log(response); 
     }); 
    }, 

    paramName: "file" 

    }; 

}); 
+0

Vous n'avez aucun élément dans votre formulaire, donc je suppose qu'il n'a aucune taille pour détecter les événements. Essayez d'ajouter l'entrée de fichier, utilisez dropzone sur un div parent de la taille de la zone de dépôt. –

+0

J'ai essayé d'ajouter l'élément suivant dans le formulaire ne fonctionne toujours pas –

+0

http://www.dropzonejs.com/ suivez la documentation. –

Répondre

3

Après quelques temps j'ai compris le problème. Pour certaines raisons, Dropzone.options ne tirait pas parce qu'il se trouvait dans le $ (function {}). Donc, voici la version qui fonctionne comme un charme

<!DOCTYPE html> 
<html lang="en" 
<head> 
    <meta charset="UTF-8"> 
    <title>Products</title 
    <!-- Bootstrap core CSS --> 
    <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet"> 

    <!-- Dropzone css--> 
    <link rel="stylesheet" href="assets/css/plugins/dropzone/dropzone.css"> 
    <link rel="stylesheet" href="assets/css/plugins/dropzone/basic.css"> 
</head> 
<body> 
    <div class="container" style="margin-top: 300px"> 
    <div class="well"> 

     <form action="/file/upload" class="dropzone" id="dropzoneForm"> 
     <div class="fallback"> 
      <input type="file" name="file" multiple="multiple"> 
     </div> 
     </form> 

    </div> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="assets/plugins/dropzone/dropzone.js"></script> 
    <script> 
    Dropzone.options.dropzoneForm = { 
     dictDefaultMessage: 'Drop file here or click to upload!!!!!!!!', 
     addRemoveLinks: true, 
     init: function() { 
     this.on("addedfile", function(file) { alert("Added file."); }); 
     } 
    }; 

    </script> 
</body> 
</html>