Received files from axios in c# mvc - asp.net-mvc

Question

I trying, searching since several hours and no success
I've a mvc/vue/quasar application where I try to upload a photo from a button
In my cshtml file
<q-input type="file" ref="myFileAvatar" v-on:change="handleFileUpload()" v-model="avatar" style="display:none" accept="image/*"/>
<q-btn round color="primary" icon="cloud_upload" #click="getAvatar" ></q-btn >
I send file from my js, method section
getAvatar: function () {this.$refs.myFileAvatar.$el.click()},
handleFileUpload() {
//const files = Array.from(this.avatar).filter((file) => { return file.size < 102500 && file.type.substring(0, 6) == 'image/' });
let formData = new FormData();
formData.append('ownerID', this.profildata.ownerid);
formData.append('file', this.avatar);
axios.post('/forms/default/uploadProfilImage', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
.then(function (response) {
//TODO
});
}
And in my controler
public JsonNetResult uploadProfilImage(Guid ownerID, HttpPostedFileBase file)
{
resultModel resultUpload = new resultModel();
if (this.Request.Files != null && this.Request.Files.Count == 1)//My old version with q-uploader
{
}
else { resultUpload.status = resultMessage.resultValue.error; resultUpload.message = "Oups, ou sont les fichiers"; }
return JsonNetResult.JsonNet(resultUpload);
}
Problem : file is null even if in developper mode in chrome, I see file is a FileList
ownerID is good... I try several type instead of HttpPostedFileBase but nothing (execpt object give a array of string...)
thanks for your help

Answer 1

finally...
It's a type of parameter problem like I thougth
handleFileUpload() {
if (this.avatar[0].size < 102500 && this.avatar[0].type.substring(0, 6) == 'image/') {
let formData = new FormData();
formData.append('file', this.avatar[0]);//One file
formData.append('ownerID', this.profildata.ownerid);
let self = this
axios.post('/forms/default/uploadProfilImage', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
.then(function (response) {
if (response.data.status == 0) { self.profildata.idFichierAvatar = response.data.model.id; } else { self.showNotifError(response.data.message); }
this.avatar = '';
});
}
else { this.showNotifError("L'image ne répond pas aux critères");}
}
and mvc side
[HttpPost]
public JsonNetResult uploadProfilImage(HttpPostedFileBase file,Guid ownerID )
{
resultModel resultUpload = new resultModel();
if (file != null)
{
}
else { resultUpload.status = resultMessage.resultValue.error; resultUpload.message = "Oups, ou sont les fichiers"; }
return JsonNetResult.JsonNet(resultUpload);
}
##UPDATE : Multiple##
And for multiple files
in q-input add multiple property
in server side :
[HttpPost]
public JsonNetResult uploadProfilImage(HttpPostedFileBase[] files,Guid ownerID )
And To send files from js
handleFile() {
let formData = new FormData();
for (var i = 0; i < this.newfiles.length; i++) {
let fichier = this.newfiles[i];
formData.append('files[' + i + ']', fichier);
}
formData.append('ownerID', this.ownerid);
let self = this
axios.post('/files/joinFile/uploadFiles', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
.then(function (response) {
if (response.data.status == 0) { self.files = response.data.model; } else { self.showNotifError(response.data.message); }
this.newfiles = '';
});
}
I hope it's full for everyone who have same problem :-)