Uploading file asynchronously using Ajax AsyncFileUpload control
AsyncFileUpload is a control in Asp.Net Ajax control toolkit which supports asynchronous file uploads with drag and drop feature. Features of this control are supported in upgraded browsers like IE 10+, Firefox 8+, Safari 5+, and Google Chrome version 16+. Below are some of the features of this control:
AsyncFileUpload Control Features
1) One of the most important feature of this control is it compatibility with update panel. We all know that asp.net file upload control does not work with update panel. There is some workaround with .Net file upload control but I am sure you may be looking for a better way of uploading file asynchronously. This Ajax control works within the update panel without any post back.
2) It has both client side ad server side events which help you in defining custom JavaScript logic or code behind logic for various file upload operations.
3) Inbuilt color for different status with the flexibility of defining our own color. If file upload successful, green color is shown and if unsuccessful, red color is shown.
4) We can show custom image or custom text as progress bar while uploading files.
AsyncFileUpload Events and Methods
OnUploadComplete -Code-behind method that is invoked after file uploading is complete. This method is generally used to save the file to a particular location.
Point to note about this method is that the uploading starts immediately on selecting the file but the file is not uploaded to any physical location. Instead, it remains in session and is saved to a physical location only after the call to this method is complete
OnClientUploadComplete - This is the JavaScript function to be called for each uploaded file.
OnClientUploadError: This is a client side JavaScript event invoked if some error happened while uploading file.
OnClientUploadStarted: This is the client side function called before the control starts uploading the file onto the server. Note that the uploading starts only after the execution of this function.
SaveAs(): This methods saves the file to a particular location.
AsyncFileUpload Properties
ThrobberID - the ID of a control to be display while uploading is in process. It can either be an image or a simple text control but should necessarily have a runat attribute set to server.
CompleteBackColor - This will be the background color of the control on successful file upload.
UploadingBackColor - This will be the background color of the control till the upload is in progress.
ErrorBackColor: This property will define the background color to be set on unsuccessful upload. Default is "Red".
UploaderStyle: Two default styles of the control ‘Traditional’ and ‘modern’. Default is "Traditional".
HasFile: A Boolean value to indicate if the control has a file or not.
Demo
In this demo, I will use most of the above methods and properties. My control declaration is
<ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" runat="server" CompleteBackColor="yellow" UploadingBackColor="Green" BackColor="AliceBlue"
OnClientUploadError="uploadError" OnClientUploadStarted="StartUpload" OnClientUploadComplete="UploadComplete" UploaderStyle="Modern" OnUploadedComplete="ProcessUpload" ThrobberID="spanUploading" />
To demonstrate the use of various javascript events associated with this control, I have additionally added the following HTML controls.
<span id="spanUploading" runat="server"><img src="ajax-loader.gif" /></span>
<asp:Label ID="lblStatus" runat="server" Style="font-family: Arial;
font-size: small;"></asp:Label>
<img src="" id="imgUpload" alt="" />
In the above code, spanUploading will contain the progress image to be shown while uploading the file. It is not mandatory to display only an image as progress. You can replace the image with text or image +text as per your preferences.
lblStatus will show the details(extension and size) of the uploaded file.
imgUpload will show the uploaded image after the upload is complete.
Below are the javascript functions I have used for this purpose.
function uploadError(sender, args) {
document.getElementById('lblStatus').innerText = args.get_fileName(),
"<span style='color:red;'>" + args.get_errorMessage() + "</span>";
}
Above function will show the unsuccessful upload error message in lblStatus label