I have been working with an Ajax function that is supposed to handle file upload, but I am encountering some issues. Despite dragging and dropping the file, nothing seems to happen with the Ajax. Upon inspecting the properties on the page, I can see that the file exists in my JavaScript function, but it doesn't get sent to the controller. The Index Controller does not receive any file properties in the parameters when I debug it. Moreover, the Ajax does not display any success or failure alert messages.
My ultimate goal is to extract and parse the data from the uploaded file.
JavaScript
function sendFile(file) {
$.ajax({
type: "POST",
url: "HomeController/Index", // the method we are calling
contentType: "application/json; charset=utf-8",
data: { filename: file.name, fileType: file.type, fileSize: file.size },
dataType: "json",
success: function(result) {
alert('Yay! It worked!');
// Or if you are returning something
alert('I returned... ' + result.WhateverIsReturning);
},
error: function(result) {
alert('Oh no :(');
}
});
Output(
"<p>File information: <strong>" + file.name +
"</strong> type: <strong>" + file.type +
"</strong> size: <strong>" + file.size +
"</strong> bytes</p>"
);
}
AJAX
$.ajax({
type: "POST",
url: "HomeController/Index", // the method we are calling
contentType: "application/json; charset=utf-8",
data: { filename: file.name, fileType: file.type, fileSize: file.size },
dataType: "json",
success: function(result) {
alert('Yay! It worked!');
// Or if you are returning something
alert('I returned... ' + result.WhateverIsReturning);
},
error: function(result) {
alert('Oh no :(');
}
});
C#
public IActionResult Index(string fileName, string fileType, int fileSize)
{
ViewBag.Environments = _configHelper.GetEnvironments();
var model = new HomeViewModel { Environment = "DEV" };
return View(model);
}
CSHTML
<div class="form-group col-md-12">
<label>Company Ids:</label>
<div id="filedrag"><textarea class="form-control" rows="5" id="textAreaCompanyIDs" placeholder="Drop Files Here"></textarea>
</div>
</div>