Ej1 api migration in EJ2 TypeScript Uploader control

8 May 20236 minutes to read

This article describes the API migration process of File Upload component from Essential JS 1 to Essential JS 2.

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Localization property: locale

$('#uploadBox').ejUploadbox({
locale: 'es-ES'
}) 		property: locale

let uploader =new Uploader({
locale: 'es-ES'
})
uploader.appendTo('#ej2_Uploader')
Right to left property: enableRTL

$('#uploadBox'). ejUploadbox({
enableRTL: true
})
uploader.appendTo('#ej2_Uploader') 		property: enableRtl

let uploader =new Uploader({
enableRtl: true
})
uploader.appendTo('#ej2_Uploader')

File list

Behavior API in Essential JS 1 API in Essential JS 2
Show/Hide the selected files property: showFileDetails

$('#uploadBox').ejUploadbox({
showFileDetails: false
}) 		property: showFileList

let uploader =new Uploader({
showFileList: false
})
uploader.appendTo('#ej2_Uploader')
Customizing the file list Not Applicable property: template

let uploader =new Uploader({
template: '#templateId'
})
uploader.appendTo('#ej2_Uploader')
Get the files in sorted form Not Applicable Method:sortFileList

let uploader =new Uploader()
uploader.appendTo('#ej2_Uploader')
uploader.sortFileList(files)
Clearing File List Not Applicable Method:clearAll

let uploader =new Uploader()
uploader.appendTo('#ej2_Uploader')
uploader.clearAll()
Event triggers when clearing Files Not Applicable Event :clearing

let uploader =new Uploader({
clearing: function() {}
})
uploader.appendTo('#ej2_Uploader')

File selection

Behavior API in Essential JS 1 API in Essential JS 2
Select multiple files to upload property: multipleFilesSelection

$('#uploadBox').ejUploadbox({
multipleFilesSelection: true
}) 		property: multiple

let uploader =new Uploader({
multiple: true
})
uploader.appendTo('ej2_uploadbox')
Set minimum file size to upload Not Applicable property: minFileSize

let uploader =new Uploader({
minFileSize: 1024
})
uploader.appendTo('ej2_uploadbox')
Set maximum file size to upload property: fileSize

$('#uploadBox').ejUploadbox({
fileSize: 5000
}) 		property: maxFileSize

let uploader =new Uploader({
maxFileSize: 5000
})
uploader.appendTo('ej2_uploadbox')
Allowed file types to select property: extensionsAllow

$('#uploadBox').ejUploadbox({
extensionsAllow: '.zip'
}) 		property:allowedExtensions

let uploader =new Uploader({
allowedExtensions: '.pdf'
})
uploader.appendTo('ej2_uploadbox')
Restricted files types to select property:extensionsDeny

$('#uploadBox').ejUploadbox({
extensionsDeny: '.docx'
}) 		Not Applicable
Display only selected details in File list property: customFileDetails

$('#uploadBox').ejUploadbox({
customFileDetails: { title: false, name: true, size: true, status: true, action: false }
}) 		Not Applicable
Options to customize File list dialog property:dialogAction

$('#uploadBox').ejUploadbox({
dialogAction: { modal: false, closeOnComplete: true, resize: true, drag: false, content: '#dialogTarget' }
}) 		Not Applicable
Customize dialog position property:dialogPosition

$('#uploadBox').ejUploadbox({
dialogPosition: {X: 300, Y 100}
}) 		Not Applicable
Change file list key values property:dialogText

$('#uploadBox').ejUploadbox({
dialogText: { title: 'Upload File List', name: 'File Name', size: 'File Size' }
}) 		Not Applicable
Change drop area text property:dropAreaText

$('#uploadBox').ejUploadbox({
dropAreaText: 'Drop files here'
}) 		No separate property to change dropAreaText. It can be customize using locale Texts
Change drop area height property:dropAreaHeight

$('#uploadBox').ejUploadbox({
dropAreaHeight: '100%'
}) 		Not Applicable
Change drop area width property:dropAreaWidth

$('#uploadBox').ejUploadbox({
dropAreaWidth: '100%'
}) 		Not Applicable
Dynamically push the file property:pushFile

$('#uploadBox').ejUploadbox({
pushFile: files
}) 		Not Applicable
Show the files uploader in server already. Not Applicable property:files
let preloadFiles = [{ name: 'nature', size: 5000, type: '.png' }]
let upload =new Uploader({
files: preloadFiles
})
upload.appendTo('#ej2_uploadBox')
Event triggers when select the file successfully Event:fileSelect

$('#uploadBox').ejUploadbox({
fileSelect: function() {}
}) 		Event:selected
let upload =new Uploader({
selected: onFileSelect
})
upload.appendTo('#ej2_uploadBox') function onFileSelect() {}

