Ej1 api migration in Angular Uploader component
4 Apr 202316 minutes to read
This article describes the API migration process of File Upload component from Essential JS 1 to Essential JS 2.
Accessibility
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Localization |
Property : locale <ej-uploadbox id='uploadDefault' locale='es-ES'> </ej-uploadbox>
|
Property : locale <ejs-uploader locale='es-ES'></ejs-uploader>
|
| Right to left |
Property: enableRTL <ej-uploadbox id='uploadDefault' [enableRTL]= 'true'></ej-uploadbox>
|
Property: enableRTL <ejs-uploader [enableRtl]= 'true'> </ejs-uploader>
|
File List
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Show/Hide the selected files |
Property : showFileDetails <ej-uploadbox id='uploadDefault' [showFileDetails]= 'false'></ej-uploadbox>
|
Property : showFileList <ejs-uploader [showFileList]= 'false'></ejs-uploader>
|
| Customizing the file list | Not Applicable |
Property : template <ejs-uploader> <ng-template #template let-data=''> // your custom template here</ng-template></ejs-uploader>
|
| Get the files in sorted form | Not Applicable |
Method: SortFileList<ejs-uploader #defaultupload></ejs-uploader> TS: @ViewChild(‘defaultupload’) public uploadObj: UploaderComponent; uploadObj.sortFileList(files) |
| Clearing File List | Not Applicable |
Method: ClearAll <ejs-uploader #defaultupload></ejs-uploader> TS: @ViewChild(‘defaultupload’) public uploadObj: UploaderComponent; uploadObj.clearAll() |
| Event triggers when clearing Files | Not Applicable |
Event : clearing <ejs-uploader #defaultupload (clearing)='onClearing($event)'></ejs-uploader> TS: public onClearing: EmitType< ClearingEventArgs>= () => { }; |
File selection
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Select multiple files to upload |
Property : multipleFilesSelection <ej-uploadbox id='uploadDefault' [multipleFilesSelection]= 'true'></ej-uploadbox>
|
Property : multiple <ejs-uploader [multiple]='true'></ejs-uploader>
|
| Set minimum file size to upload | Not Applicable |
Property : minFileSize<ejs-uploader [minFileSize]=1024></ejs-uploader>
|
| Set maximum file size to upload |
Property : fileSize <ej-uploadbox id='uploadDefault' [fileSize]= 5000></ej-uploadbox>
|
Property : maxFileSize <ejs-uploader [maxFileSize]= 5000></ejs-uploader>
|
| Allowed file types to select |
Property : extensionsAllow <ej-uploadbox id='uploadDefault' [extensionsAllow]= '.zip'></ej-uploadbox>
|
Property: allowedExtensions <ejs-uploader [allowedExtensions]= '.pdf'></ejs-uploader>
|
| Restricted files types to select |
Property: extensionsDeny <ej-uploadbox id='uploadDefault' [extensionsDeny]= '.docx'></ej-uploadbox>
|
Not Applicable |
| Display only selected details in File list |
Property : customFileDetails<ej-uploadbox id='uploadDefault' [customFileDetails]= 'customDetails'></ej-uploadbox> TS: public customDetails: any { title: false, name: true, size: true, status: true, action: false} |
Not Applicable |
| Options to customize File list dialog |
Property: dialogAction <ej-uploadbox [dialogAction]= 'dialogAction'></ej-uploadbox> TS: public dialogAction: any { modal: false, closeOnComplete: true, resize: true, drag: false, content: ‘#dialogTarget’ } |
Not Applicable |
| Customize dialog position |
Property: dialogPosition<ej-uploadbox [dialogPosition]= 'position'></ej-uploadbox> TS: public position: object {X: 300, Y 100} |
Not Applicable |
| Change file list key values |
Property: dialogText<ej-uploadbox [dialogText]= 'dlgText'></ej-uploadbox>TS: public dlgText: { title: ‘Upload File List’, name: ‘File Name’, size: ‘File Size’ } |
Not Applicable |
| Change drop area text |
Property: dropAreaText<ej-uploadbox dropAreaText= 'Drop files here'></ej-uploadbox>
|
No separate Property to change dropAreaText. It can be customize using locale Texts |
| Change drop area height |
Property: dropAreaHeight<ej-uploadbox [dropAreaHeight]= '100%'></ej-uploadbox>
|
Not Applicable |
| Change drop area width |
Property: dropAreaWidth <ej-uploadbox [dropAreaWidth]= '100%'></ej-uploadbox>
|
Not Applicable |
| Dynamically push the file |
Property: pushFile<ej-uploadbox [pushFile]= 'files'></ej-uploadbox>
|
Not Applicable |
| Show the files uploader in server already. | Not Applicable |
Property: files <ejs-uploader [files]='preloadFiles'></ejs-uploader>TS: public preloadFiles: any = [{name: ‘nature’, size: 5000,type: ‘.png’}] |
| Event triggers when select the file successfully |
Event: fileSelect <ej-uploadbox (fileSelect)= 'onFileSelect($event)'></ej-uploadbox>TS: public onFileSelect: any= () => { }; |
Event: selected<ejs-uploader (selected)=' onFileSelect($event)'></ejs-uploader>TS: public onFileSelect: EmitType< SelectedEventArgs>= () => { }; |
Upload action
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Save URL |
Property : saveUrl <ej-uploadbox [saveUrl]='saveUrl'></ej-uploadbox>
|
Property : asyncSettings.saveUrl<ejs-uploader [asyncSettings]='path'></ejs-uploader>public path: Object = { saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save'};
|
| Remove URL |
Property : removeUrl<ej-uploadbox [removeUrl]=' removeUrl'></ej-uploadbox>
|
Property : asyncSettings.removeUrl<ejs-uploader [asyncSettings]='path'></ejs-uploader>public path: Object = { saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save'};
|
| Automatically upload the file when files added in to upload queue |
Property: autoUpload <ej-uploadbox [autoUpload]='false'></ej-uploadbox>
|
Property: autoUpload<ejs-uploader [autoUpload]='false'></ejs-uploader>
|
| Synchronous upload |
Property: asyncUpload<ej-uploadbox [asyncUpload]='false'></ej-uploadbox>
|
No Separate Property for enabling synchronous upload. It can be enabling by using below configuration <ejs-uploader [autoUpload]='false'></ejs-uploader>
|
| Key to get the selected files in server side |
Property: uploadName<ej-uploadbox [uploadName]='UploadKey'></ej-uploadbox>
|
Id of the element used as key value |
| Upload the files dynamically | Not Applicable | Method: upload()<ejs-uploader [autoUpload]='false' #upload></ejs-uploader>TS: @ViewChild(‘upload’) public uploadObj: UploaderComponent; uploadObj.upload(filesData); |
| Event triggers before start to upload the action |
Event: beforeSend<ej-uploadbox (beforeSend)= 'onBeforeSend ($event)'></ej-uploadbox>TS: public onBeforeSend: any= () => { }; |
Event : uploading<ejs-uploader (uploading)='beforeUploadStart ($event)'></ejs-uploader>TS: public beforeUploadStart: EmitType |
| Event triggers when the upload is in progress |
Event: inProgress<ej-uploadbox (inProgress)= 'uploadInprogress($event)'></ej-uploadbox>TS: public uploadInprogress: any= () => { }; |
Event : progress<ejs-uploader #defaultupload (progress)='uploadInprogress ($event)'></ejs-uploader>TS: public uploadInprogress: EmitType |
| Event triggers when upload got success |
Event: success<ej-uploadbox (success)= 'uploadSuccess($event)'></ej-uploadbox>TS: public uploadSuccess: any= () => { }; |
Event : success<ejs-uploader (success)='uploadSuccess($event)'></ejs-uploader>TS: public uploadSuccess: EmitType |
| Event triggers when upload got failed |
Event: error<ej-uploadbox (error)= 'onUploadError($event)'></ej-uploadbox>TS: public onUploadError: any= () => { }; |
Event : failure<ejs-uploader (failure)='uploadFailure($event)'></ejs-uploader>TS: public uploadFailure: EmitType |
| Event triggers when the upload got started |
Event: begin <ej-uploadbox (begin)= 'onUploadBegin($event)'></ej-uploadbox>TS: public onUploadBegin: any= () => { }; |
Not Applicable |
| Event triggers when cancel the upload |
Event: cancel<ej-uploadbox (cancel)= 'onUploadCancel($event)'></ej-uploadbox> TS: public onUploadCancel: any= () => { }; |
Event : canceling<ejs-uploader (canceling)='uploadingCancel($event)'></ejs-uploader>TS: public uploadingCancel: EmitType |
| Event triggers when the upload completed |
Event: complete<ej-uploadbox (complete)= 'onUploadComplete($event)'></ej-uploadbox>TS: public onUploadComplete: any= () => { }; |
Not Applicable |
Chunk Upload
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Enabling the chunk upload | Not Applicable |
Property: asyncSettings.chunkSize<ejs-uploader [asyncSettings]='path'></ejs-uploader>TS: public path: Object = { saveUrl: ‘saveUrl’,chunkSize: 50000 }; |
| Retry the upload automatically when it’s get failed | Not Applicable |
Property: asyncSettings.retryCount, asyncSettings.retryAfterDelay<ejs-uploader [asyncSettings]='path'></ejs-uploader>TS: public path: Object = { saveUrl: ‘saveUrl’,chunkSize: 50000,retryCount: 3,retryAfterDelay: 1000}; |
| Pause the uploading file | Not Applicable |
Method: pause<ejs-uploader #defaultupload></ejs-uploader>TS: @ViewChild(‘defaultupload’) public uploadObj: UploaderComponent; uploadObj.pause(filesData); |
| Event triggers when pausing the file | Not Applicable |
Event: pausing<ejs-uploader (pausing)='pausingUpload($event)'></ejs-uploader>TS: public pausingUpload: EmitType |
| Resuming the paused file | Not Applicable |
Method: resume<ejs-uploader #defaultupload></ejs-uploader>TS: @ViewChild(‘defaultupload’) public uploadObj: UploaderComponent; uploadObj.resume(filesData); |
| Event triggers when resuming the file | Not Applicable |
Event: resuming<ejs-uploader (resuming)='resumingUpload($event)'></ejs-uploader>TS: public resumingUpload: EmitType |
| Retry the failed file | Not Applicable |
Method: retry<ejs-uploader #defaultupload></ejs-uploader>TS: @ViewChild(‘defaultupload’) public uploadObj: UploaderComponent;uploadObj.retry(filesData); |
| Cancel the failed file | Not Applicable |
Method: cancel<ejs-uploader #defaultupload></ejs-uploader>TS: @ViewChild(‘defaultupload’) public uploadObj: UploaderComponent; uploadObj.cancel(filesData); |
| Event triggers when cancel the file | Not Applicable |
Event: canceling<ejs-uploader (canceling)='cancelingUpload($event)'></ejs-uploader>TS: public cancelingUpload: EmitType |
| Event triggers when chunk file fails | Not Applicable |
Event: chunkFailure<ejs-uploader (chunkFailure)='onChunkFailure($event)'></ejs-uploader>TS: public onChunkFailure: EmitType |
| Event triggers when chunk file success | Not Applicable |
Event: chunkSuccess<ejs-uploader (chunkSuccess)='onChunkSuccess($event)'></ejs-uploader>TS: public onChunkSuccess: EmitType |
Remove action
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Remove the uploaded file | Not Applicable |
Method: remove<ejs-uploader #defaultupload></ejs-uploader>TS: @ViewChild(‘defaultupload’) public uploadObj: UploaderComponent; uploadObj.remove(filesData); |
| Event triggers when the file removing succeed |
Event: remove<ej-uploadbox (remove)='onRemove($event)'></ej-uploadbox>TS: public onRemove: any= () => { }; |
Event: success<ejs-uploader (success)='onSuccess($event)'></ejs-uploader>TS: public onSuccess: EmitType |
| Event triggers when the file removing fails | Not Applicable |
Event: failure<ejs-uploader (failure)='onFailure($event)'></ejs-uploader>TS: public onFailure: EmitType |
Buttons
| Behavior | Property in essential JS 1 | Property in essential JS 2 |
|---|---|---|
| Customize button text |
Property : buttonText<ej-uploadbox buttonText.browse]='browse' [buttonText.upload]='upload' [buttonText.cancel]='cancel'></ej-uploadbox>TS: public browse: string = ‘Choose File’; public upload: string = ‘Upload File’; public cancel: string = ‘Cancel Upload’; |
Property : buttons<ejs-uploader [buttons]='buttons'></ejs-uploader>TS: public buttons: object { browse: ‘Choose File’, clear: ‘Clear files’, upload: ‘upload Files’ } |
Drag and Drop
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Enable drag and drop upload |
Property : allowDragAndDrop<ej-uploadbox [allowDragAndDrop]='true'></ej-uploadbox>
|
No separate Property to disabling drag and drop |
| Set custom drop area | Not Applicable |
Property : dropArea<ejs-uploader [dropArea]=' dropElement'></ejs-uploader>
|
Common
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Adding custom class to wrapper element |
Property : cssClass<ej-uploadbox cssClass='Custom-Class'></ej-uploadbox>
|
Not Applicable |
| Enable/Disable the control |
Property : enabled<ej-uploadbox id='uploadBox' [enabled]='false'></ej-uploadbox> Method : enable(), disable()$(‘#uploadBox’).ejUploadbox(‘enable’); $(‘#uploadBox’).ejUploadbox(‘disable’); |
Property: enabled<ejs-uploader [enabled]='false'></ejs-uploader>
|
| Set height for uploader |
Property: height<ej-uploadbox id='uploadBox' height='100%'></ej-uploadbox>
|
Not Applicable |
| Set width for uploader |
Property: width<ej-uploadbox id='uploadBox' width='100%'></ej-uploadbox>
|
Not Applicable |
| Adding HTML attributes |
Property: htmlAttributes<ej-uploadbox id='uploadBox' [htmlAttributes]='htmlAttribute'></ej-uploadbox>TS: public htmlAttribute: object = { ‘aria-label’: ‘UploadBox’} |
Not Applicable |
| Event triggers when control created successfully |
Event: create<ej-uploadbox (create)= 'onCreate($event)'></ej-uploadbox>TS: public onCreate: any= () => { }; |
Event: created<ejs-uploader (created)='onCreated($event)'></ejs-uploader>TS: public onCreated: EmitType |
| Event triggers when destroy the control |
Event: destroy<ej-uploadbox (destroy)= 'onDestroy($event)'></ej-uploadbox>TS: public onDestroy: any= () => { }; |
Not Applicable |
| Keeping the model values in cookies |
Property: enablePersistence<ej-uploadbox id='uploadBox' [enablePersistence]='true'></ej-uploadbox>
|
Property: enablePersistence<ejs-uploader [enablePersistence]='true'></ejs-uploader>
|
| Get the selected files data | Not Applicable |
Method: getFilesData<ejs-uploader #defaultupload></ejs-uploader>TS: @ViewChild(‘defaultupload’) public uploadObj: UploaderComponent; uploadObj.getFilesData(); |
| Convert bytes in to MB, GB | Not Applicable |
Method: bytesToSize<ejs-uploader #defaultupload></ejs-uploader>TS: @ViewChild(‘defaultupload’) public uploadObj: UploaderComponent; uploadObj.bytesToSize(5000); |