Untitled 1
Two ways of Selecting Files for uploading
This is a quick and short post that tries to answer a question recently asked
by a reader...
As you know HTML5 now has native support for drag and drop operations. A part
of this support also allows you to drag files from Windows explorer and drop
them on to a web page element. The files can then be uploaded on the server as
usual. Now, in addition to HTML5 drag-n-drop you may want to allow users to use
classic technique of file selection - displaying an open file dialog and let
them select the files. If you are supporting both the types of file selection
techniques you may want to hide the File Upload server control from being
displayed on the form entirely because generally you will have some other
element (usually a graphical element) on which the end user can drop the files.
For example, have a look at the following figure:

In this case there is an image displayed on the form. Users can either click
on the image to open the traditional file open dialog for selection files or
they can drag files from explorer and drop them on the image. Once selected a
list of files is displayed below the image.
Let's see how this can be done.
Create a new ASP.NET web application and add a new web form to it. Drag and
drop a File Upload server control on it and set its AllowMultiple property to
True. This way you can select multiple files (a feature of HTML5)
simultaneously. Then also place an ImageButton control on the web form and set
its ImageUrl property to some image file. Then create Scripts folder in the
project and place jQuery library in it. You will be using jQuery for some client
side scripting. Finally, place a Label control below the ImageButton. This Label
will display a list of files selected by the end user.
Now, add a <script> reference to the jQuery library in the head section of
the web form. Also, add a <script> block below it and write the following code
inside the script block:
var files = null;
var fileNames = "";
$(document).ready(function () {
$("#FileUpload1").css("display", "none");
$("#ImageButton1").click(function (evt) {
$("#FileUpload1").click();
files = $("#FileUpload1")[0].files;
if (files.length > 0) {
for(var i=0;i<files.length;i++)
{
fileNames += files[i].name + "<br />";
}
}
$("#Label1").html(fileNames)
evt.preventDefault();
});
$("#ImageButton1").on("dragenter", function (evt) {
evt.preventDefault();
evt.stopPropagation();
});
$("#ImageButton1").on("dragover", function (evt) {
evt.preventDefault();
evt.stopPropagation();
});
$("#ImageButton1").on("drop", function (evt) {
evt.preventDefault();
evt.stopPropagation();
files = evt.originalEvent.dataTransfer.files;
if (files.length > 0) {
for (var i = 0; i < files.length; i++) {
fileNames += files[i].name + "<br />";
}
}
$("#Label1").html(fileNames)
});
});
The ready() handler function hides the file upload control from the user. You
need to hide it from the client side script and not by setting its Visible
property to false because in the later case the control itself won't be rendered
in the browser. Once the file upload control is hidden click event handler for
the click event of ImageButton1 is wired. Inside the click event handler click
event of the file upload control is triggered by calling click() method. This
causes the file upload control to display the file selection dialog. The
selected files can be accessed using the files property of FileUpload1 DOM
element. Notice how the raw DOM element is accessed using $("#FileUpload1")[0]
syntax. Then a for loop iterates through the files collection and displays file
names in the label. The files collection is FileList object that contains zero
or more objects of type File. The name property of the File object returns the
file name. To prevent the form submission preventDefault() method is called on
the event object.
To support drag and drop file selection three event handlers - dragenter,
dragover and drop - are wired to the ImageButton1. The drop event handler
retrieves the dataTransfer object - the object through which data is transferred
during drag and drop operations. Notice the use of originalEvent property to
access dataTransfer. The files property of dataTransfer returns a FileList of
files dropped by the user. A for loop then iterates through the FileList and
displays the filenames.
Run the web form and test both the techniques by selecting and dropping
files. Once the files are selected you can upload them using techniques
discussed in the following articles:
Uploading Files Using
ASP.NET Web Forms, Generic Handler and jQuery
Uploading Files Using HTML5 Drag-and-Drop and ASP.NET
Using HTML5 Drag and Drop in ASP.NET
File Upload using ASP.NET
Uploading Files
Asynchronously using ASP.NET Web API