jQuery 1.9.1 | DnD and img load for FileReader / Canvas?

jQuery 1.9.1 | DnD and img load for FileReader / Canvas?

Is there a way to combine both HTML5 native Drag & Drop and image file append (local) for FileReader / Canvas manipulation? Basically I want to either:

  1. Drag (native drag & drop) an image thumbnail (PNG Base64) located in a source div and drop it in a destination div where upon the dropevent FileReader and Canvas do their stuff, or:


  2. Append the same image thumbnail located in the same source div into the same destination div where upon an append or load event FileReader and Canvas do the same stuff.


I have the following code I use for the drag and drop part which works, but I would need a button that once clicked would trigger an append method (or load?) as explained above at #2:

  1. function drop(e) {
  2. $('#DestinationDiv').css("background-color","#222222");
  3.   var dt = e.dataTransfer;
  4.   var files = dt.files;
  5.   if(files.length>0)  {
  6. handleFiles(files);   
  7. }} 
  8. function handleFiles(f)  {
  9. var o=[];
  10. for(var i=0; i<f.length;i++) {
  11.  var reader = new FileReader();
  12.         reader.onload = (function(theFile) {
  13.         return function(e) {
  14.             gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
  15.            .....
  16.         }; })(f[i]);
  17.         reader.readAsDataURL(f[i]); }}
It would appear that a drag and drop event doesn't quite result like in a load or append event, like the data involved in dropping isn't the same data involved in loading (or appending) in a div. The file I drag and drop is of the type data:image/png;base64,iVBORw0...  which works, but with the above code, when I append the same image in the div, an error occurs at line 21:
  1. TypeError: f is undefined
  2. for(var i=0; i<f.length;i++)

Perhaps I need an eventListener for the "load" or "append" event of the destination div? Obviously the above code is missing something. Any hinters would permit me to sleep ealier tonight LOL! Thx for guiding me towards the right method-event!  ;-)  - dan