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

@Html.EJ().Uploadbox("UploadDefault")
.Locale("es-ES") 		Property : locale

@Html.EJS().
Uploader("UploadFiles").
Locale("es-ES").Render()
Right to left Property: enableRTL

@Html.EJ().Uploadbox("UploadDefault").
EnableRTL(true) 		Property: enableRTL

@Html.EJS().Uploader("UploadFiles").
EnableRtl(true).Render()

File list

Behavior Property in Essential JS 1 Property in Essential JS 2
Show/Hide the selected files Property : showFileDetails

@Html.EJ().Uploadbox("UploadDefault")
.ShowFileDetails(false) 		Property : showFileList

@Html.EJS().Uploader("UploadFiles").
ShowFileList(false).Render()
Customizing the file list Not Applicable Property : template

@Html.EJS().Uploader("UploadFiles").
Template("#Templateid").Render()
Get the files in sorted form Not Applicable Method: SortFileList

@Html.EJS().Uploader("UploadFiles")
.Render()

var uploadobj = document.
getElementById("UploadFiles").
ej2_instances[0];
uploadObj.sortFileList(files);
Clearing File List Not Applicable Method: ClearAll

@Html.EJS().Uploader("UploadFiles").
Render()

var uploadobj = document.
getElementById("UploadFiles").
ej2_instances[0];
uploadObj.clearAll();
}
Event triggers when clearing Files Not Applicable Event : clearing

@Html.EJS().Uploader("UploadFiles").
Clearing("onClearing").Render()

function onClearing(ClearingEventArgs): void { }

File selection

Behavior Property in Essential JS 1 Property in Essential JS 2
Select multiple files to upload Property : multipleFilesSelection

@Html.EJ().Uploadbox("UploadDefault").
MultipleFilesSelection(true) 		Property : multiple

@Html.EJS().Uploader("UploadFiles").
Multiple(true).Render()
Set minimum file size to upload Not Applicable Property : minFileSize

@Html.EJS().Uploader("UploadFiles").
MinFileSize(1024).Render()
Set maximum file size to upload Property : fileSize

@Html.EJ().Uploadbox("UploadDefault").
FileSize(5000) 		Property : maxFileSize

@Html.EJS().Uploader("UploadFiles").
MaxFileSize(5000).Render()
Allowed file types to select Property : extensionsAllow

@Html.EJ().Uploadbox("UploadDefault").
ExtensionsAllow(".zip") 		Property: allowedExtensions

@Html.EJS().Uploader("UploadFiles").
AllowedExtensions(".pdf").Render()
Restricted files types to select Property: extensionsDeny

@Html.EJ().Uploadbox("UploadDefault").
ExtensionsDeny(".docx") 		Not Applicable
Display only selected details in File list Property : customFileDetails

@Html.EJ().Uploadbox("UploadDefault").
CustomFileDetails(details=> details.
Title(false).
Name(true).Size(true).
Status(true).Action(false))
Not Applicable
Options to customize File list dialog Property: dialogAction

@Html.EJ().Uploadbox("UploadDefault").
DialogAction(details=> details.
Modal(false).
CloseOnComplete(true).
Resize(true).Drag(false).
content("#dialogTarget"))
Not Applicable
Customize dialog position Property: dialogPosition

@Html.EJ().Uploadbox("UploadDefault").
DialogPosition
(position => position.X(300).Y(100))
 Not Applicable
Change file list key values Property: dialogText

@Html.EJ().Uploadbox("UploadDefault").
DialogText(details=> details.
Title(Upload File List).Name(File Name).
Size(File Size))
 Not Applicable
Change drop area text Property: dropAreaText

@Html.EJ().Uploadbox("UploadDefault").
DropAreaText("Drop files here") 		No separate Property to change dropAreaText. It can be customize using locale Texts
Change drop area height Property: dropAreaHeight

@Html.EJ().Uploadbox("UploadDefault").
DropAreaHeight("100%") 		Not Applicable
Change drop area width Property: dropAreaWidth

@Html.EJ().Uploadbox("UploadDefault").
DropAreaWidth("100%") 		Not Applicable
Dynamically push the file Property: pushFile

@Html.EJ().Uploadbox("UploadDefault").
PushFile("files") 		Not Applicable
Show the files uploader in server already. Not Applicable Property: files

