How to POST file upload using axios to ASP.NET Controller? - asp.net

Question

I render image uploader in html using this function.
which correctly display image in page. How should I post this FileReader to controller?
showCoverImage(e) {
var file = e.target.files[0];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
return;
}
var img = document.getElementById("thumbnail");
img.file = file;
const fileName = document.querySelector('#cover-image .file-name');
fileName.textContent = file.name;
var reader = new FileReader();
reader.onload = (function (aImg) {
return function (e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
I have controller method for upload using IFromFIle. It receives IFromFIle as parameter.
[HttpPost("/upload/coverImage")]
public async Task<IActionResult> uploadEditorImage(IFormFile upload)
{
var fileName = upload.FileName;
var path = Path.Combine(_mainDirectory, "images");
var pathPath = Path.Combine(path, fileName);
int isUpload = 1;
string errorMsg = string.Empty;
try
{
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
var stream = new FileStream(pathPath, FileMode.Create);
await upload.CopyToAsync(stream);
await stream.FlushAsync();
return new JsonResult(new {uploaded:1});
}
Upload call using axios. It posts to controller IFromFile as null.
onCoverImageUpload() {
this.loading = true;
const formData = new FormData();
formData.append("file", this.selectedCoverImage);
let config = {
headers: {
"Content-Type": "multipart/form-data"
}
};
axios.post('/upload/coverImage', formData, config)
.then(res => {
console.log(res);
});
}

Answer 1

First, ensure you could get the file by this.selectedCoverImage.
Second, the name is inconsistent. Change the name file in the formData to upload
formData.append("upload", this.selectedCoverImage);

Answer 2

Finally I changed my controller implementation. Now working.
[HttpPost("/upload/coverImage")]
public async Task<IActionResult> uploadEditorImage()
{
var upload = Request.Form.Files[0];
var fileName = upload.FileName;
var path = Path.Combine(_mainDirectory, "images");
var pathPath = Path.Combine(path, fileName);
string errorMsg = string.Empty;
try {
if (!Directory.Exists(path)) {
Directory.CreateDirectory(path);
}
var stream = new FileStream(pathPath, FileMode.Create);
await upload.CopyToAsync(stream);
await stream.FlushAsync();
return new JsonResult(new {uploaded:1});
}