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:
Select files
Upload queue
Queue length: {{ uploader.queue.length }}
NameSizeProgressStatusActions
{{ item.file.name }}{{ item.file.size/1024/1024|number:2 }} MBUpload
Cancel
Remove
Queue progress:
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?
2056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
