- Home
- Forum
- ASP.NET Core - EJ 2
- Show progressbar while uploading images using sync method
Show progressbar while uploading images using sync method
Hello,
I am uploading images into my Azure and inserting images name into a database with Azure URL. This process is performed while I click on the DIALOG BOX using AJAX.
Now my requirtnemnt is during this uploading process I want to show the PROGRESS BAR.
Can you please help me with it?
<ejs-uploader id="postedImages" selected="onSelect" asyncSettings="@asyncSettingsImages" directoryUpload="true" success="onSuccessImages"></ejs-uploader>
<ejs-button id="dialogBtn" content="Save"></ejs-button>
var asyncSettingsImages = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = @Url.Content("~/UploadImages/Save/") };
document.getElementById("dialogBtn").onclick = function () {
ej.popups.DialogUtility.confirm({
title: ' Confirmation Dialog',
content: "Are you sure you want to upload images into Azure and Update DB",
okButton: {
text: 'OK', click: function () {
okClickInsert();
this.hide();
} },
cancelButton: { text: 'Cancel', click: ClickTest },
showCloseIcon: true,
closeOnEscape: true,
animationSettings: { effect: 'Zoom' }
});
};
Here Is my function which is called while clicking on the OK button from the dialog box. This MYMETHOD is type of ASYNC AND AWAIT.
function okClickInsert () {
$.ajax({
url: "@Url.Action("MYMETHOD", "MYCONTROLLER")",
data: JSON.stringify(MYOBJECT),
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
},
error: function (data) {
}
});
}
|
<ejs-uploader id="postedImages" asyncSettings="@asyncSettingsImages" progress="onProgress" actionComplete="onComplete" directoryUpload="true"></ejs-uploader>
<div id="loader">
<ejs-progressbar id="linearindeterminate" >
</ejs-progressbar>
</div>
<script>
function onProgress(args) {
document.querySelector("body").style.visibility = "hidden";
document.querySelector("#loader").style.visibility = "visible";
}
function onComplete(args) {
document.querySelector("#loader").style.display = "none";
document.querySelector("body").style.visibility = "visible";
};
</script> |
Hello
Thank you for your reply. Can I show the timer here?
And how many percentage files get uploaded like 50% 55% ..... 69% 70%...
Thanks
Hi Veet,
Your requirement can be achieved by enabling showProgressValue property in progress bar. Please check with the below snippet and documentation link.
|
<ejs-progressbar showProgressValue="true"> </ejs-progressbar> |
UG : https://ej2.syncfusion.com/aspnetcore/documentation/progress-bar/annotation#label
Online Demo : https://ej2.syncfusion.com/aspnetcore/ProgressBar/Labels#/bootstrap5
Kindly revert us if you have any concerns.
Regards,
Durga G.
Here is my ajax CALL actual Code when I click on the button OKCLICKINSERT() function will be called.
function okClickInsert () {
//Other Code
$.ajax({
url: "@Url.Action("UploadFilesinAzure", "UploadFiles")",
data: JSON.stringify(UPLOADToAzure),
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
beforeSend: onProgress,
complete: onComplete,
success: function (data) {
location.reload();
},
error: function (data) { }
});
}
Now the method " UploadFilesinAzure " is TYPE OF ASYNC AND AWAIT.
[HttpPost]
public async Task
//Other validation code
await DoUploadFileOnlyAsync(FILE Details);
}
During the execution of UploadFilesinAzure() I want to calculate the time and show me the progressbar.
PLEASE GIVE EXACT SOLUTION for my problem, not the random Example.
