How to add text input to dropzone upload

Question

I'd like to allow users to submit a title for each file that is dragged into Dropzone that will be inputted into a text input. But i don't know how to add it. Everyone can help me?

This is my html code code

  <form id="my-awesome-dropzone" class="dropzone">   <div class="dropzone-previews"></div> <!-- this is were the previews should be shown. -->    <!-- Now setup your input fields -->   <input type="email" name="username" id="username" />   <input type="password" name="password" id="password" />    <button type="submit">Submit data and files!</button> </form> 

And this is my script code

<script> Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element    // The configuration we've talked about above   url: "upload.php",   autoProcessQueue: false,   uploadMultiple: true,   parallelUploads: 100,   maxFiles: 100,   maxFilesize:10,//MB    // The setting up of the dropzone   init: function() {     var myDropzone = this;      // First change the button to actually tell Dropzone to process the queue.     this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {       // Make sure that the form isn't actually being sent.       e.preventDefault();       e.stopPropagation();       myDropzone.processQueue();     });      // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead     // of the sending event because uploadMultiple is set to true.     this.on("sendingmultiple", function() {       // Gets triggered when the form is actually being sent.       // Hide the success button or the complete form.      });     this.on("successmultiple", function(files, response) {       // Gets triggered when the files have successfully been sent.       // Redirect user or notify of success.      });     this.on("errormultiple", function(files, response) {       // Gets triggered when there was an error sending the files.       // Maybe show form again, and notify user of error     });   },   accept: function (file, done) {         //maybe do something here for showing a dialog or adding the fields to the preview?     },  addRemoveLinks: true } </script>   

Answer 1

You can actually provide a template for Dropzone to render the image preview as well as any extra fields. In your case, I would suggest taking the default template or making your own, and simply adding the input field there:

<div class="dz-preview dz-file-preview">     <div class="dz-image"><img data-dz-thumbnail /></div>     <div class="dz-details">         <div class="dz-size"><span data-dz-size></span></div>         <div class="dz-filename"><span data-dz-name></span></div>     </div>     <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>     <div class="dz-error-message"><span data-dz-errormessage></span></div>     <input type="text" placeholder="Title"> </div> 

The full default preview template can be found in the source code of dropzone.js.

---

Then you can simply pass your custom template to Dropzone as a string for the previewTemplate key of the option parameters. For example:

var myDropzone = new Dropzone('#yourId', {     previewTemplate: "..." }); 

As long as your element is a form, Dropzone will automatically include all inputs in the xhr request parameters.