Contents
- Accessibility
- File list
- File selection
- Upload action
- Chunk upload
- Remove action
- Buttons
- Drag and drop
- Common
Having trouble getting help?
Contact Support
Contact Support
Migration from Essential® JS 1
8 Dec 202415 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); |