I'm working on web file browser with upload function. I'm using Angular File Upload directive and angular web file browser.

First off I've downloaded file web browser and configured it.

Second I've downloaded file upload directive and did everything step by step and my page works perfect

but when I'm trying to upload something I'm getting

FileUploader.js:479 POST http://localhost:3000/ 404 (Not Found)

I understand that FileUploader.js can't find upload.php file, but I put it to the root folder and provided path:

  var uploader = $scope.uploader = new FileUploader({
            url: 'upload.php'
        });

this is how it looks:

angular/app.js:

(function() {
  'use strict';

  window.app = angular.module('fileBrowserApp', ['ngRoute', 'jsTree.directive', 'angularFileUpload']).
  config(['$routeProvider',
    function($routeProvider) {
      $routeProvider.
      when('/', {
        templateUrl: '../partials/home.html',
        controller: 'HomeCtrl'
      }).
      otherwise({
        redirectTo: '/home'
      });
    }
  ]);
    window.app.directive('attachable', function(FileUploader) {
        return {
            restrict: 'E',
            replace: true,
            templateUrl:'../partials/upload.html',
            link: function(scope, element, attrs) {
                scope.uploader = new FileUploader();
            }
        }
    })
    ;
}());

server/app.js

   (function() {
'use strict';

var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var fs = require('fs-extra');

var routes = require('./routes.js');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(cookieParser());

app.use(express.static(path.join(__dirname, '../client')));

app.use('/', routes);

app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function() {
    console.log('Express server listening on port ' + server.address().port);
    });

    module.exports = app;
}());

angular/controller.js

(function() {
  'use strict';

  app.controller('HomeCtrl', ['$scope', 'FetchFileFactory', 'FileUploader',
    function($scope, FetchFileFactory, FileUploader, $upload) {

        // ****** file upload *******

            var uploader = $scope.uploader = new FileUploader({
        url: '/upload',
        success: function (fileItem) {
            $scope.alerts.push({
                type: 'success',
                msg: '"' + fileItem.file.name + '" uploaded'
            });
        },
        error: function (fileItem) {
            $scope.alerts.push({
                type: 'danger',
                msg: '"' + fileItem.file.name + '" failed'
            });
        }
    });


        // FILTERS

        uploader.filters.push({
            name: 'customFilter',
            fn: function(item /*{File|FileLikeObject}*/, options) {
                return this.queue.length < 10;
            }
        });

        // CALLBACKS

        uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
            console.info('onWhenAddingFileFailed', item, filter, options);
        };
        uploader.onAfterAddingFile = function(fileItem) {
            console.info('onAfterAddingFile', fileItem);
        };
        uploader.onAfterAddingAll = function(addedFileItems) {
            console.info('onAfterAddingAll', addedFileItems);
        };
        uploader.onBeforeUploadItem = function(item) {
            console.info('onBeforeUploadItem', item);
        };
        uploader.onProgressItem = function(fileItem, progress) {
            console.info('onProgressItem', fileItem, progress);
        };
        uploader.onProgressAll = function(progress) {
            console.info('onProgressAll', progress);
        };
        uploader.onSuccessItem = function(fileItem, response, status, headers) {
            console.info('onSuccessItem', fileItem, response, status, headers);
        };
        uploader.onErrorItem = function(fileItem, response, status, headers) {
            console.info('onErrorItem', fileItem, response, status, headers);
        };
        uploader.onCancelItem = function(fileItem, response, status, headers) {
            console.info('onCancelItem', fileItem, response, status, headers);
        };
        uploader.onCompleteItem = function(fileItem, response, status, headers) {
            console.info('onCompleteItem', fileItem, response, status, headers);
        };
        uploader.onCompleteAll = function() {
            console.info('onCompleteAll');
        };

        console.info('uploader', uploader);

        // ****** file browser *******

      $scope.fileViewer = 'Please select a file to view its contents';

      $scope.tree_core = {

        multiple: false,  // disable multiple node selection

        check_callback: function (operation, node, node_parent, node_position, more) {
            // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
            // in case of 'rename_node' node_position is filled with the new node name

            if (operation === 'move_node') {
                return false;   // disallow all dnd operations
            }
            return true;  // allow all other operations
        }
      };

      $scope.nodeSelected = function(e, data) {
        var _l = data.node.li_attr;
        if (_l.isLeaf) {
          FetchFileFactory.fetchFile(_l.base).then(function(data) {
            var _d = data.data;
            if (typeof _d == 'object') {

              ////
              _d = JSON.stringify(_d, undefined, 2);
            }
            $scope.fileViewer = _d;
          });
        } else {

          //.html//
          $scope.$apply(function() {
            $scope.fileViewer = 'Please select a file to view its contents';
          });
        }
      };


    }
  ]);

}());

