Ej1 api migration in React Uploader component
30 Jan 20239 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
<UploaderComponent id='fileUpload' locale='es-ES' />
|
| Right to left | Property: enableRTL
<EJ.Uploadbox id="UploadDefault" enableRTL= {true}></EJ.Uploadbox>
| Property: enableRTL
<UploaderComponent id='fileUpload' enableRtl= {true} />
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
<UploaderComponent id='fileUpload' showFileList= {false} />
|
| Customizing the file list | Not Applicable | Property : template
<UploaderComponent id='fileUpload' template='#templateid' />
|
| Get the files in sorted form | Not Applicable | Method: SortFileList
<UploaderComponent id='fileUpload' ref = {(scope) => {this.uploadObj = scope}} />
constructor(props: {}) {
this.uploadObj.sortFileList(files);
}
|
| Clearing File List | Not Applicable | Method: ClearAll
<UploaderComponent id='fileUpload' ref = {(scope) => {this.uploadObj = scope}} />
constructor(props: {}) {
this.uploadObj.clearAll();
}
|
| Event triggers when clearing Files | Not Applicable | Event : clearing
<UploaderComponent id='fileUpload' clearing= { this.onClearing.bind(this) } />
private onClearing(ClearingEventArgs): void { }
|
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 <UploaderComponent id='fileUpload' multiple= {true} />
|
| Set minimum file size to upload | Not Applicable | Property : minFileSize
<UploaderComponent id='fileUpload' minFileSize ={this.minFileSize} />
constructor(props: {}) { this.minFileSize= 1024;
}
|
| Set maximum file size to upload | Property : fileSize <EJ.Uploadbox id="UploadDefault" fileSize= '5000'></EJ.Uploadbox>
| Property : maxFileSize <UploaderComponent id='fileUpload' maxFileSize= {this.maxFileSize} />
constructor(props: {}) { this.maxFileSize= 5000;
}
|
| Allowed file types to select | Property : extensionsAllow <EJ.Uploadbox id="UploadDefault" extensionsAllow='.zip'/></EJ.Uploader>
| Property: allowedExtensions
<UploaderComponent id='fileUpload' allowedExtensions= {this.allowedExtensions} /> constructor(props: {}) { this.allowedExtensions='.pdf'; }
|
| 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={this.customFileDetails}></EJ.Uploadbox>
customFileDetails(): void {
title: false,
name: true,
size: true,
status: true,
action: false
}
| Not Applicable |
| Options to customize File list dialog | Property: dialogAction
<EJ.Uploadbox id="UploadDefault" dialogAction={this.dialogAction}></EJ.Uploadbox>
dialogAction(): void {
modal: false,
closeOnComplete: true,
resize: true,
drag: false,
content:'#dialogTarget'
}
| Not Applicable |
| Customize dialog position | Property: dialogPosition<EJ.Uploadbox id="UploadDefault" dialogPosition={this.position}></EJ.Uploadbox> position(): void { X: 300, Y: 100}
| Not Applicable |
| Change file list key values | Property: dialogText
<EJ.Uploadbox id="UploadDefault" dialogText={this.dlgText}></EJ.Uploadbox>
dlgText(): void {
title: Upload File List,
name: File Name,
size: File Size,
}
| Not Applicable |
| Change drop area text | Property: dropAreaText
<EJ.Uploadbox id="UploadDefault" 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 id="UploadDefault" dropAreaHeight= '100%'></EJ.Uploadbox>
| Not Applicable |
| Change drop area width | Property: dropAreaWidth
<EJ.Uploadbox id="UploadDefault" dropAreaWidth= '100%'></EJ.Uploadbox>
| Not Applicable |
| Dynamically push the file | Property: pushFile
<EJ.Uploadbox id="UploadDefault" pushFile= {files} /></EJ.Uploadbox>
| Not Applicable |
| Show the files uploader in server already. | Not Applicable | Property: files <UploaderComponent id='validation' type='file'>
<FilesDirective>
<UploadedFilesDirective name="Nature" size={25000}type=".png">
</UploadedFilesDirective>
</FilesDirective>
</UploaderComponent>
|
| Event triggers when select the file successfully | Event: fileSelect
<EJ.Uploadbox id="UploadDefault" fileSelect= {this.onFileSelect} /></EJ.Uploadbox>
onFileSelect ():void {}
| Event: selected
<UploaderComponent id='fileUpload' selected= { this.onFileSelect.bind(this) } />
private onFileSelect(): void { }
|
Upload action
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | —————————— | —————————— |
| Save URL | Property : saveUrl <EJ.Uploadbox id="UploadDefault" saveUrl= {savefiles}></EJ.Uploadbox>
| Property : saveUrl<UploaderComponent id='fileUpload' asyncSettings = {this.asyncSettings} />
constructor(props: {}) {
this.asyncSettings = {
saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
};}
|
| Remove URL | Property : removeUrl
<EJ.Uploadbox id="UploadDefault" removeUrl= {removefiles}></EJ.Uploadbox>
| Property : removeUrl
<UploaderComponent id='fileUpload' asyncSettings = {this.asyncSettings} />
constructor(props: {}) {
this.asyncSettings = {
removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove',
};}
|
| Automatically upload the file when files added in to upload queue | Property: autoUpload
<EJ.Uploadbox id="UploadDefault" autoUpload= {false}></EJ.Uploadbox>
| Property: autoUpload
<UploaderComponent id='fileUpload' autoUpload= {false} />
|
| Synchronous upload | Property: asyncUpload
<EJ.Uploadbox id="UploadDefault" ayncUpload= {false}></EJ.Uploadbox>
| No Separate Property for enabling synchronous upload. It can be enabling by using below configuration <UploaderComponent id='fileUpload' autoUpload= {false} />
|
| Key to get the selected files in server side | Property: uploadName
<EJ.Uploadbox id="UploadDefault" uploadName='Uploadkey'></EJ.Uploadbox>
| Id of the element used as key value |
| Upload the files dynamically | Not Applicable | Method: upload()
<UploaderComponent id='fileUpload' ref = {(scope) => {this.uploadObj = scope}} asyncSettings = {this.asyncSettings} />
constructor(props: {}) {
this.asyncSettings = {
saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove', };
this.uploadObj.upload = filesData;
}
|
| Event triggers before start to upload the action | Event: beforeSend
<EJ.Uploadbox id="UploadDefault" onBeforeSend= {this.onBeforeSend}></EJ.Uploadbox>
onBeforeSend() { };
| Event : uploading
<UploaderComponent id='fileUpload' uploading= { this.beforeUploadStart.bind(this) } />
private beforeUploadStart(): void { }
|
| Event triggers when the upload is in progress | Event: inProgress
<EJ.Uploadbox id="UploadDefault" inProgress= {this.uploadInprogress}></EJ.Uploadbox>
uploadInprogress() { };
| Event : progress
<UploaderComponent id='fileUpload' progress= { this.uploadInprogress.bind(this) } />
private uploadInprogress(): void { }
|
| Event triggers when upload got success | Event: success
<EJ.Uploadbox id="UploadDefault" success= {this.uploadSuccess}></EJ.Uploadbox>
uploadSuccess() { };
| Event : success
<UploaderComponent id='fileUpload' success= { this.uploadSuccess.bind(this) } />
private uploadSuccess(): void { }
|
| Event triggers when upload got failed | Event: error
<EJ.Uploadbox id="UploadDefault" error= {this.onUploadError}></EJ.Uploadbox>
onUploadError() { };
| Event : failure
<UploaderComponent id='fileUpload' failure= { this.uploadFailure.bind(this) } />
private uploadFailure(): void { }
|
| Event triggers when the upload got started | Event: begin <EJ.Uploadbox id="UploadDefault" begin= {this.onUploadBegin}></EJ.Uploadbox>
onUploadBegin() { };
| Not Applicable |
| Event triggers when cancel the upload | Event: cancel
<EJ.Uploadbox id="UploadDefault" cancel= {this.onUploadCancel}></EJ.Uploadbox>
onUploadCancel() { };
| Event : canceling
<UploaderComponent id='fileUpload' canceling= { this.uploadingCancel.bind(this) } />
private uploadingCancel(): void { }
|
| Event triggers when the upload completed | Event: complete
<EJ.Uploadbox id="UploadDefault" complete= {this.onUploadComplete}></EJ.Uploadbox>
onUploadComplete() { };
| Not Applicable |
Chunk Upload
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | —————————— | —————————— |
| Enabling the chunk upload | Not Applicable | Property: chunkSize<UploaderComponent id='fileUpload' asyncSettings = {this.asyncSettings} />
constructor(props: {}) { this.asyncSettings = { saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove',chunkSize: 500000 };}
|
| Retry the upload automatically when it’s get failed | Not Applicable | Property: retryCount, retryAfterDelay
<UploaderComponent id='fileUpload' asyncSettings = {this.asyncSettings} />
constructor(props: {}) { this.asyncSettings = { saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save', removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove', chunkSize: 500000, retryCount: 3, retryAfterDelay: 1000 };}
|
| Pause the uploading file | Not Applicable | Method: pause
<UploaderComponent id='fileUpload' ref = {(scope) => {this.uploadObj = scope}} asyncSettings = {this.asyncSettings} />
constructor(props: {}) { this.asyncSettings = { saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save', removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove', chunkSize: 500000 }; this.uploadObj.pause = filesData; }
|
| Event triggers when pausing the file | Not Applicable | Event: pausing
<UploaderComponent id='fileUpload' pausing= { this.pausingUpload.bind(this)} />
pausingUpload(): void { }
|
| Resuming the paused file | Not Applicable | Method: resume
<UploaderComponent id='fileUpload' ref = {(scope) => {this.uploadObj = scope}} asyncSettings = {this.asyncSettings} />
constructor(props: {}) { this.asyncSettings = { saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save', removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove', chunkSize: 500000 }; this.uploadObj.resume = filesData; }
|
| Event triggers when resuming the file | Not Applicable | Event: resuming
<UploaderComponent id='fileUpload' resuming= { this.resumingUpload.bind(this)} />
private resumingUpload(): void {
|
| Retry the failed file | Not Applicable | Method: retry
<UploaderComponent id='fileUpload' ref = {(scope) => {this.uploadObj = scope}} asyncSettings = {this.asyncSettings} />
constructor(props: {}) { this.asyncSettings = { saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save', removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove', chunkSize: 500000 }; this.uploadObj.retry = filesData; }
|
| Cancel the failed file | Not Applicable | Method: cancel
<UploaderComponent id='fileUpload' ref = {(scope) => {this.uploadObj = scope}} asyncSettings = {this.asyncSettings} />
constructor(props: {}) { this.asyncSettings = { saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save', removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove', chunkSize: 500000 }; this.uploadObj.cancel = filesData; }
|
| Event triggers when cancel the file | Not Applicable | Event: canceling
<UploaderComponent id='fileUpload' canceling= { this.cancelingUpload.bind(this) } />
private cancelingUpload(): void { }
|
| Event triggers when chunk file fails | Not Applicable | Event: chunkFailure
<UploaderComponent id='fileUpload' chunkFailure= { this.onChunkFailure.bind(this) } />
private onChunkFailure(): void { }
|
| Event triggers when chunk file success | Not Applicable | Event: chunkSuccess
<UploaderComponent id='fileUpload' chunkSuccess= { this.onChunkSuccess.bind(this) } />
private onChunkSuccess(): void { }
|
Remove action
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | —————————— | —————————— |
| Remove the uploaded file | Not Applicable | Method: remove
<UploaderComponent id='fileUpload' ref = {(scope) => {this.uploadObj = scope}} asyncSettings = {this.asyncSettings} />
constructor(props: {}) {
this.asyncSettings = {
saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove',
this.uploadObj.remove = filesData;
}
|
| Event triggers when the file removing succeed | Event: remove
<EJ.Uploadbox id="UploadDefault" remove= {this.onRemove}></EJ.Uploadbox>
onRemove() { };
| Event: success
<UploaderComponent id='fileUpload' success= { this.onSuccess.bind(this) } />
private onSuccess(): void { }
|
| Event triggers when the file removing fails | Not Applicable | Event: failure
<UploaderComponent id='fileUpload' failure= { this.onFailure.bind(this) } />
private onFailure(): void { }
|
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>
let browse: string = 'Choose File'
let upload: string= 'Upload File'
let cancel: string= 'Cancel Upload'
| Property : buttons
<UploaderComponent buttons={this.dlgbuttons}></ejs-uploader>
constructor(props: {}) {
this.dlgbuttons {
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 id="UploadDefault" allowDragAndDrop= {true}></EJ.Uploadbox>
| No separate Property to disabling drag and drop |
| Set custom drop area | Not Applicable | Property : dropArea
<UploaderComponent id='fileUpload' ref = {(scope) => {this.uploadObj = scope}} />
rendereComplete(): void {
this.uploadObj.dropArea = this.dropContainerEle;
}
|
Common
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | —————————— | —————————— |
| Adding custom class to wrapper element | Property : cssClass
<EJ.Uploadbox id="UploadDefault" cssClass= 'Custom-Class'></EJ.Uploadbox>
| Not Applicable |
| Enable/Disable the control | Property : enabled
<EJ.Uploadbox id="UploadDefault" enabled= {false}></EJ.Uploadbox>
Method : enable(), disable()
| Property: enabled
<UploaderComponent id='fileUpload' enabled= {false} />
|
| Set height for uploader | Property: height
<EJ.Uploadbox id="UploadDefault" height= '100%'></EJ.Uploadbox>
| Not Applicable |
| Set width for uploader | Property: width
<EJ.Uploadbox id="UploadDefault" width= '100%'></EJ.Uploadbox>
| Not Applicable |
| Adding HTML attributes | Property: htmlAttributes
<EJ.Uploadbox id="UploadDefault" htmlAttribute= {this.htmlAttribute}></EJ.Uploadbox>
htmlAttribute () {
'aria-label': 'Uploadbox'
}
| Not Applicable |
| Event triggers when control created successfully | Event: create
<EJ.Uploadbox id="UploadDefault" create= {this.onCreate}></EJ.Uploadbox>
onCreate() { };
| Event: created
<UploaderComponent id='fileUpload' created= { this.onCreated.bind(this) } />
onCreated(): void { }
|
| Event triggers when destroy the control | Event: destroy
<EJ.Uploadbox id="UploadDefault" destroy= {this.onDestroy}></EJ.Uploadbox>
onDestroy() { };
| Not Applicable |
| Keeping the model values in cookies | Property: enablePersistence
<EJ.Uploadbox id="UploadDefault" enablePersistence= {true}></EJ.Uploadbox>
| Property: enablePersistence
<UploaderComponent id='fileUpload' enablePersistence= {true} />
|
| Get the selected files data | Not Applicable | Method: getFilesData
<UploaderComponent id='fileUpload' ref = {(scope) => {this.uploadObj = scope}} />
constructor(props: {}) {
this.uploadObj.getFilesData();
}
|
| Convert bytes in to MB, GB | Not Applicable | Method: bytesToSize
<UploaderComponent id='fileUpload' ref = {(scope) => {this.uploadObj = scope}} />
constructor(props: {}) {
this.uploadObj.bytesToSize(5000);
}
|