Angularjs $http post file and form data

Question

I have the below request in python

import requests, json, io

cookie = {}
payload = {"Name":"abc"}
url = "/test"
file = "out/test.json"

fi = {'file': ('file', open(file) )}
r = requests.post("http://192.168.1.1:8080" + url, data=payload, files=fi, cookies=cookie)
print(r.text)

which send a file, and form fields to the backend. How can I do the same (sending file + form fields) with Angular $http. Currently, I do like this, but not sure how to send the file too.

var payload = {"Name":"abc"};
$http.post('/test', payload)
    .success(function (res) {
    //success
});

Pavel Netesa · Accepted Answer · 2014-08-12 12:14:05Z

136

I had similar problem when had to upload file and send user token info at the same time. transformRequest along with forming FormData helped:

        $http({
            method: 'POST',
            url: '/upload-file',
            headers: {
                'Content-Type': 'multipart/form-data'
            },
            data: {
                email: Utils.getUserInfo().email,
                token: Utils.getUserInfo().token,
                upload: $scope.file
            },
            transformRequest: function (data, headersGetter) {
                var formData = new FormData();
                angular.forEach(data, function (value, key) {
                    formData.append(key, value);
                });

                var headers = headersGetter();
                delete headers['Content-Type'];

                return formData;
            }
        })
        .success(function (data) {

        })
        .error(function (data, status) {

        });

For getting file $scope.file I used custom directive:

app.directive('file', function () {
    return {
        scope: {
            file: '='
        },
        link: function (scope, el, attrs) {
            el.bind('change', function (event) {
                var file = event.target.files[0];
                scope.file = file ? file : undefined;
                scope.$apply();
            });
        }
    };
});

Html:

<input type="file" file="file" required />

answered Aug 12, 2014 at 12:14

Pavel Netesa

2,1021 gold badge16 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

CarbonDry Over a year ago

I agree this should be the accepted answer because it allows you to work with your own API where tokens might be necessary

Joseph Silber Over a year ago

Why are you adding a Content-Type header, then removing it in the interceptor?

Kareem Elshahawy Over a year ago

the removal of Content-Type after being set is to make sure that when transforming the file it's form-data and after then (after being ready to do the post request) it's a normal request with Content-Type: application/json

KyleUp Over a year ago

After much gnashing of teeth I got this to work (at least in chrome 48 and Angular 1.5.0 using .Net server side with HttpContext.Request.Files).You don't have to set the header to multipart/form-data, the XMLHttpRequest does that for you under the covers. Setting it can actually mess up the upload. use 'Content-Type': undefined you also don't have to delete the header. This allowed me to pick up the file server side with a .Net HttpContext.Request.Files API call

iGanja Over a year ago

This ALMOST works... transformRequest: angular.identity is all you need. You already have your data set in the data parameter. Set headers: { 'Content-Type': undefined } and you're done. Angular takes care of appending the boundry properly to the content type.

|

CountZero · Accepted Answer · 2017-08-22 12:48:41Z

I was unable to get Pavel's answer working as in when posting to a Web.Api application.

The issue appears to be with the deleting of the headers.

headersGetter();
delete headers['Content-Type'];

In order to ensure the browsers was allowed to default the Content-Type along with the boundary parameter, I needed to set the Content-Type to undefined. Using Pavel's example the boundary was never being set resulting in a 400 HTTP exception.

The key was to remove the code deleting the headers shown above and to set the headers content type to null manually. Thus allowing the browser to set the properties.

headers: {'Content-Type': undefined}

Here is a full example.

$scope.Submit = form => {
                $http({
                    method: 'POST',
                    url: 'api/FileTest',
                    headers: {'Content-Type': undefined},
                    data: {
                        FullName: $scope.FullName,
                        Email: $scope.Email,
                        File1: $scope.file
                    },
                    transformRequest: function (data, headersGetter) {
                        var formData = new FormData();
                        angular.forEach(data, function (value, key) {
                            formData.append(key, value);
                        });
                        return formData;
                    }
                })
                .success(function (data) {

                })
                .error(function (data, status) {

                });

                return false;
            }

Jason · Accepted Answer · 2013-09-12 20:50:36Z

5

I recently wrote a directive that supports native multiple file uploads. The solution I've created relies on a service to fill the gap you've identified with the $http service. I've also included a directive, which provides an easy API for your angular module to use to post the files and data.

Example usage:

<lvl-file-upload
    auto-upload='false'
    choose-file-button-text='Choose files'
    upload-file-button-text='Upload files'
    upload-url='http://localhost:3000/files'
    max-files='10'
    max-file-size-mb='5'
    get-additional-data='getData(files)'
    on-done='done(files, data)'
    on-progress='progress(percentDone)'
    on-error='error(files, type, msg)'/>

You can find the code on github, and the documentation on my blog

It would be up to you to process the files in your web framework, but the solution I've created provides the angular interface to getting the data to your server. The angular code you need to write is to respond to the upload events