@Html.EJS().Uploader("UploadFiles").
Files(@ViewBag.datasource).Render()

public ActionResult PreloadFiles()
{ list.Add(new UploaderUploadedFiles
{ Name = "Nature", Size = 500000,
Type = ".png" }); }
Event triggers when select the file successfully Event: fileSelect

@Html.EJ().Uploadbox("UploadDefault").
ClientSideEvents(e => e.FileSelect("fileSelect"))

function fileSelect(e) {}
 Event: selected

@Html.EJS().Uploader("UploadFiles").
Selected("onFileSelect").Render()

function onFileSelect(args): void { }

Upload action

Behavior Property in Essential JS 1 Property in Essential JS 2
Save URL Property : saveUrl

@Html.EJ().Uploadbox("UploadBox").
SaveUrl("Uploadbox/Save") 		Property : saveUrl

@Html.EJS().Uploader("UploadFiles").
AsyncSettings(new Syncfusion.
EJ2.Inputs.
UploaderAsyncSettings
{SaveUrl = @Url.Content("/Uploader/Save")})
.Render()
Save URL Property : saveUrl

@Html.EJ().Uploadbox("UploadBox").
SaveUrl("Uploadbox/Save") 		Property : saveUrl

@Html.EJS().Uploader("UploadFiles").
AsyncSettings(new Syncfusion.
EJ2.Inputs.
UploaderAsyncSettings
{SaveUrl = @Url.Content("/Uploader/Save")})
.Render()
Save URL Property : saveUrl

@Html.EJ().Uploadbox("UploadBox").
SaveUrl("Uploadbox/Save") 		Property : saveUrl

@Html.EJS().Uploader("UploadFiles").
AsyncSettings(new Syncfusion.
EJ2.Inputs.
UploaderAsyncSettings
{SaveUrl = @Url.Content("/Uploader/Save") })
.Render()
Save URL Property : saveUrl

@Html.EJ().Uploadbox("UploadBox").
SaveUrl("Uploadbox/Save") 		Property : saveUrl

@Html.EJS().Uploader("UploadFiles").
AsyncSettings(new Syncfusion.
EJ2.Inputs.
UploaderAsyncSettings
{SaveUrl = @Url.Content("/Uploader/Save")}).
Render()
Remove URL Property : removeUrl

@Html.EJ().Uploadbox("UploadBox").
RemoveUrl("UploadBox/Remove") 		Property : removeUrl

@Html.EJS().Uploader("UploadFiles").
AsyncSettings(new Syncfusion.
EJ2.Inputs.
UploaderAsyncSettings
{RemoveUrl = @Url.Content
("/Uploader/Remove")})
.Render()
Automatically upload the file when files added in to upload queue Property: autoUpload

@Html.EJ().Uploadbox("UploadBox").
AutoUpload(false) 		Property: autoUpload

@Html.EJS().Uploader("UploadFiles").
AutoUpload(false).Render()
Synchronous upload Property: asyncUpload

@Html.EJ().Uploadbox("UploadBox").
AyncUpload(false) 		No Separate Property for enabling synchronous upload. It can be enabling by using below configuration

@Html.EJS().Uploader("UploadFiles").
AutoUpload(false).Render()
Key to get the selected files in server side Property: uploadName

@Html.EJ().Uploadbox("UploadBox").
UploadName("Uploadkey") 		Id of the element used as key value
Upload the files dynamically Not Applicable Method: upload()

@Html.EJS().Uploader("UploadFiles").
AsyncSettings(new Syncfusion.EJ2.Inputs.
UploaderAsyncSettings
{SaveUrl = @Url.Content
("/Uploader/Save"),
RemoveUrl = @Url.Content
("/Uploader/Remove") }).Render()

var uploadobj = document.
getElementById("UploadFiles").
ej2_instances[0];
uploadobj.upload = filesData;
Event triggers before start to upload the action Event: beforeSend

@Html.EJ().Uploadbox("UploadDefault").
ClientSideEvents(e =>
e.OnBeforeSend("onBeforeSend"))

function onBeforeSend(e) {}
 Event : uploading

@Html.EJS().Uploader("UploadFiles").
Uploading("beforeUploadStart").
Render()

function beforeUploadStart(args) { }
Event triggers when the upload is in progress Event: inProgress

