- Web Methods in ASP.NET
- JavaScript
- jQuery
- jQuery UI
- Ajax using jQuery
- HTML
Here I have implemented drag and drop file uploads using jQuery, Ajax, Web Methods and a Web Handler. For a better understanding I have divided the article into the following 5 parts:
- HTML
- Use of jQuery-UI
- WebHandler
- WebMethod
- Registering the Events for Drag N Drop in JavaScript
1. HTML
Here I have used div#dropzone as a container in which I will be dropping all the images that I want to upload.
The div#MSG acts like a popup that is used to denote that the file is being uploaded. By default it is hidden and only shows the file being uploaded.
- <div id="MSG">
- <img src="loading.gif" alt="Uploading File" />
- </div>
- <div id="dropzone">
- </div>
2. Use of jQuery-UI
The jQuery-UI contains the function sortable that helps in sorting the file by dragging them to the position where you want them to be.
The function disableSelection disables any kind of select, actually it is not required in this scenario but it is a good practice to do so. In a scenario where you want to drag and drop some text you may find that the browser gets confused with the selection of text with the dragging of text.
Note: The sortable() function doesn't make the div#dropzone sortable, but the child elements in it.
- $("#dropzone").sortable();
- $("#dropzone").disableSelection();
3. WebHandler
Here I am using a WebHandler to upload files, basically the handlers does the heavy lifting.The WebHandler has a function called ProcessRequest, actually It is not exactly a part of the web handler but is overridden as the handler implements the IHttpHandler Interface. The function ProcessRequest has a parameter of type HttpContext, the object of class HttpContext provides a reference to the intrinsic server objects like Request, Response, Session and Server available with the HTTP Request. In the code below you will find that I have used a GUID to generate a Unique ID and concatenating it with the file name so that in any case the user tries to upload images with the same file name then it should not be overwritten. Once the files are saved the method sends a responseText to the client. I have used it to denote the status of the update by text
"Success", if successful, else I am sending the error message in the responseText since I will use it to confirm the upload on the page.
- public void ProcessRequest(HttpContext context)
- {
- try
- {
- if (context.Request.Files.Count > 0)
- {
- string FileName = "";
- HttpFileCollection files = context.Request.Files;
- for (int i = 0; i < files.Count; i++)
- {
- HttpPostedFile file = files[i];
- Guid id = Guid.NewGuid();
- FileName = id + "__" + file.FileName;
- string fName = context.Server.MapPath("Images/" + FileName);
- file.SaveAs(fName);
- }
- context.Response.ContentType = "text/plain";
- context.Response.Write("Success");
- }
- }
- catch (Exception ex)
- {
- context.Response.ContentType = "text/plain";
- context.Response.Write(ex.Message);
- }
-
- }
4. WebMethod
Here I have made 2 Web Methods called GetFileList and DeleteImage. By declaring the function as a WebMethod we are exposing the server-side function such that the method can be called from a remote web client.
- [WebMethod]
- public static string GetFileList()
- {
-
-
-
- CommonFunction com = new CommonFunction();
- string[] filePaths = Directory.GetFiles(HttpContext.Current.Server.MapPath("Images/"));
- DataTable dt = new DataTable();
- dt.Columns.Add("File");
- foreach (string file in filePaths)
- {
- dt.Rows.Add(Path.GetFileName(file));
- }
- return com.ConvertDataTabletoString(dt);
- }
-
- [WebMethod]
- public static string DeleteImage(string fileName)
- {
-
- try
- {
- File.Delete(HttpContext.Current.Server.MapPath("Images/") + fileName);
- return "Success";
- }
- catch (Exception)
- {
- return "Failed";
- }
- }
5. Registering the Events for Drag N Drop in JavaScript
Here is the best part of this article, register events to detect drag and drop. To do so the browser provides events like:
- ondragenter: Detects the dragged element's entry on the droppable target.
- ondragover: Detects the dragged element is over the droppable target.
- ondragleave: Detects the dragged element leaves the droppable target.
- ondrop: Detects the dragged element is dropped on the droppable target.
NOTE: the events are fired on droppable elements i.e div#dropzone and not on the draggable elements
- var dz = document.querySelector('#dropzone');
- dz.addEventListener('dragenter', handleDragEnter, false);
- dz.addEventListener('dragover', handleDragOver, false);
- dz.addEventListener('dragleave', handleDragLeave, false);
- dz.addEventListener('drop', handleDrop, false);
Here I will use the function
handleDrop() to handle the drop event. This function then uploads the dropped file to the server using jQuery Ajax on the Client-Side and WebHandler on the Server-Side. How I have implemented it, you can find it in the following code.
Complete Code
- $(document).ready(function () {
- var dz = document.querySelector('#dropzone');
- dz.addEventListener('dragenter', handleDragEnter, false);
- dz.addEventListener('dragover', handleDragOver, false);
- dz.addEventListener('dragleave', handleDragLeave, false);
- dz.addEventListener('drop', handleDrop, false);
-
- GetFileDetails();
-
- $("#dropzone").sortable();
- $("#dropzone").disableSelection();
- });
-
- function handleDragOver(e) {
- if (e.preventDefault) {
- e.preventDefault();
- }
- this.classList.add('over');
-
- return false;
- }
-
- function handleDragEnter(e) {
-
-
-
-
- this.classList.add('over');
-
-
- }
-
- function handleDragLeave(e) {
-
-
- e.preventDefault();
- this.classList.remove('over');
-
- }
-
-
- function handleDrop(e) {
-
- e.preventDefault();
-
-
-
- if (e.dataTransfer.files.length == 0) {
- this.classList.remove('over');
- return;
- }
- var files = e.dataTransfer.files;
-
-
-
- var data = new FormData();
- for (var i = 0, f; f = files[i]; i++) {
- data.append(files[i].name, files[i]);
- }
-
- this.classList.remove('over');
-
-
- var options = {};
- options.url = 'FileUploader.ashx';
- options.type = 'post';
- options.data = data;
- options.async = false;
- options.contentType = false;
- options.processData = false;
- options.beforeSend = function () {
- ShowPopup();
- };
- options.error = function () {
- alert('Problem uploading file');
- HidePopup();
- };
- options.complete = function (response) {
- HidePopup();
- GetFileDetails();
- };
- $.ajax(options);
-
-
- }
-
- var overlay = $('<div id="overlay"></div>');
-
-
- function ShowPopup() {
-
- overlay.appendTo(document.body);
- $('#MSG').show();
- }
-
- function HidePopup() {
- $('#MSG').hide();
- overlay.appendTo(document.body).remove();
- }
-
- var imgControl = '<div class="imageControl">\
- <a href="javascript:deleteImage(\'||FILENAME||\');">\
- <img src="delete.png" />\
- </a>\
- <img src="Images/||FILENAME||" />\
- </div>';
-
-
-
-
- function GetFileDetails() {
- var options = {};
- options.type = "POST",
- options.url = 'Default.aspx/GetFileList',
- options.data = '{}',
- options.async = false,
- options.contentType = "application/json; charset=utf-8",
- options.dataType = "json",
- options.complete = function (response) {
- var resp = JSON.parse(response.responseText);
- var filesList = JSON.parse(resp.d);
- var imageControlList = '';
- for (var i = 0; i < filesList.length; i++) {
- imageControlList += imgControl.replace('||FILENAME||', filesList[i].File).replace('||FILENAME||', filesList[i].File);
- }
- $('#dropzone').html(imageControlList);
- };
- $.ajax(options);
-
- }
-
-
- function deleteImage(fileName) {
- var options = {};
- options.type = "POST",
- options.url = 'Default.aspx/DeleteImage',
- options.data = '{ fileName :"' + fileName + '" }',
- options.async = false,
- options.contentType = "application/json; charset=utf-8",
- options.dataType = "json",
- options.complete = function (response) {
- GetFileDetails();
- };
- $.ajax(options);
- }
So here we have finished making a DROPZONE.
Please do not forget to provide your valuable suggestions and feel free to ask queries.
That's all for this article, will see you in some other article. Until then, Keep Learning.