HTML5 is the direction for web-based applications. All you have to do is listen to the material from any technical conference or keep an eye on web
developer online community discussions to know that HTML5 is important. Each day, I read about new and exciting HTML5 features and uses for those
features -- witness the many new features in the latest versions of Internet Explorer (IE), Chrome, and Firefox.
Mobile application development is definitely where HTML5 has gotten its start, but HTML5 is not limited to mobile. Here, I will build on the
information in "HTML5 for the ASP.NET Developer" along with many other great articles on HTML5 published in DevProConnections and delve into some of the HTML5 features that are available today and that you can use immediately to provide solutions for
your customers now. In this article, we'll see what can be done in ASP.NET running in a modern web browser, such as Chrome, Firefox, Safari, and the
recently released IE10. (As an FYI, in December 2011 Chrome 15 was named the
most popular web browser version by StatCounter, though Internet Explorer is the most popular browser family.)
Drag and Drop to Upload Files
Who isn't familiar with the concept of dragging an object from one place in a computer UI and dropping it somewhere else on screen, resulting in an
action occurring? This capability has been around for a long time in Windows, Mac, and other operating systems. Although this fact isn't widely known,
browser support for drag and drop is available for web apps. You may have seen this in Google+. Going further, there is also the ability to upload
files via a drag-and-drop visual interface. I have found that drag and drop for file uploading works in the most recent versions of Chrome, Firefox,
and IE10. Unfortunately, this means that IE9 and earlier don't support the necessary APIs for file upload.
The first step in building a drag-and-drop file-upload capability into your web application is to assemble the necessary libraries. We'll use the
following libraries:
-
Modernizr: a library that allows a program to test the browser for capabilities
-
jQuery: We'll use jQuery for its ability to modify the document object model (DOM) in browsers.
The first step in creating the file-upload capability is to create a couple of divs that will be used for our file upload. Figure 1 shows the HTML that
accomplishes this. In this example, we have two divs. The dropArea div will be used to accept drops. The oldUpload div will be used for browsers that
don't support the necessary APIs to allow for the user to upload files via drag and drop.
Figure 1: Creating divs for the file upload
<div id="dropArea" class="dZone">
</div>
<div id="oldUpload" class="dZone">
Upload files:<br />
<input type="file" id="fileUp" name="fileUp" /><br />
<input type="submit" id="fileSubmit" name="fileSubmit" value="Upload" />
</div>
The next step is to determine whether the browser supports the necessary drag-and-drop APIs along with the browser-based file-reading APIs. This is
done by using the following code:
var supported = ((Modernizr.draganddrop) &&
(typeof (window.FileReader) != "undefined"));
This code uses the Modernizr library to determine whether the browser supports the necessary drag-and-drop interface. If the browser in use supports
drag and drop, the value
true is returned. The next step is to check the browser for file-reader support. Once we have determined whether the
browser supports drag and drop and file-reading APIs, our code will then really get going.
Figure 2 shows the sample code for determining whether the application should display the drag-and-drop file user interface or the old-style upload
interface.
Figure 2: Determining the file-upload interface style
dz = $("#dropArea");
dropZone = dz[0];
dz.removeClass("error");
isdnds = IsDragAndDropFileUploadSupported();
old = $("#oldUpload");
if (isdnds) {
dz.text(startUpText);
old.hide();
}
else {
dz.hide();
}
In this code, we need to get references to the dropArea div and the oldUpload div area. If the browser supports drag and drop as well as the FileReader
APIs, the oldUpload div area is hidden. If the browser does not support drag and drop and the FileReader APIs, the dropArea div is hidden. Figure 3
shows how the upload interface will appear, depending on browser type.
Figure 3: File-upload interface for older and newer browsers
Drag and Drop
HMTL5's drag and drop is a powerful API for enabling users to copy, move, and delete items with just a few mouse clicks. Drag and drop provides a set
of events that a developer's JavaScript code can monitor and respond to. These events are
-
drag: an event that is fired during the drag operation
-
dragend: an event that is fired when a drag operation is finished; this event typically occurs when the mouse button is released or the Esc key
is pressed
-
dragenter: an event that occurs when the mouse is moved over an element while a drag is currently underway
-
dragleave: occurs when the mouse is moved over an element while a drag is currently underway
-
dragover: occurs when the mouse is moved over an element while a drag is currently underway
-
dragstart: an event that is fired when a user begins dragging an object
-
drop: an event that occurs when the dragged elements are dropped/released onto an element that accepts data
Your next question might be, What types of elements can accept drag/drop events? Elements that can accept these drag-and-drop events include editable
controls and content areas, such as the <div/> tag.
The next step is to set up the events for dragging and dropping files into a web browser, as shown in the code in Figure 4. These events are set up:
-
dragover: used to instruct the user what to do when the mouse is positioned over the dropArea
-
dragleave: used to provide additional instructions to the user when the mouse leaves the dropArea but is still in drag mode
-
drop: When the drop event occurs within the dropArea, this is where the fun begins; this event is called when the drop event occurs within the
dropArea
The first line of the ondrop event method in Figure 4 is to call the .preventDefault(). This method will stop the browser from opening the file(s),
which is the default action. We don't want the code to open the files, merely to send the files to the browser.