Upload action

Behavior API in Essential JS 1 API in Essential JS 2
Save URL property: saveUrl

$('#uploadBox').ejUploadbox({
saveUrl: 'saveUrl'
}) 		property: asyncSettings.saveUrl

let upload =new Uploader({
asyncSettings: { saveUrl: 'saveUrl' }
})
upload.appendTo('#ej2_uploadBox')
Remove URL property: removeUrl

$('#uploadBox').ejUploadbox({
removeUrl: 'removeUrl'
}) 		property: asyncSettings.removeUrl

let upload =new Uploader({
asyncSettings: { removeUrl: 'removeUrl' }
})
Automatically upload the file when files added in to upload queue property: autoUpload

$('#uploadBox').ejUploadbox({
autoUpload: false
}) 		property: autoUpload

let upload =new Uploader({
autoUpload: false
})
Synchronous upload property:asynUpload

$('#uploadBox').ejUploadbox({
ayncUpload: false
}) 		No Separate property for enabling synchronous upload. It can be enabling by using below configuration

let upload =new Uploader({
autoUpload: false
})
Key to get the selected files in server side property: uploadName

$('#uploadBox').ejUploadbox({
saveUrl: 'saveUrl', uploadName: 'UploadKey'
}) 		Id of the element used as key value
Upload the files dynamically Not Applicable Method: upload()

let uploader =new Uploader({
asyncSettings: { saveUrl: '' }
})
uploader.appendTo('#ej2_Uploader') uploader.upload(filesData)
Event triggers before start to upload the action Event: beforeSend

$('#uploader').ejUploadbox({
beforeSend: function () {}
}) 		Event: uploading

let uploader =new Uploader({
uploading: beforeUploadStart
})
uploader.appendTo('#ej2_Uploader') function beforeUploadStart() {}
Event triggers when the upload is in progress Event: inProgress

$('#uploader').ejUploadbox({
inProgress: function () {}
}) 		Event: progress

let uploader =new Uploader({
progress: uploadingInProgress
})
uploader.appendTo('#ej2_Uploader') function uploadingInProgress () {}
Event triggers when upload got success Event:success

$('#uploader').ejUploadbox({
success: function () {}
}) 		Event: success

let uploader =new Uploader({
success: uploadingSuccess
})
uploader.appendTo('#ej2_Uploader') function uploadingSuccess () {}
Event triggers when upload got failed Event:error

$('#uploader').ejUploadbox({
error: function () {}
}) 		Event: failure

let uploader =new Uploader({
failure: uploadingFails
})
uploader.appendTo('#ej2_Uploader') function uploadingFails () {}
Event triggers when the upload got started Event:begin

$('#uploader').ejUploadbox({
begin: function () {}
}) 		Not Applicable
Event triggers when cancel the upload Event:cancel

$('#uploader').ejUploadbox({
cancel : function () {}
}) 		Event: canceling

let uploader =new Uploader({
canceling: uploadingCancel
})
uploader.appendTo('#ej2_Uploader') function uploadingCancel () {}
Event triggers when the upload completed Event:complete

$('#uploader').ejUploadbox({
complete : function () {}
}) 		Not Applicable

Chunk upload

Behavior API in Essential JS 1 API in Essential JS 2
Enabling the chunk upload Not Applicable property: asyncSettings.chunkSize

let upload =new Uploader({
asyncSettings: { saveUrl: 'save url', chunkSize: 50000 }
})
upload.appendTo('#ej2_uploadBox')
Retry the upload automatically when it's get failed Not Applicable property: asyncSettings.retryCount, asyncSettings.retryAfterDelay

let upload =new Uploader({
asyncSettings: { saveUrl: 'save url', chunkSize: 50000, retryCount: 3, retryAfterDelay: 1000 }
})
upload.appendTo('#ej2_uploadBox')
Pause the uploading file Not Applicable Method: pause

let upload =new Uploader({
asyncSettings: { saveUrl: 'save url', chunkSize: 50000 }
})
upload.appendTo('#ej2_uploadBox')
upload.pause(filesData)
Event triggers when pausing the file Not Applicable Event:pausing

let upload =new Uploader({
asyncSettings: { saveUrl: 'save url', chunkSize: 50000 },
pausing: onFilePause
})
upload.appendTo('#ej2_uploadBox')
function onFilePause() {}
Resuming the paused file Not Applicable Method: resume

let upload =new Uploader({
asyncSettings: { saveUrl: 'save url', chunkSize: 50000, }
})
upload.appendTo('#ej2_uploadBox')
upload.resume(filesData)
Event triggers when resuming the file Not Applicable Event: resuming

let upload =new Uploader({
asyncSettings: { saveUrl: 'save url', chunkSize: 50000, },
resuming: onFileResume
})
upload.appendTo('#ej2_uploadBox')
function onFileResume () {}
Retry the failed file Not Applicable Method: retry