Upload.html:

<div ng-if="uploader">

    <div class="container">
        <div class="row">
        <div class="col-md-3">
        <h3>Select files</h3>
        <input type="file" nv-file-select="" uploader="uploader"/>
        </div>
        <div class="col-md-9" style="margin-bottom: 40px">

        <h3>Upload queue</h3>
        <p>Queue length: {{ uploader.queue.length }}</p>

        <table class="table">
        <thead>
        <tr>
        <th width="50%">Name</th>
        <th ng-show="uploader.isHTML5">Size</th>
        <th ng-show="uploader.isHTML5">Progress</th>
        <th>Status</th>
        <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in uploader.queue">
        <td><strong>{{ item.file.name }}</strong></td>
        <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
        <td ng-show="uploader.isHTML5">
        <div class="progress" style="margin-bottom: 0;">
        <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
        </div>
        </td>
        <td class="text-center">
        <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
        <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
        <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
        </td>
        <td nowrap>
        <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
        <span class="glyphicon glyphicon-upload"></span> Upload
        </button>
        <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancel
        </button>
        <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
        <span class="glyphicon glyphicon-trash"></span> Remove
        </button>
        </td>
        </tr>
        </tbody>
        </table>

        <div>
        <div>
        Queue progress:
        <div class="progress" style="">
        <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
        </div>
        </div>
        <!--<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">-->
        <!--<span class="glyphicon glyphicon-upload"></span> Upload all-->
        <!--</button>-->
        <!--<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">-->
        <!--<span class="glyphicon glyphicon-ban-circle"></span> Cancel all-->
        <!--</button>-->
        <!--<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">-->
        <!--<span class="glyphicon glyphicon-trash"></span> Remove all-->
        <!--</button>-->
        </div>
        </div>
        </div>
    </div>

</div>

route.js

(function() {

  'use strict';
  var express = require('express');
  var router = express.Router();
  var fs = require('fs');
  var path = require('path');

  /* GET home page. */
  router.get('/', function(req, res) {
    res.render('index');
  });

  /* Serve the Tree */
  router.get('/api/tree', function(req, res) {
    var _p;
    if (req.query.id == 1) {
      _p = path.resolve(__dirname, '..', 'node_modules');
      processReq(_p, res);

    } else {
      if (req.query.id) {
        _p = req.query.id;
        processReq(_p, res);
      } else {
        res.json(['No valid data found']);
      }
    }
  });

  /* Serve a Resource */
  router.get('/api/resource', function(req, res) {
    res.send(fs.readFileSync(req.query.resource, 'UTF-8'));
  });

  function processReq(_p, res) {
    var resp = [];
    fs.readdir(_p, function(err, list) {
      for (var i = list.length - 1; i >= 0; i--) {
        resp.push(processNode(_p, list[i]));
      }
      res.json(resp);
    });
  }

  function processNode(_p, f) {
    var s = fs.statSync(path.join(_p, f));
    return {
      "id": path.join(_p, f),
      "text": f,
      "icon" : s.isDirectory() ? 'jstree-custom-folder' : 'jstree-custom-file',
      "state": {
        "opened": false,
        "disabled": false,
        "selected": false
      },
      "li_attr": {
        "base": path.join(_p, f),
        "isLeaf": !s.isDirectory()
      },
      "children": s.isDirectory()
    };
  }

  module.exports = router;

}());

Where is my mistake? I appreciate any help.

I used this example and take out my upload.php at all, fixed server/app.j s and controller.js , but still getting same error

Updated

I put this code into routes.js

var multer  =   require('multer');
var storage =   multer.diskStorage({
    destination: function (req, file, callback) {
        callback(null, './upload');
    },
    filename: function (req, file, callback) {
        callback(null, file.fieldname + '-' + Date.now());
    }
});
var upload = multer({ storage : storage}).single('test');

router.post('/',function(req,res){
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });
});

Now post returns 200, but nothing appears in folder "upload". Are there any ideas, what's wrong now?

I'm working on web file browser with upload function. I'm using Angular File Upload directive and angular web file browser.

First off I've downloaded file web browser and configured it.

Second I've downloaded file upload directive and did everything step by step and my page works perfect

but when I'm trying to upload something I'm getting

FileUploader.js:479 POST http://localhost:3000/ 404 (Not Found)

I understand that FileUploader.js can't find upload.php file, but I put it to the root folder and provided path:

  var uploader = $scope.uploader = new FileUploader({
            url: 'upload.php'
        });

this is how it looks:

angular/app.js:

