title: js: how to create a div that I can drop files on to upload
body: <p>Have this in CSS:</p>
  
  <pre><code>#drop_zone {
      border: 2px dashed #bbb;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      padding: 25px;
      text-align: center;
      background-color: white;
  }
  </code></pre>
  
  <p>and then a <code>div</code> in my HTML:</p>
  
  <pre><code>&lt;div id="drop_zone"&gt;&lt;span style="color: darkgray"&gt;Drop files here.&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I've previously written javascript to intercept the handler and to parse through files locally, but now I'm interacting with a Flask backend and want to just pass the files in as an upload event, bypassing a standard form:</p>
  
  <pre><code>&lt;form action="" method=post enctype=multipart/form-data&gt;
      &lt;p&gt;&lt;input type=file name=file&gt;
          &lt;input type=submit value=Upload&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Is there an easy way to do this in javascript?</p>
  
  <p>Also, it would be great to do something in the style of Gmail, where it gives you a standard upload option (I've been looking into jasny's upload widget but have been having some heartburn with it) and then, when you drag a file onto the div, it gives you the option to drag-and-drop instead.</p>