Implementing Drag-and-Drop File Uploads (^) ❘ 311
// .fadeOut('fast');
//$('div#finderDragAndDropDialogue tbody tr')
// .not('tr.finderDragAndDropDialogueTemplate')
// .remove();
},
The closeProgressDialogue() method is called automatically when the fi le upload has completed. It
contains some code that you want to uncomment, upon implementing the server-side portion, which
closes and resets the progress dialogue.
The following method, addFileToQueue(), sets up the
in the progress dialogue with a sum-
mary of each fi le uploaded so that the user can see visual feedback regarding their upload attempt. It
creates thumbnails for any images uploaded and adds the fi les to the this.files array.
addFileToQueue : function(file)
{
if (!file.name && file.fileName)
{
file.name = file.fileName;
}
if (!file.size && file.fileSize)
{
file.size = file.fileSize;
}
The fi rst section normalizes the file object, moving the file.fileName property to file.name and
the file.fileSize property to file.size in browsers whose makers preferred the longer property
names. Then the fi le object is added to the this.files array via a call to push().
this.files.push(file);
The next line of code clones the element with the classname finderDragAndDropDialogueTem-
plate with a call to clone(true), which is ultimately added to the with summary data about
each fi le uploaded.
var tr = $('tr.finderDragAndDropDialogueTemplate').clone(true);
The finderDragAndDropDialogueTemplate classname is removed from the template. The classname
hides the template from the user and identifi es the element as a template.
tr.removeClass('finderDragAndDropDialogueTemplate');
The next line examines the MIME type of the uploaded fi le by checking to see if the MIME type
begins with the string 'image/' using a regular expression, and it checks to see if the FileReader
object exists, which is needed to display thumbnails of the uploading image fi les to the user. At
present it is only possible to display thumbnails of image fi les.
// Preview image uploads by showing a thumbnail of the image
if (file.type.match(/^image\/.*$/) && FileReader)
{
http://www.it-ebooks.info