(function() {
  'use strict';

  window.app = angular.module('fileBrowserApp', ['ngRoute', 'jsTree.directive', 'angularFileUpload']).
  config(['$routeProvider',
    function($routeProvider) {
      $routeProvider.
      when('/', {
        templateUrl: '../partials/home.html',
        controller: 'HomeCtrl'
      }).
      otherwise({
        redirectTo: '/home'
      });
    }
  ]);
    window.app.directive('attachable', function(FileUploader) {
        return {
            restrict: 'E',
            replace: true,
            templateUrl:'../partials/upload.html',
            link: function(scope, element, attrs) {
                scope.uploader = new FileUploader();
            }
        }
    })
    ;
}());

server/app.js

   (function() {
'use strict';

var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var fs = require('fs-extra');

var routes = require('./routes.js');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(cookieParser());

app.use(express.static(path.join(__dirname, '../client')));

app.use('/', routes);

app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function() {
    console.log('Express server listening on port ' + server.address().port);
    });

    module.exports = app;
}());

angular/controller.js

(function() {
  'use strict';

  app.controller('HomeCtrl', ['$scope', 'FetchFileFactory', 'FileUploader',
    function($scope, FetchFileFactory, FileUploader, $upload) {

        // ****** file upload *******

            var uploader = $scope.uploader = new FileUploader({
        url: '/upload',
        success: function (fileItem) {
            $scope.alerts.push({
                type: 'success',
                msg: '"' + fileItem.file.name + '" uploaded'
            });
        },
        error: function (fileItem) {
            $scope.alerts.push({
                type: 'danger',
                msg: '"' + fileItem.file.name + '" failed'
            });
        }
    });


        // FILTERS

        uploader.filters.push({
            name: 'customFilter',
            fn: function(item /*{File|FileLikeObject}*/, options) {
                return this.queue.length < 10;
            }
        });

        // CALLBACKS

        uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
            console.info('onWhenAddingFileFailed', item, filter, options);
        };
        uploader.onAfterAddingFile = function(fileItem) {
            console.info('onAfterAddingFile', fileItem);
        };
        uploader.onAfterAddingAll = function(addedFileItems) {
            console.info('onAfterAddingAll', addedFileItems);
        };
        uploader.onBeforeUploadItem = function(item) {
            console.info('onBeforeUploadItem', item);
        };
        uploader.onProgressItem = function(fileItem, progress) {
            console.info('onProgressItem', fileItem, progress);
        };
        uploader.onProgressAll = function(progress) {
            console.info('onProgressAll', progress);
        };
        uploader.onSuccessItem = function(fileItem, response, status, headers) {
            console.info('onSuccessItem', fileItem, response, status, headers);
        };
        uploader.onErrorItem = function(fileItem, response, status, headers) {
            console.info('onErrorItem', fileItem, response, status, headers);
        };
        uploader.onCancelItem = function(fileItem, response, status, headers) {
            console.info('onCancelItem', fileItem, response, status, headers);
        };
        uploader.onCompleteItem = function(fileItem, response, status, headers) {
            console.info('onCompleteItem', fileItem, response, status, headers);
        };
        uploader.onCompleteAll = function() {
            console.info('onCompleteAll');
        };

        console.info('uploader', uploader);

        // ****** file browser *******

      $scope.fileViewer = 'Please select a file to view its contents';

      $scope.tree_core = {

        multiple: false,  // disable multiple node selection

        check_callback: function (operation, node, node_parent, node_position, more) {
            // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
            // in case of 'rename_node' node_position is filled with the new node name

            if (operation === 'move_node') {
                return false;   // disallow all dnd operations
            }
            return true;  // allow all other operations
        }
      };

      $scope.nodeSelected = function(e, data) {
        var _l = data.node.li_attr;
        if (_l.isLeaf) {
          FetchFileFactory.fetchFile(_l.base).then(function(data) {
            var _d = data.data;
            if (typeof _d == 'object') {

              //http://stackoverflow.com/a/7220510/1015046//
              _d = JSON.stringify(_d, undefined, 2);
            }
            $scope.fileViewer = _d;
          });
        } else {

          //http://jimhoskins.com/2012/12/17/angularjs-and-apply.html//
          $scope.$apply(function() {
            $scope.fileViewer = 'Please select a file to view its contents';
          });
        }
      };


    }
  ]);

}());

Upload.html:

