AjaxFileUpload

Demo Page

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

Properties

Name	Description
AllowedFileTypes	A comma-separated list of allowed file extensions. The default is an empty string.
AutoStartUpload	Whether or not automatically start upload files after drag/drop or select in file dialog. The default is false
ChunkSize	The size of a chunk used by HTML5 to upload large files in bytes. The default is 4096.
ClearFileListAfterUpload	Whether or not to hide file upload list container after the uploading finished
IsInFileUploadPostBack	This will be true when a postback will be performed from the control. This can be used to avoid execution of unnecessary code during a partial postback. The default is false. Remarks: Deprecated. Always false.
MaxFileSize	The maximum size of a file to be uploaded in Kbytes. A non-positive value means the size is unlimited. The default is 0.
MaximumNumberOfFiles	A maximum number of files in an upload queue. The default is 10.
Mode	Specifies how AjaxFileUpload uploads files. If set to Auto or Client and the client browser supports HTML 5, AjaxFileUpload uploads files using AJAX requests. If set to Server or the browser does not support HTML 5, AjaxFileUpload uploads files by posting the HTML form. The default is Auto.
OnClientUploadComplete	The name of a JavaScript function executed on the client side after a file is uploaded successfully.
OnClientUploadCompleteAll	The client script that executes when all of files in queue uploaded, or when user hits Cancel button to stop uploading
OnClientUploadError	The name of a JavaScript function executed on the client side if the file upload failed.
OnClientUploadStart	The name of a JavaScript function executed on the client side before any files are uploaded.
ServerPollingSupport	Whether or not AjaxFileUpload supports server polling.
ThrobberID	The ID of a control that is shown on the file upload. The throbber image is displayed for browsers that do not support the HTML5 File API or server-side polling.
UploadHandlerPath	Upload handler path
UseAbsoluteHandlerPath	Whether or not to use absolute path for AjaxFileUploadHandler Remarks: Deprecated. Use UploadHandlerPath instead.

Methods

Name	Description
SaveAs(fileName)	Saves the uploaded file with the specified file name

Events

Name	Description
UploadComplete	An event raised when the file upload is complete.
UploadCompleteAll	An event handler that will be raised when the UploadComplete event is raised in all files in an upload queue, or when a user presses the Cancel button to stop uploading.
UploadStart	An event raised when the file upload starts.

Client properties

Name	Description
allowedFileTypes	A comma-separated list of allowed file extensions.
autoStartUpload	Whether or not automatically start upload files after drag/drop or select in file dialog. The default is false
chunkSize	The size of a chunk used by HTML5 to upload a large file in bytes.
clearQueueContainerAfterUpload	Whether or not to hide the file upload list container after uploading finished
enabled	Whether the control is enabled.
maxFileSize	The maximum size of a file to be uploaded in Kbytes. A non-positive value means the size is unlimited.
maximumNumberOfFiles	A maximum number of files in an upload queue. Default value is 10.
mode	Specifies how AjaxFileUpload uploads files. If set to Auto or Client and the client browser supports HTML 5, AjaxFileUpload uploads files using AJAX requests. If set to Server or the browser does not support HTML 5, AjaxFileUpload uploads files by posting the HTML form. The default is Auto.
postBackUrl	A url of the page where the control is located.
serverPollingSupport	Whether or not AjaxFileUpload supports server polling.
throbber	A control that is shown while a file is uploading. The throbber image is displayed for browsers that do not support the HTML5 File API or server-side polling.
uploadHandlerPath	The path to the upload handler.
useAbsoluteHandlerPath	Whether or not to use absolute path for AjaxFileUploadHandler

Client methods

