web-dev-qa-db-fra.com

Comment rendre uniquement le formulaire Dropzone.js Previews Div cliquable et non le formulaire entier

Je dois utiliser le formulaire dropzone.js, qui envoie quelques entrées et une information de téléchargement de fichier à l'autre page.

Mon code dropzone ressemble à ceci -> 

Dropzone.options.mydropzone = {
  maxFiles: 1,
  maxFilesize: 10, //mb
  acceptedFiles: 'image/*',
  addRemoveLinks: true,
  autoProcessQueue: false,// used for stopping auto processing uploads
  autoDiscover: false,
  paramName: 'prod_pic',
  previewsContainer: '#dropzonePreview', //used for specifying the previews div
  clickable: false, //used this but now i cannot click on previews div to showup the file select dialog box

  accept: function(file, done) {
    console.log("uploaded");
    done();
   //used for enabling the submit button if file exist 
    $( "#submitbtn" ).prop( "disabled", false );
  },

  init: function() {
    this.on("maxfilesexceeded", function(file){
        alert("No more files please!Only One image file accepted.");
        this.removeFile(file);
    });
      var myDropzone = this;
    $("#submitbtn").on('click',function(e) {
       e.preventDefault();
       myDropzone.processQueue();

    });

       this.on("reset", function (file) {   
              //used for disabling the submit button if no file exist 
              $( "#submitbtn" ).prop( "disabled", true );
        });

  }

};

Mais je souhaite que seuls les conteneurs Previews Clickable et Drag and Drop soient définis à l’aide de previewsContainer: '#dropzonePreview', mais pas du formulaire complet.

Si j'utilise clickable:false, je ne pourrai pas cliquer sur les aperçus div pour afficher la boîte de dialogue de téléchargement de fichier. Même si je déplace le fichier n'importe où sur le formulaire, il le prend. Je ne veux pas que cela se produise, je veux simplement que le conteneur Previews soit glissé-déposé ET Cliquable, mais en même temps, si je clique sur Soumettre, le formulaire complet doit être téléchargé.

J'ai lu ce tutoriel sur Dropzone Combinez la forme normale avec Dropzone mais c'est juste la moitié de ce que je veux réellement faire.

Existe-t-il un moyen de réaliser tout cela en utilisant Dropzone efficacement?.

javascriptjqueryformsfile-uploaddropzone.js
13
Vishal Nair

J'y ai également travaillé et je suis finalement tombé sur la réponse sur la page bootstrap . 

La clé consiste à définir l’option clickable: à l’endroit où vous souhaitez que votre zone Dropzone active soit. En utilisant votre exemple, si vous souhaitez que votre zone d’aperçu soit également votre zone de dépôt/clic, définissez clickable:'#dropzonePreview', pour que cette zone devienne active. Si vous voulez que l'image "Drop Files" soit affichée, utilisez ceci:

<div id="dropzonePreview" class="dz-default dz-message">
  <span>Drop files here to upload</span>
</div>

Cela vous permet d'utiliser un seul formulaire Dropzone (ainsi, tous les champs sont soumis comme un seul formulaire) tout en vous permettant de définir une zone plus petite pour déposer/cliquer.

Une note cependant, ne la faites pas trop petite, car si vous glissez-déposez en dehors de la zone, elle charge l'image dans le navigateur à la place de la page.

21
ChaosTheory

Vous pouvez également créer des zones de saut par programme (même sur des éléments de formulaire non ) En instanciant la classe Dropzone http://www.dropzonejs.com/#toc_4

Vous devez ajouter la classe dz-clickable à l'élément souhaité.

HTML

<div class="dropzone dz-clickable" id="myDrop">
    <div class="dz-default dz-message" data-dz-message="">
        <span>Drop files here to upload</span>
    </div>
</div>

JavaScript

// Dropzone class:
var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});

// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone({ url: "/file/post" });

Remarque

Si vous recevez une erreur de console en indiquant: Dropzone already attached, veillez à ajouter cette ligne avant de lancer votre nouvel objet Dropzone.

Dropzone.autoDiscover = false;
11
Xhezairi

La documentation dit de définir l'option: "clickable: true", mais ...

Mon problème était que j'avais ajouté un balisage visible dans le formulaire de téléchargement (boîte). Si vous souhaitez que tous les points de la boîte soient cliquables, vous ne pouvez inclure aucune autre balise visible dans votre vue. Vous devez l'ajouter à l'option "dictDefaultMessage".

0
Art P Vandelay