0
281
ViewsHow to send the file name and a file from Ajax to my controller in one ajax request?
There is an input(text) in my page so users can insert the name of the file and upload the file itself, then press on Upload button.
I want to send the selected file and its name from input(text) to my controller in one ajax request.
How does it work ?
Here is the HTML Code:
<!--This is my upload section-->
<div class="custom-file col-md-4">
<input type="file" class="custom-file-input" id="theFile" required="">
<label class="custom-file-label" for="theFile"></label>
</div>
<!--This is my input section-->
<div class="col-sm-3">
<div class="form-group">
<label for="fileName">Enter the file name: </label>
<input type="text" class="form-control" id="fileName" placeholder="">
</div>
</div>
Here is what I tried for Ajax Code which doesn't work:
var formData = new FormData();
formData.append('upload', $('#questionFile')[0].files[0]);
$.ajax({
url:'the url of my controller is here',
type: 'POST',
data: {
'file' : formData,
'fileName' : $("#fileName").val()
},
cache: false,
processData: false,
contentType: false
})
Here is my method in my controller:
[HttpPost("getFile")]
[AllowAnonymous]
public IActionResult getFile(IFormFile file,string fileName)
{
//This is a method in my service project which uploads file
SaveQuestionFile(file, fileName);
return Ok("Uploaded");
}
·
Juan Pablo Isaza
2 answers
Answer question0
In Jquery pass the file using FormData
var fileData = new FormData();
var fileUpload = $("#fileId").get(0).files;
fileData.append("FILE", fileUpload[0]);
$.ajax({
type: "POST",
contentType: false,
processData: false,
url: "url here",
data: fileData,
success: function (result) {
},
error: function (data) {
},
complete: function () {
}
});
In C# get file from request and data which is appended
public IActionResult getFile()
{
List<IFormFile> files = (List<IFormFile>)Request.Form.Files;
//if multiple
foreach (IFormFile file in files)
{
string fileName = file.FileName;
}
}
·
Juan Pablo Isaza
Report
0
You need to add a file which name is file,and add a FileName which name is fileName to formData,so that you can get the file and filename in action:
var formData = new FormData();
formData.append('file', $('#theFile').get(0).files[0]);
formData.append('fileName', $("#fileName").val());
$.ajax({
type: "POST",
url: "the url of my controller is here",
data: formData,
processData: false,
contentType: false,
success: function (data) {
}
});
result:
·
Juan Pablo Isaza
Report
Answer question