Search results

UploaderComponent

Represents the Essential JS 2 VueJS Uploader Component

<ejs-uploader id='fileUpload' v-bind:multiple='true'></ejs-uploader>

Properties

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”.

Defaults to

asyncSettings

AsyncSettingsModel

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

Defaults to { saveUrl: ”, removeUrl: ” }

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.

Defaults to 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.

Defaults to { browse : ‘Browse…’, clear: ‘Clear’, upload: ‘Upload’ }

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.

Defaults to false

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.

Defaults to null

enablePersistence

boolean

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

Defaults to false

enableRtl

boolean

When this property is enabled, the uploader component elements are aligned from right-to-left direction to support locales.

Defaults to false

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.

Defaults to true

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 {% codeBlock src=“uploader/files-api/index.ts” %}{% endcodeBlock %}

{% codeBlock src=“uploader/files-api/index.html” %}{% endcodeBlock %}

Defaults to { name: ”, size: null, type: ” }

locale

string

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

Defaults to undefined

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.

Defaults to 30000000

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.

Defaults to 0

multiple

boolean

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

Defaults to true

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.

Defaults to false

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.

Defaults to true

template

string

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

Methods

bytesToSize

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

cancel

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 FileInfo[] specifies the files data to cancel the progressing file.

Returns void

clearAll

Clear all the file entries from list that can be uploaded files or added in upload queue.

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.

Returns void

getFilesData

Get the data of files which are shown in file list.

Returns FileInfo[]

getModuleName

Return the module name of the component.

Returns string

pause

Pauses the in-progress chunked upload based on the file data.

Parameter Type Description
fileData FileInfo | FileInfo[] specifies the files data to pause from uploading.
custom (optional) boolean Set true if used custom UI.

Returns void

remove

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

resume

Resumes the chunked upload that is previously paused based on the file data.

Parameter Type Description
fileData FileInfo | FileInfo[] specifies the files data to resume the paused file.
custom (optional) boolean Set true if used custom UI.

Returns void

retry

Retries the canceled or failed file upload based on the file data.

Returns void

sortFileList

Allows you to sort the file data alphabetically based on its file name clearly.

Parameter Type Description
filesData FileList specifies the files data for upload.

Returns File[]

upload

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.

Returns void

Events

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

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.

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.