Uploading a file with ng-file-upload directive to a sails.js server

Question

I'm attempting to upload a file to a sails.js application server using this directive: ng-file-upload

My client side to upload an already selected image is this:

$upload.upload({
        url:'upload/item-image',
        headers:{
            'Content-Type': 'multipart/form-data'
        },
        data:{blah:'blah'},
        file: $scope.uploadFile,
        fileName:$scope.uploadFile.name
    }).success(function(data){
        console.log(data);
    }).error(function(err){
        console.log(err);
    });

And my sails.js controller method that handles the upload on the server starts like this:

upload: function (req, res) {
    req.file('item-image').upload(function (err, files) {
        if (err)
            return res.serverError(err);
        if(!files.length)
            return res.serverError('No files received for upload.');

        var file = files[0];
   ...
   }
...
}

However, while the server function is being called, and the json data on the body exists, no files are being found by req.file('no matter what put here') callback.

Thanks in advance.

I'm not familiar with sails but I had a similar situaion with express, I ended up by configuring a middleware to handle post/file on the request, I used busboy, maybe you can find a similar approach for sails — pedrommuller
– pedrommuller, Commented Sep 22, 2014 at 15:12
I'm guessing that you're not giving req.file() the right argument, namely the name of the field that the files are being uploaded under. It's definitely not item-image. Have you tried req.file('file')? — sgress454
– sgress454, Commented Sep 22, 2014 at 17:40
While I managed to find that out for myself eventually, yours is the correct solution, @sgress454 . Please write it as a full answer so I can mark it as such. — SirDemon
– SirDemon, Commented Sep 22, 2014 at 20:02
Also, @sgress454, as you seem to be a core contributor to sails.js, I would like to take a moment to tell you I love you :) . — SirDemon
– SirDemon, Commented Sep 22, 2014 at 20:07

sgress454 · Accepted Answer · 2014-09-22 20:22:10Z

The argument to req.file needs to be the name of the field in the request where Sails should look for the uploaded files. If you're doing a simple HTML form with something like:

<input type="file" name="myFileField" />

then in your controller code you would have:

req.file('myFileField').upload(...);

With uploader widgets like the ng-file-upload widget referenced in this question, it can sometimes be a little tricky to figure out what that field name is. In this case it's hidden in the usage instructions:

//fileFormDataName: myFile, // or a list of names for multiple files (html5). 
                            // Default is 'file'

So you can set fileFormDataName to change the upload field name, or else it defaults to file.

If you can't find the field name in the docs or by inspecting the HTML, the easiest thing to do is just do an upload (even if it's unsuccessful) and inspect the network request using the developer tools in Chrome:

enter image description here

This is from the Angular file upload demo page. You can see in the lower right where it says name="myFile"; that's what you're looking for. In this case the file field is called myFile.

Jose Miguel Ledón · Accepted Answer · 2017-02-14 10:45:24Z

0

one important thing, if you want to process more than one file in your backend using:

req.file('files').upload({...});

you need to add the arrayKey: '' parameter in your Upload.upload({}) like this:

Upload.upload({
   url: 'http://localhost:1337/uploads',
   arrayKey: '',
   data: {
    files: files
   }

answered Feb 14, 2017 at 10:45

Jose Miguel Ledón

3097 silver badges18 bronze badges

Collectives™ on Stack Overflow

Uploading a file with ng-file-upload directive to a sails.js server

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related