AjaxFileUpload Demonstration

AjaxFileUpload Description

 

AjaxFileUpload is an ASP.NET Ajax control which enables you to upload multiple files to the server asynchronously. When the control is used with a browser which supports the latest features of HTML5 -- such as Microsoft Internet Explorer 10, Mozilla Firefox 9, or Google Chrome 17 -- then the AjaxFileUpload supports displaying file upload progress. The control displays a progress bar as the file is being uploaded.

If a browser does not support the HTML5 File API (for example, Internet Explorer 9) then upload progress is not displayed and a throbber image is displayed instead. In other words, a busy wait image is displayed instead of actual progress.

The AjaxFileUpload control also supports a drag-and-drop interface. You can add multiple files to the AjaxFileUpload upload queue by dragging the files onto the AjaxFileUpload control on a page. Alternatively, you can select multiple files to upload by using the SHIFT key or CTRL key when selecting files with the file upload dialog. These features are not supported by older browsers.

By taking advantage of the AllowedFileTypes property, you can restrict the types of files which can be uploaded with the AjaxFileUpload control. For example, you can prevent any file except image files (files with the extensions jpeg, png, or gif) from being uploaded. By taking advantage of the MaximumNumberOfFiles property, you can limit the number of files which can be uploaded with the control. For example, you can prevent a user from uploading more than 5 files.

When a file is uploaded, the control's UploadComplete event is raised. By creating an UploadComplete event handler, you can store the uploaded file anywhere that you please including the file system, a database, or session state. Before you can save the file to the file system, your ASP.NET application must have the necessary Write permissions.

AjaxFileUpload Events, Properties and Methods

The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1"
    ThrobberID="myThrobber"
    ContextKeys="fred"
    AllowedFileTypes="jpg,jpeg"
    MaximumNumberOfFiles=10
    runat="server"/>                    
    

Events

• UploadedComplete - Raised on the server when a file is uploaded successfully. In this event an instance of AjaxFileUploadEventArgs is passed in the argument that contains file name, size and content type.

Properties

• ThrobberID - The ID of a control that is shown while the file is uploading. The throbber image is displayed for browsers that do not support the HTML5 File API.
• ContextKeys - A dictionary that can be used to pass information to the server when a file is uploaded.
• MaximumNumberOfFiles - This property enables you to limit the number of files that a user can add to the upload queue.
• AllowedFileTypes - This property enables you to restrict the types of files that can be uploaded. You can assign a comma delimited list of file extensions to this property.
• IsInFileUploadPostBack - This property has the value true when a page is created in response to an AjaxFileUpload asynchronous postback.
• OnClientUploadComplete - The name of a JavaScript function executed in the client-side after a file is uploaded successfully.
• OnClientUploadError - The name of a JavaScript function executed in the client-side if the file upload failed.

Methods

• SaveAs(string filename) - Saves the contents of an uploaded file to the file system. Your application must have the required Write permissions.