Name	Description
addFileToQueue(item)	The processor will call this method to add a selected file to the queue. It will return true if a file item is successfully added, otherwise, it returnes false.
attachEvents(elements)	Attaches the click event hanlder to an upload button.
cancelUpload()	Cancels upload process.
confirmFileIsInvalid(fileItem)	Sends alert to a user that the file type is not acceptable. The processor uses this method after validation.
confirmFileIsTooLarge(fileItem)	Sends alert to a user that the file size is too large. The processor uses this method after validation.
done()	Call this method when all files has been uploaded. This method will reset states of the control.
doneAndUploadNextFile(fileItem)	Marks fileItem as uploaded, and uploads the next file in a queue.
enableControls(enable)	If set to true, it will set the control state to enabled (ready to upload), otherwise the control will be disabled and the button state turns to the Cancel button.
fileSizeExceeded(fileSize)	Checks if the file size is larger than the upload size limit.
fileTypeIsValid(fileType)	Checks whether the file type is allowed to be uploaded by checking it against the AlowedFileTypes property.
getCurrentFileItem()	Gets a file item based on the current file id.
getFileItem(id)	Get file in upload queue by ID
getNextFile()	Gets a file in an upload queue by id.
removeFileFromQueueHandler(e)	Removes a file from the queue and updates user interface.
setAsUploading(fileItem)	Sets the file item status to uploading.
setDefaultElementsLayout(elements)	Sets default elements layout during initializing.
setFileStatus(fileItem, fileStatusText, text)	Sets file item status text.
setPercent(percent)	Sets upload percentage.
setStatusMessage(msg)	Sets a message in a status bar.
startUpload()	Manually starts upload process
validateFiles(files)	Validates files in queue before uploading. Returns true if validation is passed, otherwise false

Client events

Name	Description
uploadComplete	Occurs when the file upload completes.
uploadCompleteAll	An event handler that will be raised when the UploadComplete event is raised in all files in an upload queue, or when a user presses the Cancel button to stop uploading.
uploadError	An event handler raised when an upload error occurs.
uploadStart	Occurs when the file upload starts

Client properties

allowedFileTypes

A comma-separated list of allowed file extensions.

Getter name: get_allowedFileTypes()
Setter name: set_allowedFileTypes(value)

autoStartUpload

Whether or not automatically start upload files after drag/drop or select in file dialog. The default is false

Getter name: get_autoStartUpload()
Setter name: set_autoStartUpload(value)

chunkSize

The size of a chunk used by HTML5 to upload a large file in bytes.

Getter name: get_chunkSize()
Setter name: set_chunkSize(value)

clearQueueContainerAfterUpload

Whether or not to hide the file upload list container after uploading finished

Getter name: get_clearQueueContainerAfterUpload()
Setter name: set_clearQueueContainerAfterUpload(value)

enabled

Whether the control is enabled.

Getter name: get_enabled()
Setter name: set_enabled(value)

maxFileSize

The maximum size of a file to be uploaded in Kbytes. A non-positive value means the size is unlimited.

Getter name: get_maxFileSize()
Setter name: set_maxFileSize(value)

maximumNumberOfFiles

A maximum number of files in an upload queue. Default value is 10.

Getter name: get_maximumNumberOfFiles()
Setter name: set_maximumNumberOfFiles(value)

mode

Specifies how AjaxFileUpload uploads files. If set to Auto or Client and the client browser supports HTML 5, AjaxFileUpload uploads files using AJAX requests. If set to Server or the browser does not support HTML 5, AjaxFileUpload uploads files by posting the HTML form. The default is Auto.

Getter name: get_mode()
Setter name: set_mode(value)

postBackUrl

A url of the page where the control is located.

Getter name: get_postBackUrl()
Setter name: set_postBackUrl(value)

serverPollingSupport

Whether or not AjaxFileUpload supports server polling.

Getter name: get_serverPollingSupport()
Setter name: set_serverPollingSupport(value)

throbber

A control that is shown while a file is uploading. The throbber image is displayed for browsers that do not support the HTML5 File API or server-side polling.

Getter name: get_throbber()
Setter name: set_throbber(value)

uploadHandlerPath

The path to the upload handler.

Getter name: get_uploadHandlerPath()
Setter name: set_uploadHandlerPath(value)

useAbsoluteHandlerPath

Whether or not to use absolute path for AjaxFileUploadHandler

Getter name: get_useAbsoluteHandlerPath()
Setter name: set_useAbsoluteHandlerPath(value)

Methods

SaveAs(fileName)

Saves the uploaded file with the specified file name

Params:

• fileName
  • Type: String
  • Description: Name of the file to save

Client methods

addFileToQueue(item)

