title: Set value of file input with javascript
body: <p>I am using this script (from <a href="http://www.html5rocks.com/en/tutorials/file/dndfiles/" rel="nofollow">http://www.html5rocks.com/en/tutorials/file/dndfiles/</a>):</p>
  
  <pre><code>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++) {
      }
  }
  </code></pre>
  
  <p>to loop through files dragged from desktop into an html element.</p>
  
  <p>From that tutorial I can read the files and do something with the content.</p>
  
  <p>I want something simpler.</p>
  
  <p>I want a plain form:</p>
  
  <pre><code>&lt;form method="post" enctype="multipart/form-data"&gt;
  &lt;input type="file" name="my_file" /&gt;
  &lt;input type="submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and with javascript set the value of <code>input[name="my_file"]</code>.</p>
  
  <p>I can read from some pages that I can't set the value of a file input for security reasons. I do understand that I cannot set an arbitrary value of the file input but I don't understand why I can't set the value of the file input to be the file name of the drag'n'dropped file.</p>
  
  <p>If I can read from the files I think I would also be able to post the files.</p>
  
  <p>Are there any ways to accomplish what I want?</p>