Ajax AsyncFileUpload control example in asp.net to upload only images

Ajax introduced two new controls AsyncFileUpload and SeaDragon, in this article we will see about Asynchronous file upload control, with its different properties and usage.

1. AsyncFileUpload: by using this control we can upload a file asynchronously (without postback). The file uploading results can be checked both in the server and client sides.

2. SeaDrago: The Seadragon control can be used for viewing Deep Zoom images. Use your mouse to pan and zoom around the image.

One thing we need to note that this control can work with only .Net 3.5 or greater.

Let's see it's properties:

• CompleteBackColor: can be use to set the color of control after completing the file upload, default value :Lime.
• ContentType : can be use to know the MIME type of file uploaded by user, say we want to allow only image then by checking MIME type we can reject upload.
• ThrobberID : Control Id which will be shown while uploading the file, we can say the progress control.
• ErrorBackColor : Set control back ground color if error occurred.
• OnClientUploadComplete: set a JavaScript function which will be executed after successfully uploading the file.
• OnClientUploadError : set a JavaScript function which you want to execute if there is any error
• OnClientUploadStarted : set a JavaScript function which you want to execute once file upload start.
• UploadingBackColor : set color of control while uploading is in progress

Methods : Only one method "SaveAs" to save the file

Events:

1. UploadedComplete this is the event where we will write our code to save the file
2. UploadedFileError : this is the event where we can write some code to handle the error ans show message to user that file is not uploaded due to xyz reason.

It's enough to understand the control, events, methods and properties. Now let's see control in action

Here is the code which will only upload images of type jpg, gif and png

HTML and JavaScript:

<asp:scriptmanager ID="scriptmanager1" runat="server" />
<div>
  <asp:AsyncFileUpload 
    ID="AsyncFileUpload1"
    runat="server" 
    Width="400px" 
    UploadingBackColor="#345678" 
    CompleteBackColor="#FFFFFF"
    OnClientUploadError="UploadError"
    OnClientUploadComplete="UploadCompleted"
    UploaderStyle="Modern"
    ThrobberID="imgWait" 
    OnUploadedFileError="AsyncFileUpload1_UploadedFileError" 
    OnUploadedComplete="AsyncFileUpload1_UploadedComplete" />
</div>
<div>
   <asp:Image ID="imgWait" runat="server" ImageUrl="/images/process.gif" />
</div>

<div style="color:Green">
   <asp:Label ID="lblMessage" runat="server" Text="" EnableViewState="false" />
</div>
<script type="text/javascript">
    var msg = document.getElementById('<%=lblMessage.ClientID %>');
    alert(msg);
    function UploadCompleted() {
      msg.innerHTML = "Successfully uploaded!!!";
    }    

    function UploadError() {
      msg.innerHTML = "Failed to upload your file!";
    }
</script>

And Here is the code behind:

protected void AsyncFileUpload1_UploadedFileError(object sender, 
                       AsyncFileUploadEventArgs e)
{
    lblMessage.Text = "Could not upload file!";
}

protected void AsyncFileUpload1_UploadedComplete(object sender, 
                       AsyncFileUploadEventArgs e)
{
  string contentType = AsyncFileUpload1.ContentType;
  if (contentType == "image/jpeg" || contentType == "image/gif" 
              || contentType == "image/png")
  {
    string filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
    AsyncFileUpload1.SaveAs(Server.MapPath("UploadedFiles/") + filename);
  }
  else
  {
    lblMessage.Text = "We support only images of type jpg, gif and png";
  }
}

Other blogs you may like

No action was found on the controller that matches the request

How to post the data from json, in Angularjs $http.post we get this error. why we get this error only when we try to post the json object rather than query string. When we pass the parameter in query string same action method works as it should be. It's a very simple article so we are going to... By Ali Adravi   On 12 Jul 2015  Viewed: 17,430

Using Ajax for Update a View and then Update Data

this blog has been... By Amin Rahdar   On 26 May 2015  Viewed: 331

Ajax Roundedcornersextender padding and margin problem

Ajax Rounded corners extender is used to give corner to any elements like panel and div etc. Most of the time you will need to give the padding to give some space between the border and content, same is used for margin to give some vertical and horizontal space between different controls, but if... By Alicia Gonzalez   On 15 Jun 2013  Viewed: 840

Ajax fill country state and city without postback in asp.net

Country will be filled on page load and once user will select any country we will fill states from that country and again when user will change state we will fill city for that state without postback ( asynchronously) with the help of update panel in asp.net. Create three methods to fetch... By Hamden   On 04 May 2013  Viewed: 6,137

Ajax Modalpopupextender show hide from code behind and by javascript

In this article we will discuss different way of show and hide (open and close) modal popup by using Ajax ModalPopupExtender, how to open/close a modal popup from code behind in asp.net or by using JavaScript, how to use multiple buttons to hide the modal popup in asp.net etc. Suppose we have a... By Jonathan King   On 08 Apr 2013  Viewed: 28,543