React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in React Uploader component

25 Jan 2023 / 10 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);
}
Previous
Next