append files to FormData not work in angularjs

Question

I use angularjs to upload files and json object to nodejs server in single request. Then I get this console.log on firebug:

-----------------------------8791641017658 Content-Disposition: form-data; name="model" {"phone":"asasasa","description":"121212112","payment":"2121212121","shipping":"121221221","imageurl":"21212112","price":"212112212","status":"new"} -----------------------------8791641017658--

So, the name="file" does not appear here.

And the console.log(req.files) in nodejs server // print out "{}"

Please help, thank!

$scope.files = [];

        $scope.$on("fileSelected", function (event, args) {

        $scope.$apply(function () {            
            //add the file object to the scope's files collection
            $scope.files.push(args.file);
            console.log($scope.files);

        });
        });

    $scope.create = function() {
        $scope.seller_submit = {
            phone: this.phone,
            description: this.description,
            payment: this.payment,
            shipping: this.shipping,
            imageurl: this.imageurl,
            price: this.price,
            status: this.status
        };

        $http({
            method: 'POST',
            url: '/articles/'+ $routeParams.articleId,

            headers: { 'Content-Type': undefined },

            transformRequest: function (data) {
                var formData = new FormData();

                formData.append("model", angular.toJson(data.model));

                for (var i = 0; i < data.files; i++) {

                    formData.append("file" + i, data.files[i]);
                }
                return formData;
            },

            data: { model: $scope.seller_submit, files: $scope.files }

        }).
        success(function (data, status, headers, config) {
            alert("success!");
        }).
        error(function (data, status, headers, config) {
            alert("failed!");
        });

Answer 1

You could create a service for that

myApp.service('uploadsService', function($http) {   

    var code = '';
    var fileName = '';


    this.uploadFile = function(files) {


        var fd = new FormData();

        //Take the first selected file
        fd.append("image", files[0]);

        var promise =  $http.post('/uploads/uploadFile.json', fd, {
                withCredentials: true,
                headers: {'Content-Type': undefined },
                transformRequest: angular.identity
            }).then(function(response) {

            code = response.data.code;
            fileName = response.data.fileName;

            return{
                code: function() {
                    return code;
                },
                fileName: function() {
                    return fileName;
                }
            }; 
        });
        return promise;
    };

  });

So you could in your controller do something like:

    $scope.uploadFile = function(files) {

                    uploadsService.uploadFile(files).then(function(promise){

                        $scope.code = promise.code();
                        $scope.fileName = promise.fileName();
     });

   };

And in your view:

<input type="file" onchange="angular.element(this).scope().uploadFile(this.files)" ng-model="image">

Works for me :)