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?
