Hi everyone in this blog I’m explaining about upload file using ajax.

Description:

In this post, we will look into file upload using JQuery plug-in. Ajax file upload plug-in  allows us to upload files to server. I am going to explain it with an example. We will be using custom HTTP handler to upload file onto the server. Create an ASP.NET MVC web application and name it as JQueryFileUpload. Now, add below scripts to site.master.

<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/ajaxupload.js" type="text/javascript"></script>

Now, goto Index view under Home controller and add below html:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="uploadStatus" style="color: red;"></div>
    <input type="button" id="uploadFile" value="Upload File" />
    <div id="fileList"></div>
</asp:Content>

We are using upload Status tag to show status message while uploading/deleting a file. Upload File button is used to select the file to be uploaded. fileList tag is used to show list of files uploaded. Add a new class to the solution and name it as FileUploadHandler. This class will act as custom HTTP handler for uploading/deleting file. Add below code to the class:

public class FileUploadHandler: IHttpHandler
{
    #region IHttpHandler Members
    public bool IsReusable
    {
        get { return false; }
    }
    public void ProcessRequest(HttpContext context)
    {
        try
        {
            //Uploaded File Deletion
            if (context.Request.QueryString.Count > 0)
            {
                string filePath = @"c:\DownloadedFiles\" + context.Request.QueryString[0].ToString();
                if(File.Exists(filePath))
                File.Delete(filePath);
            }
            //File Upload
            else
            {
                string fileName = Path.GetFileName(context.Request.Files[0].FileName);
                string location = @"c:\DownloadedFiles\" + fileName;
                context.Request.Files[0].SaveAs(location);
            }
        }
        catch
        {
        }
    }
    #endregion
}

We  implemented IHttpHandler and defined code to upload/delete file  in ProcessRequest(). We are deleting a uploaded file by passing its name as parameter. We need to register the HTTP handler by adding below tag to web.config in httpHandlers section for any .upload request. 

<add path="*.upload" verb="*" type="JQueryFileUpload.FileUploadHandler"/>

Now, add below script to site.master for making ajax call for upload/delete of the file.

<script type="text/javascript">
    $(function() {
        //Function to upload file.
        new AjaxUpload('#uploadFile', {
            action: 'FileUploadHandler.upload',
            name: 'upload',
            onComplete: function(file) {
                $('<div><img src="../../Content/delete.jpg" style="width:20px;height:20px" class="delete"/>' + file + '</div>').appendTo('#fileList');
                $('#uploadStatus').html("Upload Done.");
            },
            onSubmit: function(file, ext) {
                if (!(ext && /^(txt|doc|docx|xls|pdf)$/i.test(ext))) {
                    alert('Invalid File Format.');
                    return false;
                }
                $('#uploadStatus').html("Uploading...");
            }
        });
        //Function to delete uploaded file in server.
        $('img').live("click", function() { $('#uploadStatus').html("Deleting"); ; deleteFile($(this)); });
    });
    function deleteFile(objfile) {
        $.ajax({ url: 'FileUploadHandler.upload?del=' + objfile.parent().text(), success: function() { objfile.parent().hide(); } });
        $('#uploadStatus').html("Deleted");
    }
</script>

We are using Ajax Upload function to upload file. We specified action as our HTTP handler and used on Complete and on Submit events to show status of file upload. We are specifying file formats accepted for uploading in on Submit event by its file extension. Finally, add below line to Global.asax under Register Routes to skip routing for our HTTP handler:

routes.IgnoreRoute("{file}.upload");

Run the application, use Upload File button for selecting and uploading the file. Click on delete icon to delete corresponding file in the server.

I am ending the things here. I am attaching the source code with it. I hope this article will be helpful for all.

in my next post i'll explain about Understanding Ajax Helpers in ASP.NET MVC