AngularJS + SailsJS ng-file-upload

Question

could you recommend me an example of Sails.Js + Angular.js for upload files to the server and then views them. I've reviewed a lot of examples, but neither is suitable. When i try to download every time i get error in console:

XMLHttpRequest cannot load localhost:1337/analyzes/upload. Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains the invalid value ''. Origin localhost:3000 is therefore not allowed access.

part of my AngularJS controller (with ng-file-upload module):

    $scope.upload = function (file) {
    Upload.upload({
        url: AppSettings.serverUrl+'/analyzes/upload',
        data: {file: file}
    }).then(function (resp) {
        console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
    }, function (resp) {
        console.log('Error status: ' + resp.status);
    }, function (evt) {
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
    });
};

My HTML:

<div class="button" ngf-select="upload($file)">Upload on file select</div>

And my Sails.JS controller (also i have empty model): module.exports = {

  upload: function  (req, res) {
    req.file('analyzes').upload(function (err, files) {

      if (err)
        return res.serverError(err);

      return res.json({
        message: files.length + ' file(s) uploaded successfully!',
        files: files
      });
    });
  }
};

I feel that the source of the problem is that I use a separate URL to display website (localhost:3000) and other for Sails.Js (localhost:1337).

I'am using this https://github.com/jakemmarsh/angularjs-gulp-browserify-boilerplate for front end

And sory for my English.

Answer 1

You are correct; the problem has to do with your Sails app not allowing localhost:3000. Check out the documentation at http://sailsjs.org/documentation/reference/configuration/sails-config-cors .

Basically, you need to allow localhost:3000 through CORS. From the above documentation

'/foo/bar': {
  target: 'FooController.bar',
  cors: {
    origin: 'http://foobar.com,https://owlhoot.com',
    methods: 'GET,PUT,POST,OPTIONS,HEAD'
  }
}

where origin is http://localhost:3000 , in your case. And also don't forget to replace the endpoint route and target .