I am implementing a feature which allows a user to upload a file which is processed server-side with some information returned as a JsonResult. This worked fine with another AJAX request where I sent only strings. It seems like because FormData is being sent it causes a page refresh, which for me means I never reach the response part of my code. I would appreciate it a lot if someone dug me out of this hole, thanks!
MyPage.cshtml
<input id="readFromFile" type="file"/>
<button class="btn btn-primary" type="submit" onclick="ResultsFromFile()">Get Results</button>
<script>
function ResultsFromFile() {
var temp = $("#readFromFile")[0].files;
if (temp.length > 0) {
if (window.FormData !== undefined) {
var data = new FormData();
for (var x = 0; x < temp.length; x++) {
data.append("file" + x, temp[x]);
}
$.ajax({
type: "POST",
url: 'AlexaIndex?handler=GetResultsFromFile',
headers: { "XSRF-TOKEN": $('input:hidden[name="__RequestVerificationToken"]').val() },
contentType: false,
processData: false,
data: data,
success: function (response) {
console.log('result is ' + response);
var jsonObj = JSON.parse(response);
PopulateTable(jsonObj);
}
});
}
}
</script>
MyPage.cshtml.cs
public JsonResult OnPostGetResultsFromFile()
{
foreach (var file in Request.Form.Files)
{
var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", file.FileName);
using (var stream = new FileStream(path, FileMode.Create))
{
file.CopyTo(stream);
}
var urlList = ReadFileOfUrls(path);
ModelState.Clear();
var results = _alexaExtractorService.GetAwisResults(urlList);
var json = JsonConvert.SerializeObject(results);
return new JsonResult(json);
}
return new JsonResult("FINITO MINITO");
}
The reason it's happening is because your button is wrapped in a form element, and all button elements with type="submit" will post the form to the server. Prevent the submit button from actually submitting by preventing that default action with e.preventDefault();
<input id="readFromFile" type="file"/>
<button class="btn btn-primary" type="submit" onclick="ResultsFromFile(event)">Get Results</button>
<script>
function ResultsFromFile(e) {
e.preventDefault();
var temp = $("#readFromFile")[0].files;
if (temp.length > 0) {
if (window.FormData !== undefined) {
var data = new FormData();
for (var x = 0; x < temp.length; x++) {
data.append("file" + x, temp[x]);
}
$.ajax({
type: "POST",
url: 'AlexaIndex?handler=GetResultsFromFile',
headers: { "XSRF-TOKEN": $('input:hidden[name="__RequestVerificationToken"]').val() },
contentType: false,
processData: false,
data: data,
success: function (response) {
console.log('result is ' + response);
var jsonObj = JSON.parse(response);
PopulateTable(jsonObj);
}
});
}
}
</script>
Change the button type to type="button" instead of type="submit".
<button class="btn btn-primary" type="button" onclick="ResultsFromFile()">Get Results</button>
Related
I have a requirement of sending invitations to candidates where a user selects the excel file, transfers it from ajax to controller and validates its size, type etc. Then user clicks on Send Invite button and sends the email invites(having excel file). Please find the below code for reference:
<button type="button" id="bulkuploadButton">Bulk Email Upload</button>
<input type="file" id="ExcelFile" name="ExcelFile" style="display:none" onchange="UploadFile();" onselect="UploadFile();" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
Jquery:
function UploadFile() {
if (ValidateExcelFile()) {
var excelFile = document.getElementById('ExcelFile');
formData = new FormData();
if (excelFile.files.length > 0) {
for (var i = 0; i < excelFile.files.length; i++) {
formData.append('file-' + i, excelFile.files[i]);
}
}
$.ajax({
url: url here,
type: "POST",
dataType: 'json',
processData: false,
contentType: false,
data: formData,
success: function (data) {
// Further Processing
},
error: function (err) {
//Error
}
});
}
}
Controller:
[HttpPost]
public JsonResult MyController(HttpPostedFileBase excelFile)
{
if (Request.Files.Count > 0)
{
foreach (string file in Request.Files)
{
excelFile = Request.Files[file];
}
var result = //Call Model here for validation checks and return error msges
TempData["ExcelFile"] = excelFile; //Store in TempData for further processing
return Json(result);
}
return null;
}
The validations are done successfully, now its time to send invite to candidates as:
<button onclick="SendInvite">Send Invitations</button>
Jquery:
function SendInvite() {
//Check validations for other inputs on the page
//Get the excel file same as above
var excelFile = document.getElementById('ExcelFile');
formData = new FormData();
if (excelFile.files.length > 0) {
for (var i = 0; i < excelFile.files.length; i++) {
formData.append('file-' + i, excelFile.files[i]);
}
}
$.ajax({
type: "POST",
url: url here,
data: JSON.stringify({
myModel: myModel,
excelFile: formData
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
},
error: function (data) {
}
});
}
Controller:
public JsonResult MyController2(MyModel myModel, HttpPostedFileBase excelFile)
{
//I tried the same method to get the file but it didn't help me
if (Request.Files.Count > 0) //Here Request.Files.Count = 0, it should be = 1 instead
{
foreach (string file in Request.Files)
{
excelFile = Request.Files[file];
}
}
//I then tied to use TempData but it does not have the excel data
excelFile = TempData["ExcelFile"] as HttpPostedFileBase;
//Further processing
I am getting this error while fetching data from TempData. ContentLength is 0 and also the data attribute is null
The data in TempData should be something like this (where ContentLength !=0
and data attribute has some value):
Can anyone help me get the excel data in controller MyController2.
Change the function SendInvite() as:
function SendInvite() {
//Check validations for other inputs on the page
//Get the excel file same as above
var excelFile = document.getElementById('ExcelFile');
formData = new FormData();
formData.append("data", JSON.stringify(myModel));
for (var i = 0; i < excelFile.files.length; i++) {
var file = ExcelFile.files[i];
formData.append("excelFile", file);
}
$.ajax({
type: "POST",
url: url here,
data: formData,
contentType: "application/json; charset=utf-8",
dataType: "json",
contentType: false,
processData: false,
success: function (data) {
},
error: function (data) {
}
});
}
and in controller
public JsonResult MyController2(string data, HttpPostedFileBase[] excelFile)
{
MyModel myModel = JsonConvert.DeserializeObject<MyModel>(data);
if (Request.Files.Count > 0)
{
//Do data processing here
}
//Further processing
Check this link How to Pass Image File and Form Data From Ajax to MVC Controller
What can I do to send FormData to my server, my file is always null in server or return Unsupported Media status 415, I try to solve the problem but have no idea now....
<form enctype="multipart/form-data" name="add_data" id="add_data" method="post" onsubmit="return false" >
<input type="file" multiple="multiple" name="files" value="" id="files" />
<br />
<input type="submit" class="btn btn-success" value="Upload">
<br />
</form>
this my html part and then
ajax
$('#add_data').submit(function () {
var totalFiles;
totalFiles = document.getElementById("files").files[0];
var formData = new FormData();
formData.append("files", totalFiles);
$.ajax({
url: "/api/food/addfile",
type: "Post",
data:myData,
contentType: false,
processData: false,
beforeSend: function (request) {
request.setRequestHeader("Authorization", "Bearer " + token);
},
data: totalFiles ,
dataType: 'json',
success: function () {
alert("success")
},
error: function (jqXHR, exception) {
if (jqXHR.status == 401) {
return alert("請先執行前置作業");
}
alert(jqXHR.responseText);
}
});
});
and Controller
[Authorize]
[HttpPost,Route("addfile")]
public IActionResult GetPicture(/*HttpPostedFileBase[] files*/)
{
#region test1
//if (files != null)
//{
// foreach (HttpPostedFileBase file in files)
// {
// file.SaveAs(Path.Combine(System.Web.HttpContext.Current.Server.MapPath("~/upload/"), file.FileName));
// }
//}
#endregion
#region test2
var req = System.Web.HttpContext.Current.Request;
if (req.Files.Count > 0)
{
foreach (string fileName in req.Files.Keys)
{
var file = req.Files["files"];
file.SaveAs(Path.Combine(System.Web.HttpContext.Current.Server.MapPath("~/upload/"), file.FileName));
}
}
#endregion
return Json(new { Status = 1 > 0 ? "SUCCESS" : "FAILS" });
that all Code , please who can tell me thanks.
Problem: Can't parse File object to JSON string, when doing that only null values are gotten, while trying to send complex type to MVC controller.
I tried adding it into FormData object and passing it to controller, however, passing List of them was not successful, because it would either return an empty array or just plain null
model:
public class UploadedDocument
{
public HttpPostedFile File { get; set;}
public string DocumentId { get; set;}
public string DocumentType { get; set; }
}
controller:
[HttpPost]
[ActionName("UploadFile")]
public ActionResult Upload(IEnumerable<UploadedDocument> documents)
{
return View();
}
upload function:
var _documents = [];
for (var i = 0; i < arrayOfFiles.length; i++) {
var document = {
"File": arrayOfFiles[i].file,
"DocumentId": arrayOfFiles[i].documentId,
"DocumentType": arrayOfFiles[i].documentName
};
_documents.push(document);
}
$.ajax({
url: "#Url.Action("UploadFile", "Home")",
type: "POST",
data: {"documents":_documents}
});
}
});
Basically, I manage to handle single upload via ajax like below
Input Element
<input type="file" name="customerpicture" id="customerpicture" />
Formdata
function getFormData() {
var data = new FormData();
var files = $("#customerpicture").get(0).files;
if (files.length > 0) {
data.append("file", files[0]);
}
//data.append("Name", $("#name").val());
return data;
}
Ajax Method
$('#InsertCustomer').click(function () {
debugger;
var antiForgeryToken = $("input[name=__RequestVerificationToken]").val();
var url = '#Url.Action("Add_Customer", "Customer")';
$.ajax({
type: 'POST',
headers: { "__RequestVerificationToken": antiForgeryToken },
url: url,
contentType: false,
processData: false,
data: getFormData(),
success: function (res) {
$('#custinsertmodal').modal('hide');
$('#custinsertmodal').find("input,textarea,select")
.val('')
.end()
.find("input[type=checkbox], input[type=radio]")
.prop("checked", "")
.end();
bootbox.alert({ message: res.result });
}
});
});
Controller
[HttpPost, ValidateHeaderAntiForgeryToken]
public JsonResult Add_Customer()
{
var errMsg = string.Empty;
byte[] tmpImage;
try
{
//Customer Image Processing
var file = Request.Files.Get("file");
if (file != null && file.ContentLength > 0)
{
//Image Saving to Folder
UploadHelper.UploadFile(file);
//Image Saving to Database
tmpImage = new byte[file.ContentLength];
file.InputStream.Read(tmpImage, 0, file.ContentLength);
CustomerModel model = new CustomerModel
{
Signature = tmpImage
};
_setupRepo.CreateSignatory(model);
return Json(new { error = false, result = $"Customer was successfully created" }, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
errMsg = ex.Message.ToString();
return Json(new { error = true, result = errMsg }, JsonRequestBehavior.AllowGet);
}
}
If you want to specifically use an ajax call to upload files: you need to use a FormData object. Files must be sent up as a single item within the FormData object and therefore cannot be passed to your ActionResult as part of a list.
Assuming you have a dynamic amount of file inputs on your page with custom fields the user can fill in, your code could look like the following:
HTML / Javascript:
<form id="File_Form">
<input type="file" name="File_1" />
<input type="text" name="DocumentName_File_1" value="doc1" />
<input type="text" name="DocumentId_File_1" value="1" />
<input type="file" name="File_2" />
<input type="text" name="DocumentName_File_2" value="doc2" />
<input type="text" name="DocumentId_File_2" value="2" />
<button>Upload Files</button>
</form>
<script>
$("#File_Form").submit(function() {
var formData = new FormData(this);
$.ajax({
url: '#Url.Action("UploadFiles")',
type: 'POST',
data: formData,
processData: false,
contentType: false,
cache: false
});
return false;
});
</script>
C#:
[HttpPost]
public ActionResult UploadFiles() {
foreach (string fileName in Request.Files) {
HttpPostedFileWrapper file = Request.Files[fileName];
string documentName = Request.Form[$"DocumentName_{fileName}"]?.ToString();
string documentId = Request.Form[$"DocumentId_{fileName}"]?.ToString();
// Do things with your file here.
}
return new HttpStatusCodeResult(System.Net.HttpStatusCode.OK);
}
It may not automatically serialize into your model object, but you can still obtain the result you want with clever naming of your form elements.
Try this.
var _documents = [];
for (var i = 0; i < arrayOfFiles.length; i++) {
var document = {
"File": arrayOfFiles[i].file,
"DocumentId": arrayOfFiles[i].documentId,
"DocumentType": arrayOfFiles[i].documentName
};
_documents.push(document);
}
var formData = new FormData();
formData.append("documents", documents);
$.ajax({
url: "#Url.Action("UploadFile", "Home")",
type: "POST",
data: formData,
processData: false,
contentType: false,
});
}
});
I have a weird problem.. This is my jquery code
$("#btnRate").click(function (e) {
alert("tık");
e.preventDefault();
var electionId = '#Model.ElectionId';
var profileId = '#Model.ProfileId';
$.ajax({
url: "Profile/Vote", // '#Html.Action("Vote","Profile")',
// data: { electionId: electionId, profileId: profileId },
dataType: "json",
type: "POST",
error: function (error) {
alert('An error occured, please try again! ');
},
success: function (data) {
if (data != null && data.success) {
alert("s1");
alert(data.url);
alert("s2");
window.location = data.url;
} else {
alert('An error occured, please try again. ');
}
}
});
return false;
});
and this is the html side code
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input id="btnRate" type="submit" class="btn btn-default" value="Vote !" />
</div>
</div>
when the detail form is loaded, automatically be invoked as clicked btnRate button. But i do not click..
and this is vote action in profilecontroller
// [HttpPost]
[ChildActionOnly]
public JsonResult Vote() //(int profileId, int electionId)
{
EvoteServicesProviderClient service = new EvoteServicesProviderClient();
// var result= service.createPolls(electionId, profileId);
// if(result ==1)
// return Json(new { success = true, url = "/Home/ProfileStatistic?electionId=" + electionId }, JsonRequestBehavior.AllowGet);
// else
// return Json(new { success = false, url = "/Home/ProfileStatistic?electionId=" + electionId }, JsonRequestBehavior.AllowGet);
return null;
}
even i do not click, vote function is invoked by ajax.. What is the reason?
edit: this is exception
An exception of type 'System.Web.HttpException' occurred in
System.Web.dll but was not handled in user code
Additional information: Error executing child request for handler
'System.Web.Mvc.HttpHandlerUtil+ServerExecuteHttpHandlerAsyncWrapper'.
I solved the problem.. very interesting ..
I just deleted the comment
// '#Html.Action("Vote","Profile")',
and it works good now..
this is the last part..
$(document).ready(function () {
$("#btnRate").click(function(e) {
alert("geldi");
alert("tık");
e.preventDefault();
var electionId = '#Model.ElectionId';
var profileId = '#Model.ProfileId';
$.ajax({
url: '#Url.Action("Vote","Profile")',
data: { electionId: electionId, profileId: profileId },
dataType: "json",
type: "POST",
error: function (error) {
alert('An error occured, please try again! ');
},
success: function (data) {
if (data != null && data.success) {
alert("s1");
alert(data.url);
alert("s2");
window.location = data.url;
} else {
alert('An error occured, please try again. ');
}
}
});
return false;
});
});
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<table id="tblAttachment"> </table>
<input id="btnSubmit" type="button" value="button" />
</form>
</body>
Dynamically inserting a FileUpload Control
<script>
$(document).ready(function () {
var MaxAttachment = 1;
$("#tblAttachment").append('<tr><td><input id=\"Attachment_' + MaxAttachment.toString() + '\" name=\"file\" type=\"file\" /><br><a class=\"MoreAttachment\">Additional Attachment</a></td></tr>');
$("#btnSubmit").on("click", UploadFile);
});
</script>
Sending Data to .ashx using Jquery
function UploadFile() {
var kdata = new FormData();
var i = 0;
//run through each row
$('#tblAttachment tr').each(function (i, row) {
var row = $(row);
var File = row.find('input[name*="file"]');
alert(File.val());
kdata.append('file-' + i.toString(), File);
i = i + 1;
});
sendFile("fUpload.ashx", kdata, function (datad) {
}, function () { alert("Error in Uploading File"); }, true);
}
On .ashx Count always Zero ??
public class fUpload : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
int k = context.Request.Files.Count;
context.Response.Write(UploadMultipleFiles());
}
Ajax Request
function sendFile(requestUrl, dataPayload, successfunc, errorfunc, synchronousMode) {
$.ajax({
url: requestUrl,
type: "POST",
dataType: "json",
contentType: false,
processData: false,
cache: false,
async: synchronousMode,
data: dataPayload,
success: successfunc,
error: errorfunc
});
}
Please Check .. where i m doing wrong
form tag having enctype="multipart/form-data" and each fileUPload control have uniue id and name attribute too
Thanks
You're sending a jQuery object, not a file ?
Shortened down, you're basically doing this
var kdata = new FormData();
var File = row.find('input[name*="file"]'); // jQuery object
kdata.append('file-0', File);
You need the files, not the jQuery objects
var kdata = new FormData();
var File = row.find('input[name*="file"]'); // jQuery object
var files = File.get(0).files[0]; // it not multiple
kdata.append('file-0', Files);