Upload files and other data from Angular 7 app to Asp Core Web Api 2.1.1

Question

I’m having a problem uploading files using Angular 7 to API written in c# Asp Core 2.1. Searching the web I found several examples uploading the file only, but I need to upload the file and in the same request pass other data filled by the user. I created a model to receive this data typed by the user:

public class MinhaViewModel{

   public int UsuarioId { get; set; }

   public string Descricao { get; set; }
}

And the action that should receive the data typed and the file was like this:

[HttpPost]
[Route("Publicar")]
public async Task<IActionResult> PostDocumentoUsuario([FromForm] MinhaViewModel viewModel, IFormFile file){
    //save file to path and viewModel to database
}

Already in Angular I wrote the following code:

publicaArquivoUsuario(dadosUsuario):Observable<any>{
   var data  = new FormData();
   data.append('usuarioId', dadosUsuario.usuarioId);
   data.append('descricao', dadosUsuario.descricao);
   data.append('file', dadosUsuario.file); //dadosUsuario.file é do tipo File

   return this.http.post("urlApi", data, httpOptions);
}

Using the interface of Swagger the request works well, but making the request by Angular always have as a return Erro 500, where the action is not called. I have specified in the request header 'Content-Type':'multipart/form-data'.

Answer 1

I use ng2-file-upload (https://github.com/valor-software/ng2-file-upload), but I believe you need to put everything in the same model, see my example:

Uploaded the file and additional data (using ng2-file-upload, but it’s the same as your code):

  this.uploader.onBuildItemForm = (fileItem: any, form: any)=>{
        form.append('teste1', 'texto teste 1');
        form.append('teste2', 'texto teste 2');
        return {fileItem, form};
    }

Front-End:

Receiving in the backend:

    [Route("TesteUpload")]
    [HttpPost()]
    public async Task<IActionResult> TesteUpload([FromForm]Modal modal)
    {
        SendPreProposalCommand cmd = new SendPreProposalCommand(modal.file.FileName, Path.GetExtension(modal.file.FileName), modal.file);
        return await _mediator.Send(cmd) ? (IActionResult)Ok() : BadRequest();

    }

    public class Modal {
        public string Teste1 { get; set; }
        public string Teste2 { get; set; }
        public IFormFile file { get; set; }
    }

Watch:

In your case just change the back-end to:

Model:

public class MinhaViewModel{

   public int UsuarioId { get; set; }

   public string Descricao { get; set; }

   public IFormFile file { get; set; }
}

Action:

[HttpPost]
[Route("Publicar")]
public async Task<IActionResult> PostDocumentoUsuario([FromForm] MinhaViewModel viewModel){
    //save file to path and viewModel to database
}