angular
    .module('app', ['lvl.directives.fileupload'])
    .controller('ctl', ['$scope', function($scope) {
        $scope.done = function(files,data} { /*do something when the upload completes*/ };
        $scope.progress = function(percentDone) { /*do something when progress is reported*/ };
        $scope.error = function(file, type, msg) { /*do something if an error occurs*/ };
        $scope.getAdditionalData = function() { /* return additional data to be posted to the server*/ };

    });

edited Sep 12, 2013 at 20:50

answered Sep 12, 2013 at 13:32

Jason

15.9k3 gold badges51 silver badges73 bronze badges

1 Comment

Andrew Barber Over a year ago

This looks to be related and some decent info, but could you perhaps explain it a bit, and in particular relate it to the code that bsr has, and how yours solves their issue?

mrded · Accepted Answer · 2017-06-21 15:56:40Z

3

Please, have a look on my implementation. You can wrap the following function into a service:

function(file, url) {
  var fd = new FormData();

  fd.append('file', file);

  return $http.post(url, fd, {
    transformRequest: angular.identity,
    headers: { 'Content-Type': undefined }
  });
}

Please notice, that file argument is a Blob. If you have base64 version of a file - it can be easily changed to Blob like so:

fetch(base64).then(function(response) {
  return response.blob(); 
}).then(console.info).catch(console.error);

edited Jun 21, 2017 at 15:56

answered Jun 21, 2017 at 15:39

mrded

5,3982 gold badges40 silver badges38 bronze badges

Comments

Foo L · Accepted Answer · 2013-05-11 20:01:41Z

2

You can also upload using HTML5. You can use this AJAX uploader.

The JS code is basically:

  $scope.doPhotoUpload = function () {
    // ..
    var myUploader = new uploader(document.getElementById('file_upload_element_id'), options);
    myUploader.send();
    // ..
  }

Which reads from an HTML input element

<input id="file_upload_element_id" type="file" onchange="angular.element(this).scope().doPhotoUpload()">

edited May 11, 2013 at 20:01

answered May 10, 2013 at 16:11

Foo L

11.1k8 gold badges43 silver badges53 bronze badges

Comments

邱俊霖 · Accepted Answer · 2017-04-25 11:29:43Z

here is my solution:

// Controller
$scope.uploadImg = function( files ) {
  $scope.data.avatar = files[0];
}

$scope.update = function() {
  var formData = new FormData();
  formData.append('desc', data.desc);
  formData.append('avatar', data.avatar);
  SomeService.upload( formData );
}


// Service
upload: function( formData ) {
  var deferred = $q.defer();
  var url = "/upload"	;
  
  var request = {
    "url": url,
    "method": "POST",
    "data": formData,
    "headers": {
      'Content-Type' : undefined // important
    }
  };

  console.log(request);

  $http(request).success(function(data){
    deferred.resolve(data);
  }).error(function(error){
    deferred.reject(error);
  });
  return deferred.promise;
}


// backend use express and multer
// a part of the code
var multer = require('multer');
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, '../public/img')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + '.jpg');
  }
})

var upload = multer({ storage: storage })
app.post('/upload', upload.single('avatar'), function(req, res, next) {
  // do something
  console.log(req.body);
  res.send(req.body);
});

<div>
  <input type="file" accept="image/*" onchange="angular.element( this ).scope().uploadImg( this.files )">
  <textarea ng-model="data.desc" />
  <button type="button" ng-click="update()">Update</button>
</div>

Community · Accepted Answer · 2017-05-23 12:34:39Z

0

There are other solutions you can look into http://ngmodules.org/modules/ngUpload as discussed here file uploader integration for angularjs

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered May 10, 2013 at 14:27

Mark Nadig

5,1664 gold badges40 silver badges51 bronze badges

1 Comment

csga5000 Over a year ago

While considering those options is wise, this is not true, there are other ways to do it. See Foo L's answer or Pavel Netesa's

Allen Wahlberg · Accepted Answer · 2016-08-01 22:48:20Z

In my solution, i have

$scope.uploadVideo = function(){
    var uploadUrl = "/api/uploadEvent";


    //obj with data, that can be one input or form
    file = $scope.video;
    var fd = new FormData();


    //check file form on being
    for (var obj in file) {
        if (file[obj] || file[obj] == 0) {
            fd.append(obj, file[obj]);
        }
    }

    //open XHR request
    var xhr = new XMLHttpRequest();


    // $apply to rendering progress bar for any chunking update
    xhr.upload.onprogress = function(event) {
        $scope.uploadStatus = {
            loaded: event.loaded,
            total:  event.total
        };
        $scope.$apply();
    };

    xhr.onload = xhr.onerror = function(e) {
        if (this.status == 200 || this.status == 201) {

            //sucess

            $scope.uploadStatus = {
                loaded: 0,
                total:  0
            };


            //this is for my solution
            $scope.video = {};
            $scope.vm.model.push(JSON.parse(e.currentTarget.response));
            $scope.$apply();

        } else {
           //on else status
        }
    };

    xhr.open("POST", uploadUrl, true);

    //token for upload, thit for my solution
    xhr.setRequestHeader("Authorization", "JWT " + window.localStorage.token);


    //send
    xhr.send(fd); 
};

}

Collectives™ on Stack Overflow

Angularjs $http post file and form data

8 Answers 8

11 Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

11 Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related