Display image after upload without page refresh or postback using ASP.Net AsyncFileUpload Control

In this article I will explain how to display images that were uploaded using ASP.Net AJAX Control Toolkit AsyncFileUpload Control without page refresh or PostBack in ASP.Net Web Page or ASP.Net AJAX Update Panel. Everything is done using client side JavaScript and no server side processing.

To display the image after upload without PostBack and without any page refresh I’ll make use of the client side event OnClientUploadCompletewhich fires when the file is successfully uploaded.

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:AsyncFileUpload OnClientUploadComplete="uploadComplete" runat="server" ID="AsyncFileUpload1"
    Width="400px" UploaderStyle="Modern" CompleteBackColor="White" UploadingBackColor="#CCFFFF"
    ThrobberID="imgLoader" OnUploadedComplete="FileUploadComplete" OnClientUploadStarted = "uploadStarted"/>
<asp:Image ID="imgLoader" runat="server" ImageUrl="~/images/loader.gif" /><br /><br />
<img id = "imgDisplay" alt="" src="" style = "display:none"/>
</form> 

Above you will notice I have specified two client side events of the ASP.Net AJAX Control Toolkit AsyncFileUpload Control i.e. OnClientUploadComplete and OnClientUploadStarted. I will explain their usages in the Client Side section of this article. Also I have added an HTML image imgDisplay which will be used to display the uploaded image.

Server side code is very simple. It has a protected string variable which stores the path of the folder where the images will be stored. The reason it is declared protected so that it can also be used client side to display the image after upload.

And the other one is the FileUploadComplete event which simply stores the uploaded file on the disk in the specified folder location.

C#

protected string UploadFolderPath = "~/Uploads/";
protected void FileUploadComplete(object sender, EventArgs e)
{
    string filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
    AsyncFileUpload1.SaveAs(Server.MapPath(this.UploadFolderPath) + filename);  
}
 

VB

Protected UploadFolderPath As String = "~/Uploads/"
Protected Sub FileUploadComplete(ByVal sender As Object, ByVal e As EventArgs)
    Dim filename As String = System.IO.Path.GetFileName(AsyncFileUpload1.FileName)
    AsyncFileUpload1.SaveAs(Server.MapPath("Uploads/") + filename)
End Sub 

Client Side

This is the part that does the magic i.e. displaying images after upload without PostBack or page refresh or ASP.Net AJAX Update Panel

<script type="text/javascript">
function uploadStarted() {
    $get("imgDisplay").style.display = "none";
}
function uploadComplete(sender, args) {
    var imgDisplay = $get("imgDisplay");
    imgDisplay.src = "images/loader.gif";
    imgDisplay.style.cssText = "";
    var img = new Image();
    img.onload = function () {
        imgDisplay.style.cssText = "height:100px;width:100px";
        imgDisplay.src = img.src;
    };
    img.src = "<%=ResolveUrl(UploadFolderPath) %>" + args.get_fileName();
}
</script>

UploadStarted Method

This method simply hides the HTML image which is used to display the image after upload every time a new file is uploaded.

UploadComplete Method

This method does the actual work of displaying the image. As you will notice in GREEN, I am assigning the folder path to the HTML image along with the name of the uploaded file which I get from the get_fileName()method of the ASP.Net AJAX Control Toolkit AsyncFileUpload Control.

You need to place the above script in the head section of the page or in the ContentPlaceHolder in case of MasterPages.