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

Listing 9-25. Index View of the XML File-Upload Application
<% using (Html.BeginForm()) { %>
<div class="message">
Select files using a field field or drop them on the basket
</div>
<%= Html.TextBox("ile1", "",new {type="ile",multiple="multiple"})%>
<div class="message">OR</div>
<div id="basket" class="dropDiv"></div>
<div id="ilecount" class="message"></div>
<div id="errors" class="error"></div>
<input id="upload" type="button" value="Upload" />
<%}%>
The <form> consists of a file field control and a basket <div> element acting as a drop target. The
Upload button triggers the file-upload operation. The jQuery code that wires various event handlers is
shown in Listing 9-26.
Listing 9-26. Wiring Event Handlers for Drag-and Drop Events
var files;
$(document).ready(OnChange);
var basket;
basket = document.getElementById("basket");
basket.addEventListener("dragenter", OnDragEnter, false);
basket.addEventListener("dragleave", OnDragLeave, false);
basket.addEventListener("dragover", OnDragOver, false);
basket.addEventListener("drop", OnDrop, false);
$("#upload").click(UploadFiles);
});
This code declares a global variable, files , that is used later in the code to store a reference to the
selected files. The change event handler of the file field is wired to the OnChange function. Similarly,
dragenter , dragleave , dragover , and drop are wired to OnDragEnter , OnDragLeave , OnDragOver , and OnDrop ,
respectively. The OnChange and OnDrop events are important and are shown in Listing 9-27.
Listing 9-27. OnChange and OnDrop Event Handlers
function OnChange(evt) {
files = evt.target.files;
ShowFileDetails();
}
function OnDrop(e) {
e.stopPropagation();
e.preventDefault();
files = e.dataTransfer.files;
ShowFileDetails();
}