@Html.EJ().Uploadbox("UploadDefault").
ClientSideEvents(e =>
e.InProgress("uploadInprogress"))

function uploadInprogress(e) {}
 Event : progress

@Html.EJS().Uploader("UploadFiles").
Progress("uploadInprogress").
Render()

function uploadInprogress(args) { }
Event triggers when upload got success Event: success

@Html.EJ().Uploadbox("UploadDefault").
ClientSideEvents(e =>
e.Success("uploadSuccess"))

function uploadSuccess(e) {}
 Event : success

@Html.EJS().Uploader("UploadFiles").
Success("uploadSuccess").Render()

function uploadSuccess(args) { }
Event triggers when upload got failed Event: error

@Html.EJ().Uploadbox("UploadDefault").
ClientSideEvents(e =>
e.Error("onUploadError"))

function onUploadError(e) {}
 Event : failure

@Html.EJS().Uploader("UploadFiles").
Failure("onUploadFailure").Render()

function onUploadFailure(args) { }
Event triggers when the upload got started Event: begin

@Html.EJ().Uploadbox("UploadDefault").
ClientSideEvents(e =>
e.Begin("onUploadBegin"))

function onUploadBegin(e) {}
 Not Applicable
Event triggers when cancel the upload Event: cancel

@Html.EJ().Uploadbox("UploadDefault").
ClientSideEvents(e =>
e.Cancel("onUploadCancel"))

function onUploadCancel(e) {}
Event : canceling

@Html.EJS().Uploader("UploadFiles").
Canceling("uploadingCancel").
Render()

function uploadingCancel(args) { }
Event triggers when the upload completed Event: complete

