google app engine - Issue to use JQuery GAE Dropload - Blobstore upload from drag and drop -

i implement drag , drop file on web page upload file google blobstore. resources sparse on topic. 1 of easiest way achieve seems use jude osborn jquery.gaedropload

the description of plugin not detailed poor skilled developer me. working (as starting writing questions on stackoverflow made me understood wrong in code)

i answer own question, hopping others too.

maybe that's obvious experienced developers, spent hours (not counting days on this). started working page classic html form upload image blobstore before starting use jquery.gaedropload.

• need use jquery 2.x (with jquery 1.x plugin fails error). maybe that's normal since plugin use html5 new formdata()
• generate_url: doc says:

a gae url returns blobstore url.

we need return url specified in form before (when using <input type="file" name="uploadedfile" /> upload file). in jsp file used: <form action="<%= blobstoreservice.createuploadurl("/uploadimage") %>"

therefore function need write this:

public void doget( httpservletrequest request, httpservletresponse response )   throws servletexception, ioexception {     blobstoreservice blobstoreservice = blobstoreservicefactory.getblobstoreservice();     response.setcontenttype("text/html");     response.setcharacterencoding( "utf-8" );     printwriter out = response.getwriter();     out.println(blobstoreservice.createuploadurl("/uploadimage"));  } 

• we cannot specify anymore name of input (before used: name="uploadedfile"). name set plugin file0. therefore need modify post called after blobstore upload:

  blobstoreservice blobstoreservice = blobstoreservicefactory.getblobstoreservice(); map<string, list<blobkey>> blobs = blobstoreservice.getuploads(request); list<blobkey> blobkeys = blobs.get("file0"); //before was: uploadedfile 

• when posting form upload picture need additional parameters (to identify image uploaded). before in form:

  <input type="hidden" name="setname" value="${ setname }"> <input type="hidden" name="imageid" value="3"> 

now need specify them when calling pluging in extraformdata:

    $('#image3').gaedropload( {         extraformdata: { setname: "${ setname }", imageid: 4 },         dragover: function() { //show can drop here             $('#image3').css('background', 'red');         },         dragleave: function() { //show cannot drop anymore             $('#image3').css('background', '');         },         afterdrop: function() { //show cannot drop anymore             $('#image3').css('background', '');         }     }); //gaedropload 

also drag , drop functions can added show user can drop.

image3 div around image:

    <div class="span1 thumbnail" id="image3" ><img src="<%=set.getimageurl(3)%>" alt=""></div> 

the last point image refreshed after upload. need return new image url. when calling plugin add:

        dropsuccess: function() { //async call new uploaded image             $.ajax({                 url: '/blobimage?setname=${ setname }&buttonid=4',                 async: true,  //useless specify, default                 success: function(data) {                     $('#image3 > img').attr('src', data); //get img inside div                 }             }); 

and call

imagesservice imagesservice = imagesservicefactory.getimagesservice(); imagesservice.getservingurl(servingurloptions.builder.withblobkey(images[index])); 

to updated image.

a great plugin after understand how easy use.