The processor will call this method to add a selected file to the queue. It will return true if a file item is successfully added, otherwise, it returnes false.

Params:

• item
  • Type: Object
  • Description: File to add to the queue

attachEvents(elements)

Attaches the click event hanlder to an upload button.

Params:

• elements
  • Type: Object
  • Description: Collection of AjaxFileUpload visual elements

cancelUpload()

Cancels upload process.

confirmFileIsInvalid(fileItem)

Sends alert to a user that the file type is not acceptable. The processor uses this method after validation.

Params:

• fileItem
  • Type: Object
  • Description: A file attempting to be added to the upload queue.

confirmFileIsTooLarge(fileItem)

Sends alert to a user that the file size is too large. The processor uses this method after validation.

Params:

• fileItem
  • Type: Object
  • Description: A file attempting to be added to the upload queue.

done()

Call this method when all files has been uploaded. This method will reset states of the control.

doneAndUploadNextFile(fileItem)

Marks fileItem as uploaded, and uploads the next file in a queue.

Params:

• fileItem
  • Type: Object
  • Description: Uploaded file

enableControls(enable)

If set to true, it will set the control state to enabled (ready to upload), otherwise the control will be disabled and the button state turns to the Cancel button.

Params:

• enable
  • Type: Boolean
  • Description: true to enable controls, otherwise false

fileSizeExceeded(fileSize)

Checks if the file size is larger than the upload size limit.

Params:

• fileSize
  • Type: Number
  • Description: File size in bytes

fileTypeIsValid(fileType)

Checks whether the file type is allowed to be uploaded by checking it against the AlowedFileTypes property.

Params:

• fileType
  • Type: String
  • Description: File extension

getCurrentFileItem()

Gets a file item based on the current file id.

getFileItem(id)

Get file in upload queue by ID

Params:

• id
  • Type: Number
  • Description: File ID

getNextFile()

Gets a file in an upload queue by id.

removeFileFromQueueHandler(e)

Removes a file from the queue and updates user interface.

Params:

• e
  • Type: Sys.Extended.UI.AjaxFileUpload.Item
  • Description: An item to remove

setAsUploading(fileItem)

Sets the file item status to uploading.

Params:

• fileItem
  • Type: Sys.Extended.UI.AjaxFileUpload.Item
  • Description: Uploading file

setDefaultElementsLayout(elements)

Sets default elements layout during initializing.

Params:

• elements
  • Type: Object
  • Description: Elements to set up

setFileStatus(fileItem, fileStatusText, text)

Sets file item status text.

Params:

• fileItem

  • Type: Sys.Extended.UI.AjaxFileUpload.Item
  • Description: Uploading file

• fileStatusText

  • Type: String
  • Description: Text displayed in file info container

• text

  • Type: String
  • Description: Text displayed in status bar

setPercent(percent)

Sets upload percentage.

Params:

• percent
  • Type: Number
  • Description: Upload percent

setStatusMessage(msg)

Sets a message in a status bar.

Params:

• msg
  • Type: String
  • Description: Text to set

startUpload()

Manually starts upload process

validateFiles(files)

Validates files in queue before uploading. Returns true if validation is passed, otherwise false

Params:

• files
  • Type: Object
  • Description: An array of files in the upload queue

Client events

uploadComplete

Occurs when the file upload completes.

Add event handler method: add_uploadComplete(handler)
Remove event handler method: remove_uploadComplete(handler)
Raise event method: raise_uploadComplete()

uploadCompleteAll

An event handler that will be raised when the UploadComplete event is raised in all files in an upload queue, or when a user presses the Cancel button to stop uploading.

Add event handler method: add_uploadCompleteAll(handler)
Remove event handler method: remove_uploadCompleteAll(handler)
Raise event method: raise_uploadCompleteAll()

uploadError

An event handler raised when an upload error occurs.

Add event handler method: add_uploadError(handler)
Remove event handler method: remove_uploadError(handler)
Raise event method: raise_uploadError()

uploadStart

Occurs when the file upload starts

Add event handler method: add_uploadStart(handler)
Remove event handler method: remove_uploadStart(handler)
Raise event method: raise_uploadStart()