Ajax File Upload With Client Side Validation

Introduction

I am writing this article because it has all the information to kick-start your file upload functionality using Ajax - file upload, client-side validation for type of extension allowed, maximum upload size, preview functionality for your uploaded images.

Background

AjaxFileUpload

AjaxFileUpload is an ASP.NET AJAX control that allows you to asynchronously upload files to the server.

HTTP Handlers

An ASP.NET HTTP handler is a process (frequently referred to as the "endpoint") that runs in response to a request made to an ASP.NET Web application. The most common handler is an ASP.NET page handler that processes .aspx files.

Using the Code

I will waste no time and provide you all the different code blocks needed for this exercise. Let's start with HTML code.

Add the below HTML in between form tag of .aspx page. Also, you need to register Ajax control toolkit DLL in the .aspx page. For the preview of the image, we used ASP image control.

<asp:UpdatePanel ID="upanel" runat="server">
    <ContentTemplate>
        <asp:Image ID="imgsignature" 
        CssClass="thumbimage" runat="server" />
        <ajax:asyncfileupload id="fusignature" runat="server" 
        completebackcolor="White" width="200"
            onuploadedcomplete="fusignature_UploadedComplete" 
            allowedfiletypes="jpg,jpeg,png,gif"
            onclientuploadstarted="uploadStart" 
            onclientuploadcomplete="OnClientAsyncFileUploadComplete"
            onclientuploaderror="uploadError" />
    </ContentTemplate>
</asp:UpdatePanel>

JavaScript code:

function uploadStart(sender, args) {
    var filename = args.get_fileName();
    var filext = filename.substring(filename.lastIndexOf(".") + 1);
    if (filext == "jpg" || filext == "jpeg" || 
    filext == "png" || filext == "gif") {
        return true;
    }
    else {
        var err = new Error();
        err.name = 'Image Format';
        err.message = 'Only .jpg, .gif, .png, .gif files';
        throw (err);
        return false;
    }
}

Upload start function fires as soon as we browse an image in file upload control and check whether the file being uploaded is jpg, jpeg, png or gif type. If it is not, code will fire an error and this error will be handled in uploadError function.

function uploadError(sender, args) {
    addToClientTable("<span style='color:red;'>" + 
    args.get_errorMessage() + "</span>");
}

function addToClientTable(text) {
    var table = document.getElementById("<%= clientSide.ClientID %>");
    var row = table.insertRow(0);

    fillCell(row, 0, text);
}

function fillCell(row, cellNumber, text) {
    var cell = row.insertCell(cellNumber);
    cell.innerHTML = text;
    cell.style.borderBottom = cell.style.borderRight = "solid 1px #aaaaff";
} 

addToClientTable and fillCell function - you can write whatever code you want in uploadError function to show a formatted error message to the user.

function OnClientAsyncFileUploadComplete(sender, e) {
    var size = e._length;
    if (size <= 4194304) {
        var handlerPage = '<%= Page.ResolveClientUrl("~/Handler.ashx")%>';
        var src = handlerPage;
        document.getElementById('<%= imgsignature.ClientID %>').setAttribute("src", src);
        return true;
    }
    else {
        var err = new Error();
        err.name = 'Max Size';
        err.message = 'Max. size 4 MB';
        throw (err);
        return false;
    }
}

This function again validates input image for file size and display proper error message when file size exceeds 4 MB.

I am using an ashx file to show preview of the uploaded image which will be stored in session variable.

HTTP Handler Code

using System.Web.SessionState;

public void ProcessRequest(HttpContext context)
{
    if (context.Request.QueryString["Type"] != null)
    {
        byte[] img = (byte[])context.Session["signatureImage"];
        context.Response.ContentType = "text/image";
        context.Response.BinaryWrite(img);
        context.Response.Flush();
    }
}

Remember to use the below attribute in form tag. As enctype is used when form submission method is post and when you have file upload control in your form, you should set its value to "multipart/form-data" which means no character is encoded.

enctype="multipart/form-data"  

References

• https://msdn.microsoft.com/en-us/library/bb398986.aspx
• AjaxFileUpload

History

• 25^th September, 2017: Initial version