Commit 403359cf by Johannes Zellner

Add ui to create directories

1 parent 61e0b8e4
...@@ -49,6 +49,29 @@ ...@@ -49,6 +49,29 @@
</div> </div>
</div> </div>
<div class="modal fade" tabindex="-1" role="dialog" id="modalcreateDirectory">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">New Directory Name</h4>
</div>
<div class="modal-body">
<form v-on:submit.prevent="createDirectory(createDirectoryData)">
<div class="form-group">
<input type="text" class="form-control" v-model="createDirectoryData" placeholder="Name">
</div>
<button type="submit" style="display: none;"></button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" v-on:click="createDirectory(createDirectoryData)">Create</button>
</div>
</div>
</div>
</div>
<div class="container" v-show="busy" v-cloak> <div class="container" v-show="busy" v-cloak>
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
...@@ -126,7 +149,7 @@ ...@@ -126,7 +149,7 @@
</table> </table>
</div> </div>
<div class="col-lg-12" style="text-align: right;"> <div class="col-lg-12" style="text-align: right;">
<button class="btn btn-default btn-sm" v-on:click="">Create Directory</button> <button class="btn btn-default btn-sm" v-on:click="createDirectoryAsk()">Create Directory</button>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -79,9 +79,12 @@ function up() { ...@@ -79,9 +79,12 @@ function up() {
} }
function upload() { function upload() {
$(app.$els.upload).change(function () { $(app.$els.upload).on('change', function () {
app.busy = true; app.busy = true;
// detach event handler
$(app.$els.upload).off('change');
var file = app.$els.upload.files[0]; var file = app.$els.upload.files[0];
var path = encode(sanitize(app.path + '/' + file.name)); var path = encode(sanitize(app.path + '/' + file.name));
...@@ -123,6 +126,29 @@ function del(entry) { ...@@ -123,6 +126,29 @@ function del(entry) {
}); });
} }
function createDirectoryAsk() {
$('#modalcreateDirectory').modal('show');
app.createDirectoryData = '';
}
function createDirectory(name) {
app.busy = true;
var path = encode(sanitize(app.path + '/' + name));
superagent.put('/api/files' + path).query({ username: app.session.username, password: app.session.password, directory: true }).end(function (error, result) {
app.busy = false;
if (error) return console.error(error);
if (result.statusCode !== 201) return console.error('Error creating directory: ', result.statusCode);
app.createDirectoryData = '';
refresh();
$('#modalcreateDirectory').modal('hide');
});
}
var app = new Vue({ var app = new Vue({
el: '#app', el: '#app',
data: { data: {
...@@ -134,6 +160,7 @@ var app = new Vue({ ...@@ -134,6 +160,7 @@ var app = new Vue({
}, },
loginData: {}, loginData: {},
deleteData: {}, deleteData: {},
createDirectoryData: '',
entries: [] entries: []
}, },
methods: { methods: {
...@@ -144,7 +171,9 @@ var app = new Vue({ ...@@ -144,7 +171,9 @@ var app = new Vue({
up: up, up: up,
upload: upload, upload: upload,
delAsk: delAsk, delAsk: delAsk,
del: del del: del,
createDirectoryAsk: createDirectoryAsk,
createDirectory: createDirectory
} }
}); });
......
...@@ -54,6 +54,13 @@ function copyFile(source, target, cb) { ...@@ -54,6 +54,13 @@ function copyFile(source, target, cb) {
}); });
} }
function createDirectory(targetPath, callback) {
mkdirp(targetPath, function (error) {
if (error) return callback(error);
callback(null);
});
}
function getAbsolutePath(filePath) { function getAbsolutePath(filePath) {
var absoluteFilePath = path.resolve(path.join(gBasePath, filePath)); var absoluteFilePath = path.resolve(path.join(gBasePath, filePath));
...@@ -103,7 +110,8 @@ function get(req, res, next) { ...@@ -103,7 +110,8 @@ function get(req, res, next) {
function put(req, res, next) { function put(req, res, next) {
var filePath = req.params[0]; var filePath = req.params[0];
if (!req.files.file) return next(new HttpError(400, 'missing file')); if (!(req.files && req.files.file) && !req.query.directory) return next(new HttpError(400, 'missing file or directory'));
if ((req.files && req.files.file) && req.query.directory) return next(new HttpError(400, 'either file or directory'));
var absoluteFilePath = getAbsolutePath(filePath); var absoluteFilePath = getAbsolutePath(filePath);
if (!absoluteFilePath) return next(new HttpError(403, 'Path not allowed')); if (!absoluteFilePath) return next(new HttpError(403, 'Path not allowed'));
...@@ -111,10 +119,17 @@ function put(req, res, next) { ...@@ -111,10 +119,17 @@ function put(req, res, next) {
fs.stat(absoluteFilePath, function (error, result) { fs.stat(absoluteFilePath, function (error, result) {
if (error && error.code !== 'ENOENT') return next(new HttpError(500, error)); if (error && error.code !== 'ENOENT') return next(new HttpError(500, error));
debug('put', absoluteFilePath, req.files.file); debug('put', absoluteFilePath);
if (result && req.query.directory) return next(new HttpError(409, 'name already exists'));
if (result && result.isDirectory()) return next(new HttpError(409, 'cannot put on directories')); if (result && result.isDirectory()) return next(new HttpError(409, 'cannot put on directories'));
if (!result || result.isFile()) {
if (req.query.directory) {
return createDirectory(absoluteFilePath, function (error) {
if (error) return next(new HttpError(500, error));
next(new HttpSuccess(201, {}));
});
} else if (!result || result.isFile()) {
return copyFile(req.files.file.path, absoluteFilePath, function (error) { return copyFile(req.files.file.path, absoluteFilePath, function (error) {
if (error) return next(new HttpError(500, error)); if (error) return next(new HttpError(500, error));
next(new HttpSuccess(201, {})); next(new HttpSuccess(201, {}));
......
...@@ -12,7 +12,7 @@ function _mime(req) { ...@@ -12,7 +12,7 @@ function _mime(req) {
module.exports = function multipart(options) { module.exports = function multipart(options) {
return function (req, res, next) { return function (req, res, next) {
if (_mime(req) !== 'multipart/form-data') return res.status(400).send('Invalid content-type. Expecting multipart'); if (_mime(req) !== 'multipart/form-data') return next(null);
var form = new multiparty.Form({ var form = new multiparty.Form({
uploadDir: '/tmp', uploadDir: '/tmp',
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!