CODEWITHSUNDEEP
jqueryexpressdrag-and-dropgmail
EternallyCurious
EternallyCurious

Reputation: 2415

Is it possible to drag and drop and upload images using JQuery?

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 http://www.dropzonejs.com/, 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.

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.

<div id = "imageUploader" ....> </div>

$("#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);
  }

}

Upvotes: 2

Views: 4339

Answers (2)

user2826254
user2826254

Reputation: 116

You may try these plugins for uploading images

http://www.appelsiini.net/2009/10/drag-and-drop-file-upload-with-google-gears http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload

Upvotes: 0

Casey ScriptFu Pharr
Casey ScriptFu Pharr

Reputation: 1670

Use the library Jquery-File-Upload. It supports drag and drop file uploads, but is compatible for HTML5 capable browsers. http://hayageek.com/drag-and-drop-file-upload-jquery/

Upvotes: 1

Related Questions