title: drag drop images input file and preview before upload
body: <p>I want to create a div attach drag drop feature and when someone click it they can choose their image.</p>
  
  <p>I have coded something and its can
   - click div and choose your image
   - preview your image before upload</p>
  
  <p>you can check my fiddle</p>
  
  <p>css</p>
  
  <pre><code>.uploader {width:300px;height:350px;background:#f3f3f3;border:2px dashed #e8e8e8;}
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code>    var imageLoader = document.getElementById('filePhoto');
      imageLoader.addEventListener('change', handleImage, false);
  
  function handleImage(e) {
      var reader = new FileReader();
      reader.onload = function (event) {
  
          $('.uploader').html( '&lt;img width="300px" height="350px" src="'+event.target.result+'"/&gt;' );
      }
      reader.readAsDataURL(e.target.files[0]);
  }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div class="uploader" onclick="$('#filePhoto').click()"&gt;click here or drag here your images for preview and set userprofile_picture data&lt;/div&gt;
              &lt;input type="file" name="userprofile_picture"  id="filePhoto" style="display:block;width:185px;"  /&gt;
  </code></pre>
  
  <p>you can check
  <a href="http://jsfiddle.net/ELcf6/" rel="noreferrer">http://jsfiddle.net/ELcf6/</a></p>