Good day everyone,
I'm trying to upload file using ajax from client side to server side (asp.net core) controller but I'm having a null value.
Here's my html and javascript codes:
<input type="file" id="myfile" class="required" />
<button type="button" class="btn btn-info" onclick="uploadcsvfile()">
<script>
function uploadcsvfile() {
var myfile= document.getElementById("myfile");
var formData = new FormData();
if (myfile.files.length > 0) {
for (var i = 0; i < myfile.files.length; i++) {
formData.append('file-' + i, myfile.files[i]);
}
}
$.ajax({
url: "/MyController/UploadFile/",
type: "POST",
dataType: "json",
data: formData,
contentType: false,
processData: false,
success: function(data){
},
error: function (data) {
}
})
}
</script>
Here's my controller that uses IFormFile
public async Task<JsonResult> UploadFile(IFormFile formData)
{
// do something here
}
Thank you in advance!
It is well explained here:
<form id="form" name="form" action="/uploader" enctype="multipart/form-data" method="post">
<div class="buttons">
<div class="upload-button">
<div class="label">Click me!</div>
<input id="files" name="files" type="file" size="1" multiple onchange="uploadFiles('files');" />
</div>
</div>
</form>
function uploadFiles(inputId) {
var input = document.getElementById(inputId);
var files = input.files;
var formData = new FormData();
for (var i = 0; i != files.length; i++) {
formData.append("files", files[i]);
}
$.ajax(
{
url: "/uploader",
data: formData,
processData: false,
contentType: false,
type: "POST",
success: function (data) {
alert("Files Uploaded!");
}
}
);
}
[HttpPost]
public async Task<IActionResult> Index(IList<IFormFile> files)
{
foreach (IFormFile source in files)
{
string filename = ContentDispositionHeaderValue.Parse(source.ContentDisposition).FileName.Trim('"');
filename = this.EnsureCorrectFilename(filename);
using (FileStream output = System.IO.File.Create(this.GetPathAndFilename(filename)))
await source.CopyToAsync(output);
}
return this.View();
}
private string EnsureCorrectFilename(string filename)
{
if (filename.Contains("\\"))
filename = filename.Substring(filename.LastIndexOf("\\") + 1);
return filename;
}
private string GetPathAndFilename(string filename)
{
return this.hostingEnvironment.WebRootPath + "\\uploads\\" + filename;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With