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