I am working with the Telerik Upload. To parse a excel file to then dump data into the database. That part seems to work the problem that is happening that I am trying to check the Success or Error on the return and it just going to the blank screen. With the content message or the json message. It is not attaching back to the event on the Telerik Upload. I am looking for a fix see code below.
[HttpPost]
public ActionResult UploadContactTaskAsync(IEnumerable<IFormFile> files, int campaign, int mec)
{
try
{
var phoneOperatiors = new List<PhoneOperators>();
Stream FileStream = null;
IExcelDataReader eReader;
if (files == null || !files.Any())
{
//ContentResult contentResult = new ContentResult
//{
// Content = "No files selected for upload.",
// ContentType = "text/plain",
// StatusCode = 400 // Bad Request
//};
return BadRequest(new { message = "No file selected or file is empty." });
//return Json(new { success = false, message = "No files selected for upload." });
}
else
{
var file = files.FirstOrDefault();
if (file != null && file.Length > 0)
{
FileStream = file.OpenReadStream();
if(file.FileName.EndsWith(".xls"))
{
eReader = ExcelReaderFactory.CreateBinaryReader(FileStream);
}
else if(file.FileName.EndsWith(".xlsx"))
{
eReader = ExcelReaderFactory.CreateOpenXmlReader(FileStream);
}
else if (file.FileName.EndsWith(".csv"))
{
eReader = ExcelReaderFactory.CreateCsvReader(FileStream);
}
else
{
return Json(new { success = false, message = "Unsupported file format. Please upload an Excel or CSV file." });
}
var excelRecords = eReader.AsDataSet(new ExcelDataSetConfiguration()
{
ConfigureDataTable = _ => new ExcelDataTableConfiguration()
{
UseHeaderRow = true // To use first row as column names
}
});
eReader.Close();
if(excelRecords.Tables.Count > 0)
{
var dataTable = excelRecords.Tables[0];
foreach (DataRow row in dataTable.Rows)
{
var pilotId = row["PilotId"].ToString();
bool existsInMec = _context.Pilot.Any(f => f.PilotId == pilotId && f.PortalId == mec);
bool existsInCampaign = _context.PhoneOperators.Any(f => f.PilotId == pilotId && f.ContactListId == campaign && f.PortalId == mec);
if (existsInMec && !existsInCampaign)
{
PhoneOperators phoneOperator = new PhoneOperators
{
PilotId = pilotId,
Active = true,
ContactListId = campaign,
PortalId = mec,
CreateDate = DateTime.Now,
CreateUser = _httpContextAccessor.HttpContext?.User?.Identity?.Name
};
phoneOperatiors.Add(phoneOperator);
}
}
_context.PhoneOperators.AddRange(phoneOperatiors);
_context.SaveChanges();
}
}
}
_toastNotification.AddSuccessToastMessage("Files uploaded successfully.");
return Json(new { success = true, message = "Files uploaded successfully." });
}
catch (Exception ex )
{
_logger.LogError(ex, "Failed to upload files");
_toastNotification.AddErrorToastMessage("Failed: " + ex.Message, new ToastrOptions { ExtendedTimeOut = 0 });
return Json(new { success = false, message = ex.Message });
}
function onSuccess(e) {
e.preventDefault();
if (e.response && e.response.success) {
alert("File uploaded successfully.");
} else {
alert("File upload failed: " + (e.response ? e.response.message : "Unknown error"));
}
var uploadWindow = $("#uploadContactTaskWindow").data("kendoWindow");
uploadWindow.close();
}
function onError(e) {
e.preventDefault();
var status = e.XMLHttpRequest.status;
var statusText = e.XMLHttpRequest.statusText;
var serverErrorMessage = e.XMLHttpRequest.responseText;
if (serverErrorMessage)
{
}
var errorContainer = $("#errorContainer");
e.errors.forEach(function (error) {
errorContainer.append("<div class='alert alert-danger'>" + error + "</div>");
});
}@using (Html.BeginForm("UploadContactTask", "PhoneOperators", FormMethod.Post, new { enctype = "multipart/form-data", id = "uploadContactTaskForm" }))
{
<input id="Mec" type="hidden" name="Mec" value="@Model.PortalId"/>
<div id="errorContainer">
</div>
<div class="container form-group">
<div class="row">
@( Html.Kendo().DropDownList()
.Name("Campaign")
.OptionLabel("- Campaign -")
.DataTextField("ListName")
.DataValueField("ContactListId")
.AutoBind(true)
.HtmlAttributes(new { style = "width: 400px;" })
.DataSource(ds =>
{
ds.Read(read =>
{
read.Action("GetMecContactList", "App").Data("getMecFilterLocal");
})
.ServerFiltering(true);
})
)
</div>
<div class ="row" style="margin-top:5em">
<div class="col-md-10">
@(
Html.Kendo().Upload()
.Name("files")
.Validation(validation => validation
// Pass an array of allowed extensions (include the dot)
.AllowedExtensions(new string[] { ".csv", ".xlsx" })
)
.Async(s => s
.Save("UploadContactTask", "PhoneOperators").AutoUpload(false))
.Events(e => e.Success("onSuccess").Error("onError"))
)
</div>
</div>
<div class="row" style="margin-top: 3em" >
<button type="submit" class="btn btn-primary" id="uploadButton">Upload</button>
</div>
</div>
}
<style>
.k-clear-selected,
.k-upload-selected {
display: none;
}
</style>1 Answer, 1 is accepted
Hello Charlston,
From the code you shared, the most probable cause of the blank screen is that the form is being submitted natively by the browser, so the Upload's success and error events never run. Your Upload button is type="submit" inside Html.BeginForm(...). When that button is clicked, it would post the whole form and the browser would display the JSON or BadRequest response as the page. This would also explain why the data reaches the database but the handlers aren't hit.
I would suggest try making it a plain button that triggers the Upload widget instead:
<button type="button" class="btn btn-primary" id="uploadButton">Upload</button>$("#uploadButton").on("click", function () {
$("#files").data("kendoUpload").upload();
});An async Upload sends only the files, so campaign and mec would need to be passed through the upload event:
.Events(e => e.Upload("onUpload").Success("onSuccess").Error("onError"))function onUpload(e) {
e.data = {
campaign: $("#Campaign").data("kendoDropDownList").value(),
mec: $("#Mec").val()
};
}You can read the message error in the Error event handler form the response:
function onError(e) {
var msg = "Upload failed.";
try { msg = JSON.parse(e.XMLHttpRequest.responseText).message || msg; } catch (err) { }
$("#errorContainer").append("<div class='alert alert-danger'>" + msg + "</div>");
}Please try the suggestion from above and let me know about the result.
Regards,
Neli
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Iron
Iron
I changed my button type and added the onclick event (see below) to the button because the other function you gave me was not firing anytime I clicked it. I should also inform you that this Upload is being used inside a Kendo window (Just in case that might be an issue). Currently, it is not hitting the Upload function to then hit the back-end controller action. This is when I add a file to be uploaded and without it. There seems to have been a decoupling of the post action that the JavaScript is not calling.
function uploadContact() {
$("#files").data("kendoUpload").upload();
}
Hi Charlston,
I used the code snippet you provided initially to try to reproduce the issue locally.
In the attached sample app, you can select a campaign, enter an MEC ID, choose a non-empty CSV or Excel file, and click the page-level Upload button. In the attached sample the success event is truggered as expected.
Could you please try to modify the sample in order to replicate the issue the way it is on your side and send it back for a review? This will help us to take a closer look locally and advise you further.
Looking forward to your reply.
Regards,
Neli
Rank 1
Iron
Iron
Iron
I have figure out what is going wrong it is the e.preventDefault(). I dont know why it is causing an issue with the upload function being called but it is. this is what my code looks like now.
function uploadContact() {
var files = $("#files").data("kendoUpload");
if (!files.getFiles().length) {
var errorContainer = $("#errorContainer");
errorContainer.append("<div class='alert alert-danger'>Please select a file to upload.</div>");
return;
}
else{
files.upload();
}
}
function onUpload(e) {
var campaign = $("#Campaign").data("kendoDropDownList").value();
var mec = $("#Mec").val();
e.data = {
campaign: campaign,
Mec: mec
};
}
function onSuccess(e) {
setTimeout(function () {
var uploadWindow = $("#uploadContactTaskWindow").data("kendoWindow");
uploadWindow.close();
}, 2000);
var errorContainer = $("#errorContainer");
errorContainer.append("<div class='alert alert-success'>File uploaded successfully.</div>");
}
function onError(e) {
var status = e.XMLHttpRequest.status;
var statusText = e.XMLHttpRequest.statusText;
var serverErrorMessage = e.XMLHttpRequest.responseText;
if (serverErrorMessage)
{
}
var errorContainer = $("#errorContainer");
e.errors.forEach(function (error) {
errorContainer.append("<div class='alert alert-danger'>" + error + "</div>");
});
}<input id="Mec" type="hidden" name="Mec" value="@Model.PortalId"/>
<div id="errorContainer">
</div>
<div class="container form-group">
<div class="row">
@( Html.Kendo().DropDownList()
.Name("Campaign")
.OptionLabel("- Campaign -")
.DataTextField("ListName")
.DataValueField("ContactListId")
.AutoBind(true)
.HtmlAttributes(new { style = "width: 400px;" })
.DataSource(ds =>
{
ds.Read(read =>
{
read.Action("GetMecContactList", "App").Data("getMecFilterLocal");
})
.ServerFiltering(true);
})
)
</div>
<div class ="row" style="margin-top:5em">
<div class="col-md-10">
@(
Html.Kendo().Upload()
.Name("files")
.Validation(validation => validation
// Pass an array of allowed extensions (include the dot)
.AllowedExtensions(new string[] { ".csv", ".xlsx",".xls" })
)
.Async(s => s
.Save("UploadContactTask", "Campaigns").AutoUpload(false))
.Events(e => e.Upload("onUpload").Success("onSuccess").Error("onError"))
)
</div>
</div>
<div class="row" style="margin-top: 3em" >
<button type="button" class="btn btn-primary" id="uploadButton" onclick="uploadContact()">Upload</button>
</div>
</div>
<style>
.k-clear-selected,
.k-upload-selected {
display: none;
}
</style>