The uploader component allows to upload images, documents, and other files from local to server.
<input type='file' name='images[]' id='upload'/>
<script>
var uploadObj = new Uploader();
uploadObj.appendTo('#upload');
</script>
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”.
Defaults to ”
Configures the save and remove URL to perform the upload operations in the server asynchronously.
Defaults to { saveUrl: ”, removeUrl: ” }
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.
Defaults to true
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');
Defaults to { browse : ‘Browse…’, clear: ‘Clear’, upload: ‘Upload’ }
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.
Defaults to ”
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.
Defaults to false
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.
Defaults to null
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.
Defaults to ‘Default’
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.
Defaults to true
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
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.
Defaults to true
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:
<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');
Defaults to { name: ”, size: null, type: ” }
{ : }
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');
Defaults to {}
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
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.
Defaults to 30000000
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.
Defaults to 0
boolean
Specifies a Boolean value that indicates whether the multiple files can be browsed or dropped simultaneously in the uploader component.
Defaults to true
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.
Defaults to false
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.
Defaults to true
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.
Defaults to null
Adds the handler to the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event |
handler | Function |
Specifies the call to run when the event occurs. |
Returns void
Appends the control within the given HTML element
Parameter | Type | Description |
---|---|---|
selector (optional) | string | HTMLElement |
Target element where control needs to be appended |
Returns void
Adding unload event to persist data when enable persistence true
Returns void
It is used to convert bytes value into kilobytes or megabytes depending on the size based on binary prefix.
Parameter | Type | Description |
---|---|---|
bytes | number |
Specifies the file size in bytes. |
Returns string
Stops the in-progress chunked upload based on the file data. When the file upload is canceled, the partially uploaded file is removed from server.
Parameter | Type | Description |
---|---|---|
fileData (optional) | FileInfo[] |
specifies the files data to cancel the progressing file. |
Returns void
Clear all the file entries from list that can be uploaded files or added in upload queue.
Returns void
Create the file list for specified files data.
Parameter | Type | Description |
---|---|---|
fileData | FileInfo[] |
Specifies the files data for file list creation. |
Returns void
When invoked, applies the pending property changes immediately to the component.
Returns void
Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
Returns void
Removing unload event to persist data when enable persistence true
Returns void
Get the data of files which are shown in file list.
Parameter | Type | Description |
---|---|---|
index (optional) | number |
specifies the file list item(li) index. |
Returns FileInfo[]
Returns the persistence data for component
Returns any
Return the module name of the component.
Returns string
Returns the route element of the component
Returns HTMLElement
Handling unload event to persist data when enable persistence true
Returns void
Pauses the in-progress chunked upload based on the file data.
Parameter | Type | Description |
---|---|---|
fileData (optional) | FileInfo | FileInfo[] |
specifies the files data to pause from uploading. |
custom (optional) | boolean |
Set true if used custom UI. |
Returns void
Applies all the pending property changes and render the component again.
Returns void
Remove the uploaded file from server manually by calling the remove URL action. If you pass an empty argument to this method, the complete file list can be cleared, otherwise remove the specific file based on its argument (“file_data”).
Returns void
Removes the handler from the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event to remove |
handler | Function |
Specifies the function to remove |
Returns void
Resumes the chunked upload that is previously paused based on the file data.
Parameter | Type | Description |
---|---|---|
fileData (optional) | FileInfo | FileInfo[] |
specifies the files data to resume the paused file. |
custom (optional) | boolean |
Set true if used custom UI. |
Returns void
Retries the canceled or failed file upload based on the file data.
Parameter | Type | Description |
---|---|---|
fileData (optional) | FileInfo | FileInfo[] |
specifies the files data to retry the canceled or failed file. |
fromcanceledStage (optional) | boolean |
Set true to retry from canceled stage and set false to retry from initial stage. |
custom (optional) | boolean |
-Specifies whether the uploader is rendered with custom file list. |
Returns void
Allows you to sort the file data alphabetically based on its file name clearly.
Parameter | Type | Description |
---|---|---|
filesData (optional) | FileList |
specifies the files data for upload. |
Returns File[]
Allows you to call the upload process manually by calling save URL action. To process the selected files (added in upload queue), pass an empty argument otherwise upload the specific file based on its argument.
Parameter | Type | Description |
---|---|---|
files (optional) | FileInfo | FileInfo[] |
Specifies the files data for upload. |
custom (optional) | boolean |
Specifies whether the uploader is rendered with custom file list. |
Returns void
Dynamically injects the required modules to the component.
Parameter | Type | Description |
---|---|---|
moduleList | Function[] |
? |
Returns void
EmitType<ActionCompleteEventArgs>
Triggers after all the selected files has processed to upload successfully or failed to server.
EmitType<BeforeRemoveEventArgs>
Triggers on remove the uploaded file. The event used to get confirm before remove the file from server.
EmitType<BeforeUploadEventArgs>
Triggers when the upload process before. This event is used to add additional parameter with upload request.
Fires if cancel the chunk file uploading.
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 |
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 |
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 |
Fires when every chunk upload process gets started. This event is used to add additional parameter with upload request.
Triggers before clearing the items in file list when clicking “clear”.
EmitType<Object>
Triggers when the component is created.
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 |
EmitType<FileListRenderingEventArgs>
Triggers before rendering each file item from the file list in a page. It helps to customize specific file item structure.
EmitType<PauseResumeEventArgs>
Fires if pause the chunk file uploading.
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 |
Triggers on removing the uploaded file. The event used to get confirm before removing the file from server.
DEPRECATED-Triggers before rendering each file item from the file list in a page. It helps to customize specific file item structure.
EmitType<PauseResumeEventArgs>
Fires if resume the paused chunk file upload.
Triggers after selecting or dropping the files by adding the files in upload queue.
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 |
Triggers when the upload process gets started. This event is used to add additional parameter with upload request.