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