Files are not received when sending form data to the server - asp.net

Question

I am trying to send form data to my server (Asp.net server), but when debugging the server only the typed information is received, but the files are not there.
This is my html page: (http://pastebin.com/KZERsepn)
<template>
<ai-dialog>
<ai-dialog-body>
<div>
<span>character name</span>
<input type="text" value.bind="user.name" />
</div>
<div>
<span>Youtube url:</span>
<input type="text" value.bind="user.YoutubeUrl" />
</div>
<div>
<span>ProfileImage:</span>
<input type="file" file.bind="user.ProfileImage" />
</div>
<div>
<span>CoverImage:</span>
<input type="file" file.bind="user.CoverImage" />
</div>
</ai-dialog-body>
<ai-dialog-footer>
<button click.trigger="controller.cancel()">Cancel</button>
<button click.trigger="controller.ok(user)">Ok</button>
</ai-dialog-footer>
</ai-dialog>
and this is how i am posting the data:(http://pastebin.com/7bVHZthE)
createUser(user) {
let model = new FormData();
model.append('Name', user.Name);
model.append('YoutubeUrl', user.YoutubeUrl);
model.append('ProfileImage', user.ProfileImage);
model.append('CoverImage', user.CoverImage);
return this.client.fetch('/api/createUser', {
method: "post",
body: model,
headers: {
'Access-Controll-Allow-Origin': '*',
'Accept': 'application/json'
}
});
}
But only the user.name and user.youtubeurl properties are sent to the server.

Answer 1

To post files, you must use a multipart/form-data
The trick to posting a multipart/form-data is (rather unintuitively) to force the content-type header to false. So try this:
return this.client.fetch('/api/createUser', {
method: "post",
body: model,
headers: {
'Content-type': '', // this is where the magic happens
'Access-Control-Allow-Origin': '*',
'Accept': 'application/json'
}
});