title: How to append a file into a File Input field
body: <p>I am trying to create a <code>file drag and drop</code> feature.</p>
  
  <p>I've the drag and drop working from the div and handling the file.</p>
  
  <p>Now I now would like to append this file to the <code>Input[type=file]</code> of the form .</p>
  
  <p>How could I do that?</p>
  
  <p>I tried <code>uploadFormData.append("files[]",f);</code> and derivates but it doesnt work. My debugging was submit the form and check the headers to see if the file was sent.</p>
  
  <p>Could anyone point me in the right direction on how achieve this?</p>
  
  <pre><code>    &lt;form enctype="multipart/form-data" id="yourregularuploadformId"&gt;
           &lt;input type="file" name="files[]" multiple="multiple"&gt;
      &lt;/form&gt;
  
  &lt;script&gt;
        var uploadFormData = new FormData(jQuery("#yourregularuploadformId")[0]);
  
          function handleFileSelect(evt) {
          evt.stopPropagation();
          evt.preventDefault();
  
          var files = evt.dataTransfer.files; // FileList object.
  
          // files is a FileList of File objects. List some properties.
  
          var output = [];
  
  
          for (var i = 0, f; f = files[i]; i++) {
            output.push('&lt;li&gt;&lt;strong&gt;', escape(f.name), '&lt;/strong&gt; (', f.type || 'n/a', ') - ',
                        f.size, ' bytes, last modified: ',
                        f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                        '&lt;/li&gt;');
                 uploadFormData.append("files[]",f);
          }
  
          document.getElementById('list').innerHTML = '&lt;ul&gt;' + output.join('') + '&lt;/ul&gt;';
        }
  &lt;/script&gt;
  </code></pre>