Vuejs multiples file upload uploading just 1 file at the time - vue.js

Question

I'm working on a VueJS Application and I'm using net core as backend,
I have a component with an upload function that is working but not as expected, for example, if i chose to upload 3 files it would upload just the first out of 3.
My HTML
<div class="container">
<div class="large-12 medium-12 small-12 cell">
<label>
Files
<input type="file" name="file" ref="files" multiple v-on:change="fileChange($event.target.files)" />
</label>
<v-btn outline color="primary" dark v-on:click="upload()">Submit</v-btn>
</div>
</div>
Part of my script
export default {
name: 'Profile',
data() {
return {
records: [],
application: [],
profile: [],
history: [],
userValues: [],
dialog: false,
notifications: false,
sound: true,
widgets: false,
files: new FormData()
};
},
methods: {
});
}
And my Controller
[Produces("application/json")]
[Route("api/[controller]")]
public class UploadController : Controller
{
private IHostingEnvironment _hostingEnvironment;
public UploadController(IHostingEnvironment hostingEnvironment)
{
_hostingEnvironment = hostingEnvironment;
}
{
file.CopyTo(stream);
}
}
return Json("Upload Successful.");
}
catch (System.Exception ex)
{
return Json("Upload Failed: " + ex.Message);
}
}
}
Also along with the files, I would like to pass email: this.profile.email as a parameter from my vue.
Like I said it is working but just one file at the time.

Answer 1

var file = Request.Form.Files[0]; That will pop off only the first file from your request. Instead, you need to check for
Instead access your files in a loop:
foreach(uploadedFile in Request.Form.Files) {
}