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