Dealing with Local Files Using the File API - HTML5 Programming for ASP.NET Developers - page 242

basket.addEventListener("dragenter", OnDragEnter, false);
basket.addEventListener("dragover", OnDragOver, false);
basket.addEventListener("drop", OnDrop, false);
});
This code declares a global variable, iles , that is used later in the code to store a reference to the
selected files. The change event of both file field controls is wired to the OnChange function. Similarly, the
dragenter , dragover , and drop events are wired to the OnDragEnter , OnDragOver , and OnDrop functions,
respectively. Out of all these event handlers, OnChange and OnDrop are important because they initiate the
process of generating the table of files. These two event handlers are shown in Listing 9-19.
Listing 9-19. OnChange and OnDrop Event Handlers
function OnChange(evt) {
files = evt.target.files;
ShowFileDetails(files);
}
function OnDrop(evt) {
evt.stopPropagation();
evt.preventDefault();
files = evt.dataTransfer.files;
ShowFileDetails(files);
}
The OnChange event-handler function grabs the selected files using the iles property of the file field
control. Note that the change event handler of FileUpload1 as well as FileUpload2 is handled by OnChange .
So, the evt.target refers to the respective file field control. OnChange then calls a helper function
ShowFileDetails() , which updates the table of files displayed in the page.
The OnDrop event-handler function grabs the files using the iles property of the dataTransfer object
and cancels the event bubbling. ShowFileDetails() is then called to generate a table of files.
Note that the iles property of the file field control and the dataTransfer object is of type FileList (see
Table 9-2 earlier for a quick recap of the FileList object). The ShowFileDetails() function used by the
OnChange and OnDrop event handlers is shown in Listing 9-20.
Listing 9-20. Showing File Information Using the File Object
function ShowFileDetails(files) {
$("#Table1").empty();
$("#Table1").append("<tr><th>File Name</th><th>Size</th><th>MIME Type</th><th>Preview</th></
tr>");
for (var i = 0; i < files.length; i++) {
if (files[i].type == "image/jpeg" ||
files[i].type == "image/png" ||
files[i].type == "image/gif") {
$("#Table1").append("<tr><td>" + files.item(i).name +
"</td><td>" + files[i].size +
"</td><td>" + files[i].type +
"</td><td><a href='#'
data-ile-index='" +
i + "'>Show</a></td></tr>");