let upload =new Uploader({
asyncSettings: { saveUrl: 'save url', chunkSize: 50000, }
})
upload.appendTo('#ej2_uploadBox')
upload.retry(filesData)
Cancel the failed file Not Applicable Method: cancel

let upload =new Uploader({
asyncSettings: { saveUrl: 'save url', chunkSize: 50000, }
})
upload.appendTo('#ej2_uploadBox')
upload.cancel(filesData)
Event triggers when cancel the file Not Applicable Event: canceling

let upload =new Uploader({
asyncSettings: { saveUrl: 'save url', chunkSize: 50000 }, canceling: onFileCancel
})
upload.appendTo('#ej2_uploadBox')
function onFileCancel(){}
Event triggers when chunk file fails Not Applicable Event:chunkFailure

let upload =new Uploader({
asyncSettings: { saveUrl: 'save url', chunkSize: 50000 }, chunkFailure: onChunkFail
})
upload.appendTo('#ej2_uploadBox')
function onChunkFail() {}
Event triggers when chunk file success Not Applicable Event: chunkSuccess

let upload =new Uploader({
asyncSettings: { saveUrl: 'save url', chunkSize: 50000 }, chunkSuccess: onChunkSuccess
})
upload.appendTo('#ej2_uploadBox')
function onChunkSuccess () {}

Remove action

Behavior API in Essential JS 1 API in Essential JS 2
Remove the uploaded file Not Applicable Method: remove

let upload =new Uploader({
asyncSettings: { saveUrl: 'save url', removeUrl:'removeUrl' }
})
upload.appendTo('#ej2_uploadBox')
upload.remove(filesData)
Event triggers when the file removing succeed Event:remove

$('#uploadBox').ejUploadbox({
remove: function() {}
}) 		Event:success

let upload =new Uploader({
asyncSettings: { saveUrl: 'save url' },
Success: onRemoveSuccess
})
upload.appendTo('#ej2_uploadBox')
function onRemoveSuccess () {}
Event triggers when the file removing fails Not Applicable Event: failure
let upload =new Uploader({
asyncSettings: { saveUrl: 'save url', removeUrl: 'remove url' },
failure: onRemoveFailure
})
upload.appendTo('#ej2_uploadBox')
function onRemoveFailure () {}

Buttons

Behavior API in Essential JS 1 API in Essential JS 2
Customize button text property: buttonText

$('#uploadBox').ejUploadbox({
remove: function() {}
}) 		property: buttons

let upload =new Uploader({
buttons: { browse: 'Choose File', clear: 'Clear files', upload: 'upload Files' }
})

Drag and drop

Behavior API in Essential JS 1 API in Essential JS 2
Enable drag and drop upload property: allowDragAndDrop

$('#uploadBox').ejUploadbox({
allowDragAndDrop: true
}) 		No separate property to disabling drag and drop
Set custom drop area Not Applicable property: dropArea

let upload =new Uploader({
dropArea: dropElement
})

Common

Behavior API in Essential JS 1 API in Essential JS 2
Adding custom class to wrapper element property: cssClass

$('#uploadBox').ejUploadbox({
cssClass: 'Custom-Class'
}) 		Not Applicable
Enable/Disable the control property: enabled

$('#uploadBox').ejUploadbox({
enabled: false
})
Method: enable(), disable() 		property:enabled

let upload =new Uploader({
enabled: false
})
Set height for uploader property:height

$('#uploadBox').ejUploadbox({
height: '100%'
}) 		Not Applicable
Set width for uploader property:width

$('#uploadBox').ejUploadbox({
width: '100%'
}) 		Not Applicable
Adding HTML attributes property:htmlAttributes

$('#uploadBox').ejUploadbox({
htmlAttributes: {'aria-label': 'UploadBox'}
}) 		Not Applicable
Event triggers when control created successfully Event:create

$('#uploadBox').ejUploadbox({
create: function () {}
}) 		Event:created

let uploader =new Uploader({
created: function() {}
})
Event triggers when destroy the control Event:destroy

$('#uploadBox').ejUploadbox({
destroy: function () {}
}) 		Not Applicable
Keeping the model values in cookies property:enablePersistence

$('#uploadBox').ejUploadbox({
enablePersistence: true
}) 		property:enablePersistence

let uploader =new Uploader({
enablePersistence: true
})
Get the selected files data Not Applicable Method:getFilesData

let uploader =new Uploader()
uploader.appendTo('#uploadbox')
uploader.getFilesData()
Convert bytes in to MB, GB Not Applicable Method:bytesToSize

let uploader =new Uploader()
uploader.appendTo('#uploadbox')
uploader.bytesToSize(5000)