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);