Unable to use http-server wiki example
You are serving html files on http://localhost:9000 and NodeJS application on http://localhost:27372; therefore you have CORS issue. (This issue is not related to angularjs though). You have to either enable CORS for NodeJS or serve your all application in the same domain.
Possible solutions:
1- Enabling CORS in NodeJS server
You can enable CORS in your server side by specifying allowed origins in response header. These lines would enable requests to your application from all domains. (add this to beginning of the function definition.)
var server = http.createServer(function(req, res) { res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); // the rest of the method ...}Enabling CORS for all domain is not always a good decision, please also check this.
2- Serving your html files from NodeJS application
Here with following additions you would serve your html files from NodeJS server. (You don't need to use the other server anymore.)
var serveStatic = require('serve-static');var finalhandler = require('finalhandler');//...var serve = serveStatic('./path/to/your/static/folder');var server = http.createServer(function(req, res) { //... var done = finalhandler(req, res); serve(req, res, done);});I would also recommend you to use ExpressJS for richer server capabilities instead of vanilla node.js http server.
3- Providing a proxy connection from your html files server to nodejs app
I don't know what you are using as a server for static html files but it is possible to have a proxy between your static server to NodeJS application server.
EDIT 1
Here is a basic implementation for option 2- Serving your html files from NodeJS application.
In this example I used ExpressJS. Client side static files are served in public folder, for post request to /api/upload url would upload the file. Here is the server code app.js:
var express = require('express'), path = require('path'), multiparty = require('connect-multiparty'), multipartyMiddleware = multiparty(), PORT = process.env.PORT || 27372;var app = express();app.use(express.static(path.join(__dirname, 'public')));app.post('/api/upload', multipartyMiddleware, function(req, res) { var file = req.files.file; console.log(file.name); console.log(file.type); console.log(file.path);});var server = app.listen(PORT, function() { var host = server.address().address; var port = server.address().port; console.log('the App listening at http://%s:%s', host, port);}); Now public folder is served to root url. Here is the client file public/index.html:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Upload example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"></head><body> <div class="container"> <div> <h1>Upload example</h1> <hr /> <div ng-app="fileUpload" ng-controller="MyCtrl"> <button type="button" class="btn btn-default" ngf-select ng-model="file">Upload using model $watch</button> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> <script src="http://rawgit.com/danialfarid/ng-file-upload/master/dist/ng-file-upload.min.js"></script> <script> var app = angular.module('fileUpload', ['ngFileUpload']); app.controller('MyCtrl', ['$scope', 'Upload', function($scope, Upload) { $scope.$watch('file', function() { var file = $scope.file; if (!file) { return; } Upload.upload({ url: 'api/upload', file: file }).progress(function(evt) { var progressPercentage = parseInt(100.0 * evt.loaded / evt.total); console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name); }).success(function(data, status, headers, config) { console.log('file ' + config.file.name + 'uploaded. Response: ' + data); }).error(function(data, status, headers, config) { console.log('error status: ' + status); }) });; }]); </script></body></html>Now you can run node app and try it on localhost:27372 with your browser.
(Here is the gist version: https://gist.github.com/aksakalli/1a56072f066d65248885)
EDIT 2
Here is a basic implementation for option 1- Enabling CORS in NodeJS server. I am using cors package to handle header configuration, now app.js code would be like this:
var express = require('express'), multiparty = require('connect-multiparty'), cors = require('cors'), multipartyMiddleware = multiparty(), app = express(), PORT = process.env.PORT || 27372; app.use(cors());app.post('/api/upload', multipartyMiddleware, function(req, res) { var file = req.files.file; console.log(file.name); console.log(file.type); console.log(file.path);});var server = app.listen(PORT, function() { var host = server.address().address; var port = server.address().port; console.log('the App listening at http://%s:%s', host, port);});
For the first error:
OPTIONS http://127.0.0.1:27372/upload 400 (Bad Request) angular.js:10514The ng-file-upload Upload service which you are using removes the Content-Type header, as seen here, before the request.But the parse method from multiparty seems to require it.If you are working from the given example from the wiki, I would advise you to also use express and multiparty as middleware, as it is stated in that example.
Your app.js would look like that:
var express = require('express'),// Requires multipartymultiparty = require('connect-multiparty'),multipartyMiddleware = multiparty();var app = express();app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); next();});// Example endpointapp.post('/upload', multipartyMiddleware, function(req, res) { // We are able to access req.files.file thanks to // the multiparty middleware var file = req.files.file; console.log(file.type); console.log(file.name);});app.listen(27372);For the second error:It's a CORS problem as mentioned. The proposed app.js should allow CORS because of the following lines:
app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); next();});