<div ng-if="uploader">

    <div class="container">
        <div class="row">
        <div class="col-md-3">
        <h3>Select files</h3>
        <input type="file" nv-file-select="" uploader="uploader"/>
        </div>
        <div class="col-md-9" style="margin-bottom: 40px">

        <h3>Upload queue</h3>
        <p>Queue length: {{ uploader.queue.length }}</p>

        <table class="table">
        <thead>
        <tr>
        <th width="50%">Name</th>
        <th ng-show="uploader.isHTML5">Size</th>
        <th ng-show="uploader.isHTML5">Progress</th>
        <th>Status</th>
        <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in uploader.queue">
        <td><strong>{{ item.file.name }}</strong></td>
        <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
        <td ng-show="uploader.isHTML5">
        <div class="progress" style="margin-bottom: 0;">
        <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
        </div>
        </td>
        <td class="text-center">
        <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
        <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
        <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
        </td>
        <td nowrap>
        <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
        <span class="glyphicon glyphicon-upload"></span> Upload
        </button>
        <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancel
        </button>
        <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
        <span class="glyphicon glyphicon-trash"></span> Remove
        </button>
        </td>
        </tr>
        </tbody>
        </table>

        <div>
        <div>
        Queue progress:
        <div class="progress" style="">
        <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
        </div>
        </div>
        <!--<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">-->
        <!--<span class="glyphicon glyphicon-upload"></span> Upload all-->
        <!--</button>-->
        <!--<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">-->
        <!--<span class="glyphicon glyphicon-ban-circle"></span> Cancel all-->
        <!--</button>-->
        <!--<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">-->
        <!--<span class="glyphicon glyphicon-trash"></span> Remove all-->
        <!--</button>-->
        </div>
        </div>
        </div>
    </div>

</div>

route.js

(function() {

  'use strict';
  var express = require('express');
  var router = express.Router();
  var fs = require('fs');
  var path = require('path');

  /* GET home page. */
  router.get('/', function(req, res) {
    res.render('index');
  });

  /* Serve the Tree */
  router.get('/api/tree', function(req, res) {
    var _p;
    if (req.query.id == 1) {
      _p = path.resolve(__dirname, '..', 'node_modules');
      processReq(_p, res);

    } else {
      if (req.query.id) {
        _p = req.query.id;
        processReq(_p, res);
      } else {
        res.json(['No valid data found']);
      }
    }
  });

  /* Serve a Resource */
  router.get('/api/resource', function(req, res) {
    res.send(fs.readFileSync(req.query.resource, 'UTF-8'));
  });

  function processReq(_p, res) {
    var resp = [];
    fs.readdir(_p, function(err, list) {
      for (var i = list.length - 1; i >= 0; i--) {
        resp.push(processNode(_p, list[i]));
      }
      res.json(resp);
    });
  }

  function processNode(_p, f) {
    var s = fs.statSync(path.join(_p, f));
    return {
      "id": path.join(_p, f),
      "text": f,
      "icon" : s.isDirectory() ? 'jstree-custom-folder' : 'jstree-custom-file',
      "state": {
        "opened": false,
        "disabled": false,
        "selected": false
      },
      "li_attr": {
        "base": path.join(_p, f),
        "isLeaf": !s.isDirectory()
      },
      "children": s.isDirectory()
    };
  }

  module.exports = router;

}());

Where is my mistake? I appreciate any help.

I used this example and take out my upload.php at all, fixed server/app.j s and controller.js , but still getting same error

Updated

I put this code into routes.js

var multer  =   require('multer');
var storage =   multer.diskStorage({
    destination: function (req, file, callback) {
        callback(null, './upload');
    },
    filename: function (req, file, callback) {
        callback(null, file.fieldname + '-' + Date.now());
    }
});
var upload = multer({ storage : storage}).single('test');

router.post('/',function(req,res){
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });
});

Now post returns 200, but nothing appears in folder "upload". Are there any ideas, what's wrong now?

• javascript
• php
• angularjs
• node.js
• file-upload

• what is the contents of routes.js? – jshawl Commented Apr 14, 2016 at 15:33
• @jessh, updated please check – Anton Commented Apr 14, 2016 at 15:42
• whoa, you have an upload.php on your node.js server? that... doesn't seem like a good idea. Should probably replace that with a node route. I see you created a node /upload route, but i don't see where you've pointed the plugin at it. – Kevin B Commented Apr 14, 2016 at 17:54
• @KevinB yeah I already understood that php with node is not good idea. Thank you for references. Could you explain, what kind of plugin do you mean? my terminal doesn't show me that I have any problems with plugins.. – Anton Commented Apr 14, 2016 at 18:52
• I called "angular file upload" a plugin. – Kevin B Commented Apr 14, 2016 at 19:09

1 Answer 1

The error is POST http://localhost:3000/ 404 (Not Found)

You don't have a post route for /

You can create one like so:

router.post('/', function(req, res) { // do something w/ req.body or req.files });

But also, I recommend using either express or upload.php

To use express, you'll need to update your angular FileUploader url as well