CODEWITHSUNDEEP
javascripthttpangularjspostmime
Per Quested Aronsson
Per Quested Aronsson

Reputation: 12120

How to construct a multipart MIME request and POST it using AngularJS' $http method?

How do I construct a multipart MIME request and POST it to a server API using AngularJS $http method?

I am trying to upload an image to a server. The binary data of the picture should be part of the body of the request, done using the POST method and multipart MIME. The rest of the query parameters can be sent as query string parameters, or as other parts in the multipart MIME. Here's a capture of what a request should look like:

POST https://webservice.platform.com/Service/V1/Service.ashx?Pictures_ProfilePhoto_Add HTTP/1.1
PlatformSDK: xxxyyyzzz
Host: webservice.platform.com
Content-Type: multipart/form-data; boundary=---------------------------8d084109e6bc7e4
Content-Length: 1789
Expect: 100-continue


-----------------------------8d084109e6bc7e4
Content-Disposition: form-data; name="ApplicationName"

[email protected] - Sample App
-----------------------------8d084109e6bc7e4
Content-Disposition: form-data; name="ApplicationPassword"

xxxxxnnnnnrrrqqqwwwssss
-----------------------------8d084109e6bc7e4
Content-Disposition: form-data; name="UserToken"

AABBCCDDEEFFGG
-----------------------------8d084109e6bc7e4
Content-Disposition: form-data; name="ApplicationTag"


-----------------------------8d084109e6bc7e4
Content-Disposition: form-data; name="bytesFullPhotoData"; filename="bytesFullPhotoData"
Content-Type: application/octet-stream

�����JFIF��x�x�����C�   

-----------------------------8d084109e6bc7e4--

Upvotes: 2

Views: 3518

Answers (1)

cilerler
cilerler

Reputation: 9420

The following code will get the result you asked for but you should use directive approach as explained in following link http://odetocode.com/blogs/scott/archive/2013/07/05/a-file-input-directive-for-angularjs.aspx

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>How to construct a multipart MIME request and POST it using AngularJS' $http method?</title>
</head>
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
    <div id="appRoot">
        <div ng-controller="TestCtrl">
            <p>
                <input type="text" placeholder="Name" ng-model="applicationName" />
                <br />
                <input type="password" placeholder="Password" ng-model="applicationPassword" />
                <br />
                <input type="text" placeholder="Token" ng-model="userToken" />
                <br />
                <input type="text" placeholder="Tag" ng-model="applicationTag" />
                <br />
                <input type="file" onchange="angular.element(this).scope().fileInputChanged(this);" id="fileInput" />
            </p>
            <button type="button" ng-click="uploadDocuments()">Upload</button>
        </div>
    </div>

    <script type='text/javascript'>
        'use strict';

        var app = angular.module('app', []);

        app.controller('TestCtrl', function ($scope, $http) {
            $scope.filesToUpload = null;

            $scope.fileInputChanged = function (element) {
                $scope.$apply(function (scope) {
                    scope.fileToUpload = element.files[0];
                });
            };

            $scope.uploadDocuments = function () {
                var formData = new FormData();
                formData.append("ApplicationName", $scope.applicationName);
                formData.append("ApplicationPassword", $scope.applicationPassword);
                formData.append("UserToken", $scope.userToken);
                formData.append("ApplicationTag", $scope.applicationTag);
                formData.append("BytesFullPhotoData", $scope.fileToUpload);


                $http({
                    method: 'POST',
                    url: '/api/Image/Upload', //!++ Set your own location
                    // if you set Content-Type, ; boundary= won't be in header so set undefined which will force the browser to fill
                    //x headers: { 'Content-Type': 'multipart/form-data' },
                    headers: {
                        'Content-Type': undefined
                    },
                    data: formData,
                    transformRequest: function (data) {
                        return data;
                    }
                }).success(uploadComplete).error(uploadFailed);
            };

            function uploadComplete(data, status, headers, config) {
                $scope.filesToUpload = null;
                var fileInput = $('#fileInput');
                fileInput.replaceWith(fileInput = fileInput.clone(true));
                console.log(data);
            }

            function uploadFailed(data, status, headers, config) {
                console.log('Upload failed!');
            }

        });

        angular.element(document).ready(function () {
            angular.bootstrap(document.getElementById('appRoot'), ['app']);
        });
    </script>
</body>
</html>

Upvotes: 1

Related Questions