Invalid 'HttpContent' instance provided. It does not have a content type header starting with 'multipart/'. Parameter name: content

Question

I am getting this error:

Invalid 'HttpContent' instance provided. It does not have a content type header starting with 'multipart/'. Parameter name: content

when I am trying to upload file through angularjs using FormData(). I don't know what I am doing wrong.

HTML code:

<form method="post" enctype="multipart/form-data" ng-model="myform">
      <input type="file" file-model="file1" name="file" /> Upload file
      <div style="margin-bottom: 12%; margin-top: 5%;">
        <div style="float: right;">
          <button class="btn btn-primary" ng-click="CreatePDF()">Save</button>
        </div>
      </div>
</form>

Angularjs code

$scope.CreatePDF = function () {

        var file = document.getElementsByName("file");
        var formData1 = new FormData();

        formData1.append('file', file[0].files[0], 'test.pdf');

        API_immigration.converttoBytes.filesBytes(formData1).then(function (res) {
          alert('hi uploaded');
        });
}

This is my service file calling API from angularjs

var converttoBytes = {
    filesBytes: function (p) {

      return $ajax.post('/api/immigration/application/getFileObj/dddd', p, {
        contentType: 'multipart / form - data'
       }
      );
    }

Here is my API written in asp.net:

[HttpPost]
[Route("getFileObj/{path}")]

public async Task<string> postuploadfile()
{
    var ctx = HttpContext.Current;
    var root = ctx.Server.MapPath("~/App_Data");
    var provider = new System.Net.Http.MultipartFormDataStreamProvider(root);

    try
    {
        // Read the form data.
        await Request.Content.ReadAsMultipartAsync(provider);

        // This illustrates how to get the file names.
        foreach (var file in provider.FileData)
        {
            var name = file.Headers.ContentDisposition.FileName;
            name = name.Trim('"');
            var localFileName = file.LocalFileName;
            var filepath = Path.Combine(root, name);
            File.Move(localFileName, filepath);
        }
    }
    catch (System.Exception e)
    {
    }
    return "Fileuploaded";
}

I have used $http service ,but still i am getting same error, here is my raw data from filddler.

POST /api/immigration/applicationtemplate/getFileObj/dddd HTTP/1.1
Host: localhost:31002
Connection: keep-alive 
Content-Length: 120145 
Content-Type: multipart / form - data 
Pragma: no-cache 
Cache-Control: no-cache Accept: / 
Origin: localhost:9002 
Authorization: bearer earer pJhzAZ1D_tnFCY 
Accept-Encoding: gzip, deflate, br 
Accept-Language: en-US,en;q=0.9 –

The `ng-model` directive does not work with `
` elements. With the AngularJS framework, use the $http service. The jQuery $.ajax method is not integrated with the AngularJS framework and its execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc. — georgeawg, Oct 09 '19 at 13:33
Hi George, thanks for reply,I have used $http service ,but still i am getting same error, here is my raw data from filddler. POST /api/immigration/applicationtemplate/getFileObj/dddd HTTP/1.1 Host: localhost:31002 Connection: keep-alive Content-Length: 120145 Content-Type: multipart / form - data Pragma: no-cache Cache-Control: no-cache Accept: / Origin: localhost:9002 Authorization: bearer earer pJhzAZ1D_tnFCY Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.9 — Dylan, Oct 10 '19 at 07:38

georgeawg · Answer 1 · 2019-10-10T12:00:59.963

When using the FormData API to POST files and data, it is important to set the Content-Type header to undefined.¹

var converttoBytes = {
    filesBytes: function (p) {
        var url = '/api/immigration/application/getFileObj/dddd';
        var config = { headers: { 'Content-Type': undefined } };
        return $http.post(url, p, config);
    }
}

By default the AngularJS framework uses content type application/json. By setting Content-Type: undefined, the AngularJS framework omits the content type header allowing the XHR API to set the content type. When sending a FormData object, the XHR API sets the content type to multipart/form-data with the proper boundaries and encoding.

For more information, see MDN Web API Reference - XHR Send method

Invalid 'HttpContent' instance provided. It does not have a content type header starting with 'multipart/'. Parameter name: content

1 Answers1