Unable to send file data to nodejs server from client side

Question

i am creating simple file upload module in Angular js(v1.3.4). I am using Nodejs server side. I am using https://github.com/danialfarid/angular-file-upload library. It looks pretty straight forward but i am stuck at the basic step.

index.html

<div ng-controller="FileUploadController">   
        <input type="file" ng-file-select="onFileSelect($files)" multiple>  
</div>

controller.js

  $scope.onFileSelect = function($files) {

                for (var i = 0; i < $files.length; i++) {
                    var file = $files[i];
                    $scope.upload = $upload.upload({
                        url: 'http://localhost:8080/file-transfer/123/upload', 

                       // headers: {'Content-Type': undefined},
                       //     withCredentials: true,
                       //     transformRequest: angular.identity,
                       file: file       
                    }).progress(function(evt) {
                            console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                        }).success(function(data, status, headers, config) {
                            // file is uploaded successfully
                            console.log(data);
                        });
                }

On Server side, I am using multer for multipart . client is sending the request to server but not sending the file data.

app.all('/file-transfer/:id/upload', function (req, res) {
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Origin', req.headers.origin);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
    console.log(req.body);     // prints - {}
    console.log(req.files);   // prints -  {}
});

Request Header -

Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Access-Control-Request-Me...    POST
Cache-Control   no-cache
Connection  keep-alive
Host    localhost:8080
Origin  http://localhost
Pragma  no-cache
User-Agent  Mozilla/5.0 (Windows NT 6.2; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0

I used the same code as in example of repository.Maybe i am missing something.

Note - Server codes working fine when i use simple html 5 form without angular or if i use $http.post.

EDIT : It was CORS problem, Read the comments of answer.

Answer 1

I'm using same library, the only thing different in my client side code is I have the method: 'POST' header being sent:

            $scope.upload = $upload.upload({
                url: '/api/uploads', //upload.php script, node.js route, or servlet url
                // method: 'POST' or 'PUT',
                method: 'POST',
                // headers: {'header-key': 'header-value'},
                // withCredentials: true,
                data: { type: 'profileImage' },
                file: file//, // or list of files: $files for html5 only
                // fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file
                /* customize file formData name ('Content-Desposition'), server side file variable name.
                 Default is 'file' */
                //fileFormDataName: myFile, //or a list of names for multiple files (html5).
                /* customize how data is added to formData. See #40#issuecomment-28612000 for sample code */
                //formDataAppender: function(formData, key, val){}
            }).progress(function (e) {
                console.log('percent: ' + parseInt(100.0 * e.loaded / e.total));
            }).success(function (data, status, headers, config) {
                // file is uploaded successfully
                console.log(data);
                $scope.user.profileImages = data;
                $rootScope.$emit('message', { text: "Your profile image has been updated." });
            }).error(function(data){
                if ( data.error === 'UnsupportedFiletype' ) {
                    $rootScope.$emit('message', { type: 'error', text: "Woops, we don't support that filetype." });
                }
            });

Edit: The solution was to just properly serve a cors header:

npm install cors and app.use(cors()) .