title: Is it possible to drag and drop and upload images using JQuery?
body: <p>I am trying to drag and drop images into a div, in a browser. Like in Gmail compose, I want to have images show up inline and be resizable. I am wondering if there are any functions or plugins in JQuery that enable this? I've seen some open source stuff like <a href="http://www.dropzonejs.com/" rel="nofollow">http://www.dropzonejs.com/</a>, but I want to build one of my own that works well specifically with my app. The image would be posted to NodeJs + Express server using POST.</p>
  
  <p>So I'd like to have a function where you can drag and drop a file, in a div and the file would be checked for validity before being uploaded to the server - so the file can be rendered on the client from its location in the server. Ideally I'd like something like this.</p>
  
  <pre><code>&lt;div id = "imageUploader" ....&gt; &lt;/div&gt;
  
  $("#imageUploader").onDraggedAndDropped{
  
    validity: function(){
    //Check if valid size and filetype
    //return true or false otherwise
    }
  
    //File upload not successful
    error: function(error){
    ...
    }
  
    //File upload successful
    error: function(data){
    var path = JSON.stringify(data).filepath;
    render(filepath);
    }
  
  }
  </code></pre>