Angular /.NET Core API - System.InvalidOperationException: 'Incorrect Content-Type: application/form-data'

Question

When I try to POST a pdf from my Angular 9 WebApp to my .NET Core API 3.+ the following error gets thrown:

"System.InvalidOperationException: 'Incorrect Content-Type: application/form-data'"

When I use Postman and form-data (select file: pdf) it works perfectly. However I can't make it work with Angular. Any advice?

(I generate PDF's with jsPDF in Angular because it is easy and I don't want to store them in a database. I store the QRCodeString for the ticket and so on, but not the entire pdf file. This method is only for sending a pdf in an e-mail, so it makes me wonder if should use the .NET API in the first place. Still, I want to understand this error.).

C#

[Authorize]
[HttpPost("{batchId}/send/{toEmailAddress}")]
public ActionResult SendTicket([FromRoute] long batchId, [FromRoute] string toEmailAddress)
{
    MimeMessage message = new MimeMessage();

    MailboxAddress from = new MailboxAddress("someName", "something@gmail.com");
    MailboxAddress to = new MailboxAddress($"{toEmailAddress}");

    message.From.Add(from);
    message.To.Add(to);
    message.Subject = "someSubject";

    BodyBuilder builder = new BodyBuilder();
    builder.HtmlBody = "<h1>Hi!</h1>";

    //The Request.Form.Files is where the error gets thrown!
    foreach (var file in Request.Form.Files)
    {
        Image img = new Image();
        img.ImageTitle = file.FileName;

        MemoryStream ms = new MemoryStream();
        file.CopyTo(ms);
        img.ImageData = ms.ToArray();

        builder.Attachments.Add("PDF", img.ImageData, new ContentType("application", "pdf"));

        ms.Close();
        ms.Dispose();
    }

    message.Body = builder.ToMessageBody();

    SmtpClient client = new SmtpClient();
    client.Connect("smtp.gmail.com", 587, false);
    client.Authenticate("username", "password"); //Temporarily hardcoded
    client.Send(message);
    client.Disconnect(true);
    client.Dispose();

    return Ok();
}

Angular "api.service.ts"

sendBatch = (batchId: number, toEmailAddress: string, formData: FormData) => {
    let reqHeader = new HttpHeaders({ 
      'Content-Type': 'application/form-data',
      'Authorization': 'Bearer ' + this.token.idToken
    });
    return this.http.post<any>(`${environment.apiUrl}/api/batches/${batchId}/send/${toEmailAddress}`, formData, {headers: reqHeader});
}

Angular "batches.component.ts"

sendPdf = () => {
    //...
    const formData = new FormData();
    formData.append('pdf', doc);

    this.apiService.sendBatch(this.batchId, "something@gmail.com", formData).subscribe((data)=>{
      console.log(data);
    });
}

Answer 1

application/form-data is not a valid MIME type.

I think you might be confusing application/x-www-form-urlencoded and multipart/form-data

Stick with one. I see you want to add a part with a pdf file. The correct MIME type for that would be multipart/form-data .