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 @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() |
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 { } |
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 { } |
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 |
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 { } |
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) { } |
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; } } |
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() |
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); |