IFormFile Refuses to upload from vue

Question

I'm using vuetify's v-file-input component

<v-row>
    <v-file-input label="File input"
                    v-model="file" />
    <v-btn depressed
            color="primary"
            @click="uploadClicked">
        Upload
    </v-btn>
</v-row>

Trying to post the file with vue-resource

this.$http.post(`${this.api}FileManager/Folder/${folderId}/File`, this.file);

I can see that this.file is populated with the selected file, but for some reason I can't get the file to appear in my endpoint in FileManagerController:

[HttpPost("Folder/{folderId}/File")]
public async Task<IActionResult> UploadFile(Guid folderId, [FromBody]IFormFile file)
{
    // process the file
}

I get this error:

{"errors":{"":["Could not create an instance of type Microsoft.AspNetCore.Http.IFormFile. Type is an interface or abstract class and cannot be instantiated. Path '', line 1, position 2."]},"type":"https://tools.ietf.org/html/rfc7231#section-6.5.1","title":"One or more validation errors occurred.","status":400,"traceId":"|6d17d263-464344720128162b."}

What I tried:

1. Replacing [FromBody] with [FromForm] : Endpoint is hit but file is empty and so is Request.Form.Files
2. Removing [FromBody] results in HTTP error 'method not allowed'

What is going on here?

Answer 1

Thanks to CodeCaster I found that this is the correct configuration

let formData = new FormData();
formData.append('file', this.file);
this.$http.post(`${this.api}FileManager/Folder/${folderId}/File`, formData);

Controller

[HttpPost("Folder/{folderId}/File")]
public async Task<IActionResult> UploadFile(Guid folderId, IFormFile file)
{
    // process the file
}

Note that [FromBody] is not required and in fact causes a 415 if not removed