(^310) ❘ CHAPTER 11 HTML5 DRAG AND DROP
dragAndDrop = {
path : null,
files : [],
openProgressDialogue : function(files, path)
{
this.path = path;
$('div#finderDragAndDropDialogue')
.fadeIn('fast');
this.files = [];
$(files).each(
function(key, file)
{
dragAndDrop.addFileToQueue(file);
}
);
if (this.files.length)
{
this.upload();
}
else
{
this.closeProgressDialogue();
}
},
Within the openProgressDialogue() method, you copy the path argument, which indicates the path
you want to upload the fi les to, to this.path. And you make the progress dialogue visible by calling
the fadeIn('fast') method on the
element with the classname fi nderDragAndDropDialogue.
The fi les dragged and dropped for upload are passed in the files argument. The files variable is
an array (it remains an array whether one fi le is uploaded or many), and it is iterated using jQuery’s
each() method. The call to dragAndDrop.addFileToQueue() adds the fi le to the this.files array and
also adds the fi le to the progress dialogue’s table so that the user can preview upload progress. If
this.files has a length greater than zero, the method this.upload() is called to execute the fi le
upload. If this.files has a length of zero, this.closeProgressDialogue() is called to close the prog-
ress dialogue. Logically speaking, the this.closeProgressDialogue() route should be impossible
given that the dialogue is not opened unless one or more fi les are present to upload. This route is
represented to cover all bases in implementing a reusable fi le upload API.
The next method implemented in the dragAndDrop object is the closeProgressDialogue() method.
closeProgressDialogue : function()
{
// Uncomment this section to automatically close the
// dialogue after upload
//$('div#finderDragAndDropDialogue')
http://www.it-ebooks.info
The fi les dragged and dropped for upload are passed in the files argument. The files variable is
an array (it remains an array whether one fi le is uploaded or many), and it is iterated using jQuery’s
each() method. The call to dragAndDrop.addFileToQueue() adds the fi le to the this.files array and
also adds the fi le to the progress dialogue’s table so that the user can preview upload progress. If
this.files has a length greater than zero, the method this.upload() is called to execute the fi le
upload. If this.files has a length of zero, this.closeProgressDialogue() is called to close the prog-
ress dialogue. Logically speaking, the this.closeProgressDialogue() route should be impossible
given that the dialogue is not opened unless one or more fi les are present to upload. This route is
represented to cover all bases in implementing a reusable fi le upload API.
The next method implemented in the dragAndDrop object is the closeProgressDialogue() method.
closeProgressDialogue : function()
{
// Uncomment this section to automatically close the
// dialogue after upload
//$('div#finderDragAndDropDialogue')
http://www.it-ebooks.info