How to send a file to asp.net web api with angular?

Question

Basically what i want is to send a file to mi web api and then upload it to azure. this code is triggered when i choose the file, but i'm not sure if it is the correct one.

 $scope.fileNameChanged = function(files) { var formD = new FormData(); var reader = new FileReader(); reader.onload = function(e) { $scope.$apply(function() { $scope.files = reader.result; }); }; formD.append("file",files.files[0]); reader.readAsText(files.files[0]); $http({ method: 'POST', headers: {'Content-Type': undefined}, data:{formD}, transformRequest : angular.identity, url: 'http://localhost:12199/api/FacturacionWeb/PostFormData' }).success(function(data) { }).then(function(dat) { }) } 

 <input type="file" multiple onchange="angular.element(this).scope().fileNameChanged(this)"> <div>Import file...</div> <div> <textarea ng-model="files" accept=".txt" readonly="true" style="width:99%; height:500px" disabled></textarea> 

ASP.NET C# CODE (backend) this code is what i get in the backend but always get "UnsupportedMediaType" i dont know if the problem is with angular or with asp help me please!!

   public async Task<HttpResponseMessage> PostFormData(HttpRequestMessage request)
    {
        // Check if the request contains multipart/form-data.
        if (!Request.Content.IsMimeMultipartContent())
        {
            throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
        }

        string root = HttpContext.Current.Server.MapPath("~/App_Data");
        var provider = new MultipartFormDataStreamProvider(root);

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

            // This illustrates how to get the file names.
            foreach (MultipartFileData file in provider.FileData)
            {
                Trace.WriteLine(file.Headers.ContentDisposition.FileName);
                Trace.WriteLine("Server file path: " + file.LocalFileName);
            }
            return Request.CreateResponse(HttpStatusCode.OK);
        }
        catch (System.Exception e)
        {
            return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
        }
    }

Answer 1

Your angularjs code is fine. You need to update your asp.net code like as-

public async Task<HttpResponseMessage> PostFormData(HttpRequestMessage request)
    {
        // Check if the request contains multipart/form-data.
       if (!request.Content.IsMimeMultipartContent("form-data"))
            {
            throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
        }

        string root = HttpContext.Current.Server.MapPath("~/App_Data");
        var provider = new MultipartFormDataStreamProvider(root);

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

            // This illustrates how to get the file names.
            foreach (MultipartFileData file in provider.FileData)
            {
                Trace.WriteLine(file.Headers.ContentDisposition.FileName);
                Trace.WriteLine("Server file path: " + file.LocalFileName);
            }
            return Request.CreateResponse(HttpStatusCode.OK);
        }
        catch (System.Exception e)
        {
            return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
        }
    }