title: How to add text input to dropzone upload
body: <p>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?</p>
  
  <p><img src="https://i.stack.imgur.com/4xeEz.jpg" alt="dropzone upload"></p>
  
  <p>This is my html code code</p>
  
  <pre><code>  &lt;form id="my-awesome-dropzone" class="dropzone"&gt;
    &lt;div class="dropzone-previews"&gt;&lt;/div&gt; &lt;!-- this is were the previews should be shown. --&gt;
  
    &lt;!-- Now setup your input fields --&gt;
    &lt;input type="email" name="username" id="username" /&gt;
    &lt;input type="password" name="password" id="password" /&gt;
  
    &lt;button type="submit"&gt;Submit data and files!&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And this is my script code</p>
  
  <pre><code>&lt;script&gt;
  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
  }
  &lt;/script&gt;  
  </code></pre>