Uploading files to Azure via web Api throws Unsupported Media type exception?

Question

I'm trying to upload files to azure through browser using Web Api and angular, I've followed this example: https://ppolyzos.com/2016/02/07/upload-a-file-to-azure-blob-storage-using-web-api/

I send the request from angular service (not sure if this is the right implementation!):

this.PostFiles = function (files) {
    var req = $http.post('/api/GENAccounts/UploadFile', files);
    return req;
}

and the files is an array of files selected by the user

<input type="file" ngf-select="uploadFiles($files, $invalidFiles)" multiple accept="image/*" ngf-max-height="1000" ngf-max-size="3MB" />

I even followed the same test described in the article by passing simple string via Postman, and it still throw the same error, and always this statement return true

if (!Request.Content.IsMimeMultipartContent("form-data"))
            {
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            }

In his implementation, he doesn't define the object POSTed in the web api which is unusual behavior to me. So how to pass the files to web API, and in any format that can pass this form-data test?

Have you solved this issue, any updates? – Bruce Chen Feb 22 '17 at 13:06 — Bruce Chen, Feb 22 '17 at 13:06

score 0 · Answer 1 · edited May 23 '17 at 12:00

According to your description, I have followed the code example you provided to build my Web API, I could make it work as expected on my side. When using Postman to test, you need to set content-type to form-data and data type to file as follows:

Based on your JavaScript code, you are using $http.post to upload your file(s) while Request.Content.IsMimeMultipartContent receives the specified content multipart/form-data in your Web API back-end.

Per my understanding, for a simple way, you could leverage Upload.upload() for multipart/form-data upload cross browser as follows:

HTML

<body ng-app="fileUpload" ng-controller="MyCtrl">
    <input type="file" ngf-select="uploadFiles($files)" ngf-multiple="true" ng-model="files" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-max-height="1000" ngf-max-size="3MB"/>
</body>

javascript

var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('MyCtrl', function ($scope, Upload) {
    $scope.uploadFiles = function (files) {
        if (files && files.length) {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                Upload.upload({
                    url: '/api/GENAccounts/UploadFile',
                    data: { file: file }
                }).then(function (resp) {
                    console.log('Success ' + resp.config.data.file.name + ' uploaded. Response: ' + resp.data);
                }, function (resp) {
                    console.log('Error status: ' + resp.status);
                }, function (evt) {
                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                    console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
                });
            }
        }
    };
});

Note: For more detailed samples, you could follow the usage samples from ng-file-upload.

Additionally, you need to change the _supportedMimeTypes MiME Types within the AzureStorageMultipartFormDataStreamProvider.cs as follows:

private readonly string[] _supportedMimeTypes = { "image/png", "image/jpeg", "image/jpg" };

Also, there is a case talking about how does Http file upload work, you could refer to it.

Uploading files to Azure via web Api throws Unsupported Media type exception?

1 Answers1