---
title: "Upload Drag Drop file to the server in asp.net using ajax and handler"  
description: "In this article i am going to demonstrate how to upload , drag and drop file in asp.net. here i am using ajax and handler to upload drop file to the s"  
author: "Ashok Aryan"  
published: 2016-02-20  
updated: 2018-03-14  
canonical: https://www.mindstick.com/blog/11024/upload-drag-drop-file-to-the-server-in-asp-dot-net-using-ajax-and-handler  
category: "c#"  
tags: ["asp.net", "jquery", "handler"]  
reading_time: 5 minutes  

---

# Upload Drag Drop file to the server in asp.net using ajax and handler

In this [article](https://www.mindstick.com/articles/95867/are-you-looking-for-500-credit-score-mortgage-lenders-houston-continue-reading-this-article) i am going to demonstrate how to upload , [drag and drop](https://www.mindstick.com/forum/454/how-to-drag-and-drop-multiple-image-from-one-canvas-to-onther-canvas-in-html5) [file in asp.net](https://www.mindstick.com/forum/158972/how-to-read-appsettings-values-from-a-json-file-in-asp-dot-net-core). here i am using ajax and [handler](https://www.mindstick.com/forum/2470/jquery-autocomplete-using-handler) to upload drop file to the [server](https://www.mindstick.com/articles/43769/what-is-serverless-architecture-is-it-worth-switching-over).\

##### Step 1

Open [visual studio](https://www.mindstick.com/articles/12378/visual-studio-for-mac-is-out-of-beta-preview-now-officially-available) create a [website](https://www.mindstick.com/articles/13110/why-copywriting-is-crucial-for-new-website-build) and give the suitable name.\

##### Step 2

Add new web form\

##### Step 3

Put below [script](https://www.mindstick.com/interview/477/how-can-i-execute-a-php-script-using-command-line) on the head of page

\

```
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script>

        $(document).ready(function () {
            var Divobj = $("#drgdiv");
            Divobj.on('dragenter', function (e) {
                $(this).css('border', '1px solid green');
                e.stopPropagation();
                e.preventDefault();
            });
            Divobj.on('dragover', function (e) {
                e.stopPropagation();
                e.preventDefault();
            });
            $(document).on('dragenter', function (e) {
                e.stopPropagation();
                e.preventDefault();
            });
            $(document).on('dragover', function (e) {
                e.stopPropagation();
                e.preventDefault();
                obj.css('border', '1px dotted red');
            });
            $(document).on('drop', function (e) {
                e.stopPropagation();
                e.preventDefault();
            });
            Divobj.on('drop', function (e) {
                $(this).css('border', '1px dotted red');
                e.preventDefault();
                var files = e.originalEvent.dataTransfer.files;

                for (var i = 0; i < files.length; i++) {
                    var fd = new FormData();
                    fd.append('file', files[i]);

                    //==========Start Upload drop file to server using ajax and handler
                    var choice = {};
                    choice.url = "Upload.ashx";
                    choice.type = "POST";
                    choice.data = fd;
                    choice.contentType = false;
                    choice.processData = false;
                    choice.success = function (result) {

                        $("#upld").append("<li>" + result + "</li>");

                    };
                    choice.error = function (err) { //alert(err.statusText);
                    };
                    $.ajax(choice);
                    event.preventDefault();
                    //==========End Upload drop file to server using ajax and handler
                }
            });

        });

    </script>
```

Html Block

```
<div id="drgdiv" style="height: 200px; border: 1px solid teal; text-align:center; font-size:xx-large; padding-top:30px;">
        Drag & drop file here
        </div>
         ===== Uploaded File ======
        <ul id="upld">


        </ul>
```

\

![Upload Drag Drop file to the server in asp.net using ajax and handler](https://www.mindstick.com/blogs/efc1d447-70e8-46b7-a136-274f85476bc0/images/db72770f-9110-4384-8f0e-febb1fec5e2c.png)\
\

##### Step 4

\
Right click on solutions explorer Add new Item => Add generic handler\
![Upload Drag Drop file to the server in asp.net using ajax and handler](https://www.mindstick.com/blogs/efc1d447-70e8-46b7-a136-274f85476bc0/images/db622fb5-f8ab-41ad-b46f-3986d87b2fb4.png)\
\
\
And give suitable name to the handler lets upload.ashx\
**\**

##### Add below code snippet

```
using System;
using System.Web;
using System.IO;
using System.Drawing;
using System.Drawing.Drawing2D ;

public class Upload : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        string returnPath = "";
        if (context.Request.Files.Count > 0)
        {
            HttpFileCollection SelectedFiles = context.Request.Files;
            for (int i = 0; i < SelectedFiles.Count; i++)
            {
                HttpPostedFile PostedFile = SelectedFiles[i];
                string generatedFilename = PostedFile.FileName;

                string FileNameBig = context.Server.MapPath("~/Upload/")+ generatedFilename;

                PostedFile.SaveAs(FileNameBig);

                returnPath = PostedFile.FileName;
            }
        }

        else
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("Please Select Files");
        }

        context.Response.ContentType = "text/plain";
        context.Response.Write(returnPath);
    }



    public bool IsReusable {
        get {
            return false;
        }
    }

}
```

\

##### Results

![Upload Drag Drop file to the server in asp.net using ajax and handler](https://www.mindstick.com/blogs/efc1d447-70e8-46b7-a136-274f85476bc0/images/3e93704e-6835-42a8-ac7d-e1ef2b01f379.png)**\**

---

Original Source: https://www.mindstick.com/blog/11024/upload-drag-drop-file-to-the-server-in-asp-dot-net-using-ajax-and-handler

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.