Migration from Essential JS 1
21 Feb 202215 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-upload-box id="UploadDefault" locale="es-ES"></ej-upload-box>
|
Property : locale <ejs-uploader id="UploadFiles" locale="es-ES"></ejs-uploader>
|
| Right to left |
Property: enableRTL <ej-upload-box id="UploadDefault" enable-rtl="true"></ej-upload-box>
|
Property: enableRTL <ejs-uploader id="UploadFiles" 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-upload-box id="UploadDefault" show-file-details="false"></ej-upload-box>
|
Property : showFileList <ejs-uploader id="UploadFiles" showFileList="false"></ejs-uploader>
|
| Customizing the file list | Not Applicable |
Property : template <ejs-uploader id="UploadFiles" template="#Templateid"></ejs-uploader>
|
| Get the files in sorted form | Not Applicable |
Method: SortFileList<ejs-uploader id="UploadFiles" ></ejs-uploader>var uploadobj = document.getElementById("UploadFiles").ej2_instances[0]; uploadObj.sortFileList(files); |
| Clearing File List | Not Applicable |
Method: ClearAll <ejs-uploader id="UploadFiles" ></ejs-uploader>var uploadobj = document.getElementById("UploadFiles").ej2_instances[0]; uploadObj.clearAll();} |
| Event triggers when clearing Files | Not Applicable |
Event : clearing <ejs-uploader id="UploadFiles" clearing="onClearing" ></ejs-uploader>function onClearing(ClearingEventArgs): void { } |
File selection
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Select multiple files to upload |
Property : multipleFilesSelection <ej-upload-box id="UploadDefault" multiple-file-selection="true"></ej-upload-box>
|
Property : multiple <ejs-uploader id="UploadFiles" multiple="true" ></ejs-uploader>
|
| Set minimum file size to upload | Not Applicable |
Property : minFileSize <ejs-uploader id="UploadFiles" minFileSize="1024" ></ejs-uploader>
|
| Set maximum file size to upload |
Property : fileSize <ej-upload-box id="UploadDefault" file-sie=5000></ej-upload-box>
|
Property : maxFileSize <ejs-uploader id="UploadFiles" maxFileSize="5000" ></ejs-uploader>
|
| Allowed file types to select |
Property : extensionsAllow <ej-upload-box id="UploadDefault" extensions-allow=".zip"></ej-upload-box>
|
Property: allowedExtensions ejs-uploader id="UploadFiles" allowedExtensions=".pdf" >
|
| Restricted files types to select |
Property: extensionsDeny <ej-upload-box id="UploadDefault" extensions-deny=".docx"></ej-upload-box>
|
Not Applicable |
| Display only selected details in File list |
Property : customFileDetails<ej-upload-box id="UploadDefault"><e-dialog-text title="false" name="true" size="true" status="true"/></ej-upload-box> |
Not Applicable |
| Options to customize File list dialog |
Property: dialogAction <ej-upload-box id="UploadDefault"><ej-dialog id="dialog" modal="false closeoncomplete="true" resize="true" drag="false" content="#dialogtarget"></ej-dialog></ej-upload-box> |
Not Applicable |
| Customize dialog position |
Property: dialogPosition<ej-upload-box id="UploadDefault"> <e-dialog-position x-value="20" y-value="20" /></ej-upload-box> |
Not Applicable |
| Change file list key values |
Property: dialogText<ej-upload-box id="UploadDefault"><e-dialog-text title="Upload File List" name="File Name" size="File Size"/></ej-upload-box> |
Not Applicable |
| Change drop area text |
Property: dropAreaText<ej-upload-box id="UploadDefault" drop-area-text="Drop files here"></ej-upload-box>
|
No separate Property to change dropAreaText. It can be customize using locale Texts |
| Change drop area height |
Property: dropAreaHeight<ej-upload-box id="UploadDefault" drop-area-height="100%"></ej-upload-box>
|
Not Applicable |
| Change drop area width |
Property: dropAreaWidth <ej-upload-box id="UploadDefault" drop-area-width="100%"></ej-upload-box>
|
Not Applicable |
| Dynamically push the file |
Property: pushFile<ej-upload-box id="UploadDefault" push-file="files"></ej-upload-box>
|
Not Applicable |
| Show the files uploader in server already. | Not Applicable |
Property: files <ejs-uploader id="UploadFiles"><e-uploader-files><e-uploader-uploadedfiles name="Nature" Size=500000 type=".png"></e-uploader-uploadedfiles></e-uploader-files></ejs-uploader> |
| Event triggers when select the file successfully |
Event: fileSelect <ej-upload-box id="UploadDefault" fileSelect="onFileSelect">function onFileSelect(e) {} |
Event: selected<ejs-uploader id="UploadFiles" selected="onFileSelect" ></ejs-uploader>function onFileSelect(args): void { } |
Upload action
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Save URL |
Property : saveUrl <ej-upload-box id="UploadDefault" save-url= "//mvc.syncfusion.com/Services/FileUpload/UploadBox/saveFiles"></ej-upload-box>
|
Property : saveUrl@{var asyncSettings = new Syncfusion.EJ2.Inputs. UploaderAsyncSettings { SaveUrl = "/Uploader/Save"}; } <ejs-uploader id="UploadFiles" asyncSettings="@asyncSettings" > </ejs-uploader>
|
| Remove URL |
Property : removeUrl<ej-upload-box id="UploadDefault" remove-url="//mvc.syncfusion.com/Services/FileUpload/UploadBox/removeFiles"></ej-upload-box>
|
Property : removeUrl@{var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { RemoveUrl = "/Uploader/Remove"}; }<ejs-uploader id="UploadFiles" asyncSettings="@asyncSettings" ></ejs-uploader>
|
| Automatically upload the file when files added in to upload queue |
Property: autoUpload <ej-upload-box id="UploadDefault" auto-upload="false">
|
Property: autoUpload<ejs-uploader id="UploadFiles"autoUpload="false" ></ejs-uploader>
|
| Synchronous upload |
Property: asyncUpload<ej-upload-box id="UploadDefault" aync-upload="false">
|
No Separate Property for enabling synchronous upload. It can be enabling by using below configuration <ejs-uploader id="UploadFiles"autoUpload="false" ></ejs-uploader>
|
| Key to get the selected files in server side |
Property: uploadName<ej-upload-box id="UploadDefault" upload-name="Uploadkey"
|
Id of the element used as key value |
| Upload the files dynamically | Not Applicable | Method: upload()@{ var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "/Uploader/Save", RemoveUrl = "/Uploader/Remove"}; }<ejs-uploader id="UploadFiles" asyncSettings="@asyncSettings" ></ejs-uploader> var uploadobj = document.getElementById("UploadFiles").ej2_instances[0];uploadobj.upload = filesData; |
| Event triggers before start to upload the action |
Event: beforeSend<ej-upload-box id="UploadDefault" beforeSend="onBeforeSend">function onBeforeSend(e) {} |
Event : uploading<ejs-uploader id="UploadFiles" uploading="beforeUploadStart" ></ejs-uploader>function beforeUploadStart(): void { } |
| Event triggers when the upload is in progress |
Event: inProgress<ej-upload-box id="UploadDefault" inprogress="uploadInprogress">function uploadInprogress(e) {} |
Event : progress<ejs-uploader id="UploadFiles" progress="uploadInprogress" ></ejs-uploader>function uploadInprogress(args) { } |
| Event triggers when upload got success |
Event: success<ej-upload-box id="UploadDefault" Success="onUploadSuccess">function onUploadSuccess(e) {} |
Event : success<ejs-uploader id="UploadFiles"success="uploadSuccess" ></ejs-uploader>function uploadSuccess(args) { } |
| Event triggers when upload got failed |
Event: error<ej-upload-box id="UploadDefault" Error="onUploadError">function onUploadError(e) {} |
Event : failure<ejs-uploader id="UploadFiles" failure="onUploadFailure" ></ejs-uploader>function onUploadFailure(args) { } |
| Event triggers when the upload got started |
Event: begin <ej-upload-box id="UploadDefault" begin="onUploadBegin">function onUploadBegin(e) {} |
Not Applicable |
| Event triggers when cancel the upload |
Event: cancel<ej-upload-box id="UploadDefault" cancel="onUploadCancel">function onUploadCancel(e) {} |
Event : canceling<ejs-uploader id="UploadFiles" canceling="uploadingCancel" ></ejs-uploader>function uploadingCancel(args) { } |
| Event triggers when the upload completed |
Event: complete<ej-upload-box id="UploadDefault" complete="onUploadComplete">function onUploadComplete(e) {} |
Not Applicable |
Chunk upload
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Enabling the chunk upload | Not Applicable |
Property: chunkSize@{var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "/Uploader/Save", RemoveUrl = "/Uploader/Remove", ChunkSize = 500000 }; } <ejs-uploader id="UploadFiles" maxFileSize="104857600" asyncSettings="@asyncSettings" ></ejs-uploader> |
| Retry the upload automatically when it’s get failed | Not Applicable |
Property: retryCount, retryAfterDelay@{var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "/Uploader/Save", RemoveUrl = "/Uploader/Remove", ChunkSize = 500000, retryCount=3, retryAfterDelay= 1000 }; } <ejs-uploader id="UploadFiles" maxFileSize="104857600" asyncSettings="@asyncSettings" ></ejs-uploader> |
| Pause the uploading file | Not Applicable |
Method: pause<ejs-uploader id="UploadFiles" ></ejs-uploader>var uploadobj = document.getElementById("UploadFiles").ej2_instances[0]; uploadObj.pause = filesData; |
| Event triggers when pausing the file | Not Applicable |
Event: pausing<ejs-uploader id="UploadFiles" pausing="onPausingUpload" ></ejs-uploader>function onPausingUpload(args): void { } |
| Resuming the paused file | Not Applicable |
Method: resume<ejs-uploader id="UploadFiles" ></ejs-uploader>var uploadobj = document.getElementById("UploadFiles").ej2_instances[0]; uploadObj.resume = filesData; |
| Event triggers when resuming the file | Not Applicable |
Event: resuming<ejs-uploader id="UploadFiles" resuming="onResumingUpload" ></ejs-uploader>function onResumingUpload(args): void { } |
| Retry the failed file | Not Applicable |
Method: retry<ejs-uploader id="UploadFiles" ></ejs-uploader>var uploadobj = document.getElementById("UploadFiles").ej2_instances[0]; uploadObj.retry = filesData; |
| Cancel the failed file | Not Applicable |
Method: cancel<ejs-uploader id="UploadFiles" ></ejs-uploader>var uploadobj = document.getElementById("UploadFiles").ej2_instances[0]; uploadObj.cancel = filesData; |
| Event triggers when cancel the file | Not Applicable |
Event: canceling<ejs-uploader id="UploadFiles" canceling="onCancelingUpload" ></ejs-uploader>function onCancelingUpload(args): void { } |
| Event triggers when chunk file fails | Not Applicable |
Event: chunkFailure<ejs-uploader id="UploadFiles" chunkFailure="onChunkFailure" ></ejs-uploader>function onChunkFailure(args): void { } |
| Event triggers when chunk file success | Not Applicable |
Event: chunkSuccess<ejs-uploader id="UploadFiles" chunkSuccess="onChunkSuccess" ></ejs-uploader>function onChunkSuccess(args): void { } |
Remove action
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Remove the uploaded file | Not Applicable |
Method: remove<ejs-uploader id="UploadFiles" ></ejs-uploader>var uploadobj = document.getElementById("UploadFiles").ej2_instances[0]; uploadObj.remove = filesData; |
| Event triggers when the file removing succeed |
Event: remove<ej-upload-box id="UploadDefault" remove="onRemove">function onRemove(e) {} |
Event: success<ejs-uploader id="UploadFiles" success="onSuccess" ></ejs-uploader>function onSuccess(args) { } |
| Event triggers when the file removing fails | Not Applicable |
Event: failure<ejs-uploader id="UploadFiles" failure="onFailure" ></ejs-uploader>function onFailure(args) { } |
Buttons
| Behavior | Property in essential JS 1 | Property in essential JS 2 |
|---|---|---|
| Customize button text |
Property : buttonText<ej-upload-box id="UploadDefault"><e-button-text browse="buttontext.browse" cancel="buttontext.cancel" close="buttontext.close" /></ej-upload-box> |
Property : buttons<ejs-uploader id="UploadFiles" buttons="ViewBag.button" ></ejs-uploader>public IActionResult DefaultFunctionalities() { ViewBag.button = new { 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-upload-box id="UploadDefault" allow-drag-and-drop="true" ></ej-upload-box>
|
No separate Property to disabling drag and drop |
| Set custom drop area | Not Applicable |
Property : dropArea<ejs-uploader id="UploadFiles" dropArea=".control-fluid" ></ejs-uploader>
|
Common
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Adding custom class to wrapper element |
Property : cssClass<ej-upload-box id="UploadDefault" css-class="Custom-Class" ></ej-upload-box>
|
Not Applicable |
| Enable/Disable the control |
Property : enabled<ej-upload-box id="UploadDefault" enabled="false" ></ej-upload-box>Method : enable(), disable() |
Property: enabled<ejs-uploader id="UploadFiles" enabled="false" ></ejs-uploader>
|
| Set height for uploader |
Property: height<ej-upload-box id="UploadDefault" height="100%" ></ej-upload-box>
|
Not Applicable |
| Set width for uploader |
Property: width<ej-upload-box id="UploadDefault" width="100%" ></ej-upload-box>
|
Not Applicable |
| Adding HTML attributes |
Property: htmlAttributes@{ Dictionary<string, object> htmlAttribute = new Dictionary<string, object>(); htmlAttribute.Add("aria-label");}<ej-upload-box id="UploadDefault" html-attribute="htmlAttribute" ></ej-upload-box> |
Not Applicable |
| Event triggers when control created successfully |
Event: create<ej-upload-box id="UploadDefault" create="onCreate">function onCreate(e) {} |
Event: created<ejs-uploader id="UploadFiles" created="onCreated" ></ejs-uploader>function onCreated(args) { } |
| Event triggers when destroy the control |
Event: destroy<ej-upload-box id="UploadDefault" destroy="onDestroy">function onDestroy(e) {} |
Not Applicable |
| Keeping the model values in cookies |
Property: enablePersistence<ej-upload-box id="UploadDefault" enable-persistence="true"></ej-upload-box>
|
Property: enablePersistence<ejs-uploader id="UploadFiles" enablePersistence="false" ></ejs-uploader>
|
| Get the selected files data | Not Applicable |
Method: getFilesData<ejs-uploader id="UploadFiles" ></ejs-uploader>var uploadobj = document.getElementById("UploadFiles").ej2_instances[0]; uploadObj.getFilesData(); |
| Convert bytes in to MB, GB | Not Applicable |
Method: bytesToSize<ejs-uploader id="UploadFiles" ></ejs-uploader>var uploadobj = document.getElementById("UploadFiles").ej2_instances[0]; uploadObj.bytesToSize(5000); |