Add ui to create directories

app/index.html

@@ -49,6 +49,29 @@
         </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="row">
             <div class="col-lg-12">
@@ -126,7 +149,7 @@
                 </table>
             </div>
             <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>

app/js/app.js

@@ -79,9 +79,12 @@ function up() {
 }
 
 function upload() {
-    $(app.$els.upload).change(function () {
+    $(app.$els.upload).on('change', function () {
         app.busy = true;
 
+        // detach event handler
+        $(app.$els.upload).off('change');
+
         var file = app.$els.upload.files[0];
         var path = encode(sanitize(app.path + '/' + file.name));
 
@@ -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({
     el: '#app',
     data: {
@@ -134,6 +160,7 @@ var app = new Vue({
         },
         loginData: {},
         deleteData: {},
+        createDirectoryData: '',
         entries: []
     },
     methods: {
@@ -144,7 +171,9 @@ var app = new Vue({
         up: up,
         upload: upload,
         delAsk: delAsk,
-        del: del
+        del: del,
+        createDirectoryAsk: createDirectoryAsk,
+        createDirectory: createDirectory
     }
 });
 

src/files.js

@@ -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) {
     var absoluteFilePath = path.resolve(path.join(gBasePath, filePath));
 
@@ -103,7 +110,8 @@ function get(req, res, next) {
 function put(req, res, next) {
     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);
     if (!absoluteFilePath) return next(new HttpError(403, 'Path not allowed'));
@@ -111,10 +119,17 @@ function put(req, res, next) {
     fs.stat(absoluteFilePath, function (error, result) {
         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.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) {
                 if (error) return next(new HttpError(500, error));
                 next(new HttpSuccess(201, {}));

src/multipart.js

@@ -12,7 +12,7 @@ function _mime(req) {
 
 module.exports = function multipart(options) {
     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({
             uploadDir: '/tmp',