@Html.EJ().Uploadbox("UploadDefault").
ClientSideEvents(e =>
e.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

@Html.EJS().Uploader("UploadFiles").
MaxFileSize(104857600).AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = @Url.Content("https://aspnetmvc.syncfusion.com/
services/api/uploadbox/Save"),
RemoveUrl = @Url.Content("https://aspnetmvc.syncfusion.com/
services/api/uploadbox/Remove"), ChunkSize = 500000 }).Render()
Retry the upload automatically when it’s get failed Not Applicable Property: retryCount, retryAfterDelay

@Html.EJS().Uploader("UploadFiles").
MaxFileSize(104857600).AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = @Url.Content("https://aspnetmvc.syncfusion.com/
services/api/uploadbox/Save"), RemoveUrl = @Url.Content("https://aspnetmvc.syncfusion.com/
services/api/uploadbox/Remove"), ChunkSize = 500000, retryCount = 3, retryAfterDelay = 1000 }).Render()
Pause the uploading file Not Applicable Method: pause

@Html.EJS().Uploader("UploadFiles").Render()

var uploadobj = document.
getElementById("UploadFiles").ej2_instances[0];
uploadObj.pause = filesData;
Event triggers when pausing the file Not Applicable Event: pausing

@Html.EJS().Uploader("UploadFiles").
Pausing("onPausingUpload").Render()

function onPausingUpload(args): void { }
Resuming the paused file Not Applicable Method: resume

@Html.EJS().Uploader("UploadFiles").Render()

var uploadobj = document.
getElementById("UploadFiles").ej2_instances[0];
uploadObj.resume = filesData;
Event triggers when resuming the file Not Applicable Event: resuming

@Html.EJS().Uploader("UploadFiles").
Resuming("onResumingUpload").Render()

function onResumingUpload(args): void { }
Retry the failed file Not Applicable Method: retry

@Html.EJS().Uploader("UploadFiles").Render()

var uploadobj =
document.getElementById("UploadFiles").ej2_instances[0];
uploadObj.retry = filesData;
Cancel the failed file Not Applicable Method: cancel

@Html.EJS().Uploader("UploadFiles").Render()

var uploadobj =
document.getElementById("UploadFiles").ej2_instances[0];
uploadObj.cancel = filesData;
Event triggers when cancel the file Not Applicable Event: canceling

@Html.EJS().Uploader("UploadFiles").
Canceling("onCancelingUpload").Render()

function onCancelingUpload(args): void { }
Event triggers when chunk file fails Not Applicable Event: chunkFailure

@Html.EJS().Uploader("UploadFiles").
ChunkFailure("onChunkFailure").Render()

function onChunkFailure(args): void { }
Event triggers when chunk file success Not Applicable Event: chunkSuccess

@Html.EJS().Uploader("UploadFiles").
ChunkSuccess("onChunkSuccess").Render()

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

@Html.EJS().Uploader("UploadFiles").Render()

var uploadobj = document.
getElementById("UploadFiles").ej2_instances[0];
uploadObj.remove = filesData;
Event triggers when the file removing succeed Event: remove

@Html.EJ().
Uploadbox("UploadDefault").
ClientSideEvents(e => e.Remove("onRemove"))

function onRemove(e) {}
 Event: success

@Html.EJS().Uploader("UploadFiles").
Success("onSuccess").Render()

function onSuccess(args) { }
Event triggers when the file removing fails Not Applicable Event: failure

@Html.EJS().Uploader("UploadFiles").
Failure("onFailure").Render()

function onFailure(args) { }

Buttons

Behavior Property in essential JS 1 Property in essential JS 2
Customize button text Property : buttonText

@Html.EJ().
Uploadbox("UploadDefault").
Browse(ButtonText.Browse).
Upload(ButtonText.Upload).
Cancel(ButtonText.Cancel)
 Property : buttons

@Html.EJS().
Uploader("UploadFiles").
Buttons(ViewBag.UploadButtons).Render()

public ActionResult DefaultFunctionalities() { List<UploaderButton> buttons = new List<UploaderButton>() { }; buttons.Add(new UploaderButton() { browse = "Choose File", clear = "Clear Files", upload = "Upload Files" }); ViewBag.UploadButtons = buttons; return View(); }public class DefaultButtonModel { public string browse { get; set; } public string clear { get; set; } public string upload { get; set; } }

Drag and drop

Behavior Property in Essential JS 1 Property in Essential JS 2
Enable drag and drop upload Property : allowDragAndDrop

@Html.EJ().
Uploadbox("UploadDefault").
AllowDragAndDrop(true) 		No separate Property to disabling drag and drop
Set custom drop area Not Applicable Property : dropArea

@Html.EJS().
Uploader("UploadFiles").
DropArea(".control-fluid").Render()

Common

Behavior Property in Essential JS 1 Property in Essential JS 2
Adding custom class to wrapper element Property : cssClass

@Html.EJ().Uploadbox("UploadDefault").
CssClass("Custom-Class") 		Not Applicable
Enable/Disable the control Property : enabled

@Html.EJ().Uploadbox("UploadDefault").
Enabled(false).Render()
Method : enable(), disable()
 Property: enabled

@Html.EJS().
Uploader("UploadFiles").
Enabled(false).Render()
Set height for uploader Property: height

@Html.EJ().Uploadbox("UploadDefault").
Height("100%") 		Not Applicable
Set width for uploader Property: width

@Html.EJ().Uploadbox("UploadDefault").
Width("100%") 		Not Applicable
Adding HTML attributes Property: htmlAttributes

@Html.EJ().Uploadbox("UploadDefault").
HtmlAttribute(attribute =>
attribute.Aria-label("Uploadbox"))
 Not Applicable
Event triggers when control created successfully Event: create

@Html.EJ().Uploadbox("UploadDefault").
ClientSideEvents(e =>
e.Create("onCreate"))

function onCreate(e) {}
 Event: created

@Html.EJS().
Uploader("UploadFiles").
Created("onCreated").Render()

function onCreated(args) { }
Event triggers when destroy the control Event: destroy

@Html.EJ().Uploadbox("UploadDefault").
ClientSideEvents(e =>
e.Destroy("onDestroy"))

function onDestroy(e) {}
 Not Applicable
Keeping the model values in cookies Property: enablePersistence

@Html.EJ().Uploadbox("UploadDefault").
EnablePersistence(true) 		Property: enablePersistence

@Html.EJS().
Uploader("UploadFiles").
EnablePersistence(false).Render()
Get the selected files data Not Applicable Method: getFilesData

@Html.EJS().Uploader("UploadFiles")
.Render()

var uploadobj = document.
getElementById("UploadFiles").
ej2_instances[0];
uploadObj.getFilesData();
Convert bytes in to MB, GB Not Applicable Method: bytesToSize

@Html.EJS().Uploader("UploadFiles").
Render()

var uploadobj = document.
getElementById("UploadFiles").
ej2_instances[0];
uploadObj.bytesToSize(5000);