Implementing Drag-and-Drop File Uploads (^) ❘ 313
Using a Custom XMLHttpRequest Object
The next property and method provide the data transfer functionality for the uploaded fi les. This
involves setting up a custom XMLHttpRequest object, which is in turn assigned to this.http.http : null,upload : function()
{
this.http = new XMLHttpRequest();A series of events is set up to monitor upload progress and to watch out for upload completion. First,
you check whether the upload object exists on the XMLHttpRequest (hereafter, I will simply call the
XMLHttpRequest object just http), and you check to see whether the addEventListener method exists
on the upload object.if (this.http.upload && this.http.upload.addEventListener)
{You next set up an event listener for the progress event on the upload object. This event ultimately
tells you the overall progress of the fi le upload, whether one fi le is uploaded or many.this.http.upload.addEventListener(
'progress',
function(event)
{The event.lengthComputable property tells you whether there is any progress to report.
if (event.lengthComputable)
{The <div> with id name finderDragAndDropDialogueProgressMeter is displayed, as well as the <div>
element within that one.$('div#finderDragAndDropDialogueProgressMeter')
.show();$('div#finderDragAndDropDialogueProgressMeter div')
.show();File upload progress is calculated as a rounded percentage from the event.loaded and event.total
properties that are provided in the event object.var progress = Math.round(
(event.loaded * 100) / event.total
);The resulting progress fi gure is added to the <span> nested with the <div> element with id name
finderDragAndDropDialogueProgress.$('div#finderDragAndDropDialogueProgress span')
.text(progress);