Ej1 api migration in EJ2 JavaScript 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

var uploader =new ej.inputs.Uploader({
locale: 'es-ES'
})
uploader.appendTo('#ej2_Uploader')
Right to left Property: enableRTL

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

var uploader =new ej.inputs.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

var uploader =new ej.inputs.Uploader({
showFileList: false
})
uploader.appendTo('#ej2_Uploader')
Customizing the file list Not Applicable Property: template

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

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

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

var uploader =new ej.inputs.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

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

var uploader =new ej.inputs.Uploader({
minFileSize: 1024
})
uploader.appendTo('ej2_uploadbox')
Set maximum file size to upload Property: fileSize

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

var uploader =new ej.inputs.Uploader({
maxFileSize: 5000
})
uploader.appendTo('ej2_uploadbox')
Allowed file types to select Property: extensionsAllow

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

var uploader =new ej.inputs.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

var preloadFiles = [{ name: 'nature', size: 5000, type: '.png' }]
var uploader =new ej.inputs.Uploader({
files: preloadFiles
})
upload.appendTo('#ej2_uploadBox')
Event triggers when select the file successfully Event: fileSelect

$('#uploadBox').ejUploadbox({
fileSelect: function() {}
}) 		Event: selected

var uploader =new ej.inputs.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

var uploader =new ej.inputs.Uploader({
asyncSettings: { saveUrl: 'saveUrl' }
})
upload.appendTo('#ej2_uploadBox')
Remove URL Property: removeUrl

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

var uploader =new ej.inputs.Uploader({
asyncSettings: { removeUrl: 'removeUrl' }
})
Automatically upload the file when files added in to upload queue Property: autoUpload

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

var uploader =new ej.inputs.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

var uploader =new ej.inputs.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()

var uploader =new ej.inputs.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

var uploader =new ej.inputs.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

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

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

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

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

var uploader =new ej.inputs.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

var uploader =new ej.inputs.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

var uploader =new ej.inputs.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

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

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

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

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

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

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

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

var uploader =new ej.inputs.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

var uploader =new ej.inputs.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

var uploader =new ej.inputs.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

var uploader =new ej.inputs.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

var uploader =new ej.inputs.Uploader({
asyncSettings: { saveUrl: 'save url' },
Success: onRemoveSuccess
})
upload.appendTo('#ej2_uploadBox')
function onRemoveSuccess () {}
Event triggers when the file removing fails Not Applicable Event: failure
var uploader =new ej.inputs.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

var uploader =new ej.inputs.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

var uploader =new ej.inputs.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

var uploader =new ej.inputs.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

var uploader =new ej.inputs.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

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

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

var uploader =new ej.inputs.Uploader()
uploader.appendTo('#uploadbox')
uploader.bytesToSize(5000)