UploaderModel

23 Sep 20258 minutes to read

Interface for a class Uploader

Properties

actionComplete EmitType<ActionCompleteEventArgs>

Triggers after all the selected files has processed to upload successfully or failed to server.

beforeRemove EmitType<BeforeRemoveEventArgs>

Triggers on remove the uploaded file. The event used to get confirm before remove the file from server.

beforeUpload EmitType<BeforeUploadEventArgs>

Triggers when the upload process before. This event is used to add additional parameter with upload request.

canceling EmitType<CancelEventArgs>

Fires if cancel the chunk file uploading.

change EmitType<Object>

Triggers when changes occur in uploaded file list by selecting or dropping files.

Event arguments	Description
file	File information which is successfully uploaded to server or removed in server.
name	Name of the event

chunkFailure EmitType<Object>

Fires if the chunk file failed to upload.

Event arguments	Description
chunkIndex	Returns current chunk index.
chunkSize	Returns the size of the chunk file.
file	File information which is uploading to server.
name	Name of the event
totalChunk	Returns the total chunk count
cancel	Prevent triggering of failure event when we pass true to this attribute

chunkSuccess EmitType<Object>

Fires when the chunk file uploaded successfully.

Event arguments	Description
chunkIndex	Returns current chunk index.
chunkSize	Returns the size of the chunk file.
file	File information which is uploading to server.
name	Name of the event

chunkUploading EmitType<UploadingEventArgs>

Fires when every chunk upload process gets started. This event is used to add additional parameter with upload request.

clearing EmitType<ClearingEventArgs>

Triggers before clearing the items in file list when clicking “clear”.

created EmitType<Object>

Triggers when the component is created.

failure EmitType<Object>

Triggers when the AJAX request fails on uploading or removing files.

Event arguments	Description
event	Ajax progress event arguments.
file	File information which is failed from upload/remove.
name	Name of the event
operation	It indicates the failure of the operation whether its upload or remove

fileListRendering EmitType<FileListRenderingEventArgs>

Triggers before rendering each file item from the file list in a page.
It helps to customize specific file item structure.

pausing EmitType<PauseResumeEventArgs>

Fires if pause the chunk file uploading.

progress EmitType<Object>

Triggers when uploading a file to the server using the AJAX request.

Event arguments	Description
event	Ajax progress event arguments.
file	File information which is uploading to server.
name	Name of the event

removing EmitType<RemovingEventArgs>

Triggers on removing the uploaded file. The event used to get confirm before removing the file from server.

rendering EmitType<RenderingEventArgs>

DEPRECATED-Triggers before rendering each file item from the file list in a page.
It helps to customize specific file item structure.

resuming EmitType<PauseResumeEventArgs>

Fires if resume the paused chunk file upload.

selected EmitType<SelectedEventArgs>

Triggers after selecting or dropping the files by adding the files in upload queue.

success EmitType<Object>

Triggers when the AJAX request gets success on uploading files or removing files.

Event arguments	Description
event	Ajax progress event arguments.
file	File information which is uploaded/removed.
name	Name of the event
operation	It indicates the success of the operation whether its uploaded or removed

uploading EmitType<UploadingEventArgs>

Triggers when the upload process gets started. This event is used to add additional parameter with upload request.

allowedExtensions string

Specifies the extensions of the file types allowed in the uploader component and pass the extensions
with comma separators. For example,
if you want to upload specific image files, pass allowedExtensions as “.jpg,.png”.

asyncSettings AsyncSettingsModel

Configures the save and remove URL to perform the upload operations in the server asynchronously.

autoUpload boolean

By default, the uploader component initiates automatic upload when the files are added in upload queue.
If you want to manipulate the files before uploading to server, disable the autoUpload property.
The buttons “upload” and “clear” will be hided from file list when autoUpload property is true.

buttons ButtonsPropsModel

You can customize the default text of “browse, clear, and upload” buttons with plain text or HTML elements.
The buttons’ text can be customized from localization also. If you configured both locale and buttons property,
the uploader component considers the buttons property value.

<input type="file" id="fileupload" name="UploadFiles">

import { Uploader } from '@syncfusion/ej2-inputs';

let uploadObj: Uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
    removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
  },
  buttons: { browse: "Choose File", clear: "Clear All", upload: "Upload All" },
  autoUpload: false
});
uploadObj.appendTo('#fileupload');

cssClass string

Specifies the CSS class name that can be appended with root element of the uploader.
One or more custom CSS classes can be added to a uploader.

directoryUpload boolean

Specifies a Boolean value that indicates whether the folder of files can be browsed in the uploader component.

When enabled this property, it allows only files of folder to select or drop to upload and
it cannot be allowed to select or drop files.

dropArea string|HTMLElement

Specifies the drop target to handle the drag-and-drop upload.
By default, the component creates wrapper around file input that will act as drop target.

For more information, refer to the drag-and-drop section from the documentation.

dropEffect DropEffect

Specifies the drag operation effect to the uploader component. Possible values are Copy , Move, Link and None.
By default, the uploader component works based on the browser drag operation effect.

enableHtmlSanitizer boolean

Specifies Boolean value that indicates whether to prevent the cross site scripting code in filename or not.
The uploader component removes the cross-site scripting code or functions from the filename and shows the validation error message to the user when enableHtmlSanitizer is true.

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

enableRtl boolean

Enable or disable rendering component in right to left direction.

enabled boolean

Specifies Boolean value that indicates whether the component is enabled or disabled.
The uploader component does not allow to interact when this property is disabled.

files FilesPropModel[]

Specifies the list of files that will be preloaded on rendering of uploader component.
The property used to view and remove the uploaded files from server. By default, the files are configured with
uploaded successfully state. The following properties are mandatory to configure the preload files:

Name
Size
Type

<input type="file" id="fileupload" name="UploadFiles">

import { Uploader } from '@syncfusion/ej2-inputs';

let preLoadFiles = [
    {name: 'Nature', size: 500000, type: '.png'},
    {name: 'TypeScript Succinctly', size: 12000, type: '.pdf'},
    {name: 'ASP.NET Webhooks', size: 500000, type: '.docx'},
];

let uploadObj: Uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
    removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
  },
  files: preLoadFiles,
  autoUpload: false
});
uploadObj.appendTo('#fileupload');

htmlAttributes { : }

You can add the additional html attributes such as disabled, value etc., to the element.
If you configured both property and equivalent html attribute then the component considers the property value.

<input type="file" id="fileupload" name="UploadFiles">

import { Uploader } from '@syncfusion/ej2-inputs';

let uploadObj: Uploader = new Uploader({
  asyncSettings: {
    saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
    removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
  },
  htmlAttributes: { name: "browse", multiple: "false" }
});
uploadObj.appendTo('#fileupload');

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

maxFileSize number

Specifies the maximum allowed file size to be uploaded in bytes.
The property used to make sure that you cannot upload too large files.

minFileSize number

Specifies the minimum file size to be uploaded in bytes.
The property used to make sure that you cannot upload empty files and small files.

multiple boolean

Specifies a Boolean value that indicates whether the multiple files can be browsed or
dropped simultaneously in the uploader component.

sequentialUpload boolean

By default, the file uploader component is processing the multiple files simultaneously.
If sequentialUpload property is enabled, the file upload component performs the upload one after the other.

showFileList boolean

Specifies a Boolean value that indicates whether the default file list can be rendered.
The property used to prevent default file list and design own template for file list.

template string|Function

Specifies the HTML string that used to customize the content of each file in the list.

For more information, refer to the template section from the documentation.