This article describes the API migration process of File Upload component from Essential JS 1 to Essential JS 2.
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} /> |
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 { } |
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 { } |
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 |
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 { } |
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 { } |
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' } |
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; } |
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); } |