Add file/folder create support from dropdown menu

closes pterodactyl#126

Author: DaneEveritt

CHANGELOG.md

@@ -6,7 +6,8 @@ This project follows [Semantic Versioning](http://semver.org) guidelines.
 ## v0.5.0-pre.2 (Bodacious Boreopterus)
 
 ### Added
-* Adds support for file copying through the file manager. [#127](https://github.com/Pterodactyl/Panel/issues/127)
+* Added support for file copying through the file manager. [#127](https://github.com/Pterodactyl/Panel/issues/127)
+* Added support for creating new files and folders directly from the right-click dropdown menu.
 
 ### Changed
 * Support for sub-folders within the `getJavascript()` route for servers.

resources/views/server/files/list.blade.php

@@ -25,7 +25,7 @@
             <th style="width:15%">Size</th>
             <th style="width:20%">Last Modified</th>
         </tr>
-        <tr>
+        <tr id="headerTableRow" data-currentdir="{{ $directory['header'] }}">
             <th><i class="fa fa-folder-open"></i></th>
             <th colspan="3">
                 <code>/home/container{{ $directory['header'] }}</code>

resources/views/server/js/filemanager/actions.blade.php

@@ -29,6 +29,55 @@ class ActionsClass {
         this.element = undefined;
     }
 
+    folder() {
+        const nameBlock = $(this.element).find('td[data-identifier="name"]');
+        const currentName = decodeURIComponent(nameBlock.attr('data-name'));
+        const currentPath = decodeURIComponent(nameBlock.data('path'));
+
+        let inputValue = `${currentPath}${currentName}/`;
+        if ($(this.element).data('type') === 'file') {
+            inputValue = currentPath;
+        }
+        swal({
+            type: 'input',
+            title: 'Create Folder',
+            text: 'Please enter the path and folder name below.',
+            showCancelButton: true,
+            showConfirmButton: true,
+            closeOnConfirm: false,
+            showLoaderOnConfirm: true,
+            inputValue: inputValue
+        }, (val) => {
+            $.ajax({
+                type: 'POST',
+                headers: {
+                    'X-Access-Token': '{{ $server->daemonSecret }}',
+                    'X-Access-Server': '{{ $server->uuid }}'
+                },
+                contentType: 'application/json; charset=utf-8',
+                url: '{{ $node->scheme }}://{{ $node->fqdn }}:{{ $node->daemonListen }}/server/file/folder',
+                timeout: 10000,
+                data: JSON.stringify({
+                    path: val,
+                }),
+            }).done(data => {
+                swal.close();
+                Files.list();
+            }).fail(jqXHR => {
+                console.error(jqXHR);
+                var error = 'An error occured while trying to process this request.';
+                if (typeof jqXHR.responseJSON !== 'undefined' && typeof jqXHR.responseJSON.error !== 'undefined') {
+                    error = jqXHR.responseJSON.error;
+                }
+                swal({
+                    type: 'error',
+                    title: '',
+                    text: error,
+                });
+            });
+        });
+    }
+
     move() {
         const nameBlock = $(this.element).find('td[data-identifier="name"]');
         const currentName = decodeURIComponent(nameBlock.attr('data-name'));

resources/views/server/js/filemanager/contextmenu.blade.php

@@ -29,16 +29,27 @@ class ContextMenuClass {
         this.rightClick();
     }
 
-    makeMenu() {
+    makeMenu(parent) {
         $(document).find('#fileOptionMenu').remove();
         if (!_.isNull(this.activeLine)) this.activeLine.removeClass('active');
+
+        let newFilePath = $('#headerTableRow').attr('data-currentDir');
+        if (parent.data('type') === 'folder') {
+            const nameBlock = parent.find('td[data-identifier="name"]');
+            const currentName = decodeURIComponent(nameBlock.attr('data-name'));
+            const currentPath = decodeURIComponent(nameBlock.data('path'));
+            newFilePath = `${currentPath}${currentName}`;
+        }
         return '<ul id="fileOptionMenu" class="dropdown-menu" role="menu" style="display:none" > \
                     <li data-action="move"><a tabindex="-1" href="#"><i class="fa fa-arrow-right"></i> Move</a></li> \
                     <li data-action="copy"><a tabindex="-1" href="#"><i class="fa fa-clone"></i> Copy</a></li> \
                     <li data-action="rename"><a tabindex="-1" href="#"><i class="fa fa-pencil-square-o"></i> Rename</a></li> \
                     <li data-action="compress" class="hidden"><a tabindex="-1" href="#"><i class="fa fa-file-archive-o"></i> Compress</a></li> \
                     <li data-action="decompress" class="hidden"><a tabindex="-1" href="#"><i class="fa fa-expand"></i> Decompress</a></li> \
                     <li class="divider"></li> \
+                    <li data-action="file"><a href="/server/{{ $server->uuidShort }}/files/add/?dir=' + newFilePath + '" class="text-muted"><i class="fa fa-plus"></i> New File</a></li> \
+                    <li data-action="folder"><a tabindex="-1" href="#"><i class="fa fa-folder"></i> New Folder</a></li> \
+                    <li class="divider"></li> \
                     <li data-action="download" class="hidden"><a tabindex="-1" href="#"><i class="fa fa-download"></i> Download</a></li> \
                     <li data-action="delete" class="bg-danger"><a tabindex="-1" href="#"><i class="fa fa-trash-o"></i> Delete</a></li> \
                 </ul>';
@@ -48,7 +59,7 @@ class ContextMenuClass {
         $('#file_listing > tbody td').on('contextmenu', event => {
 
             const parent = $(event.target).closest('tr');
-            const menu = $(this.makeMenu());
+            const menu = $(this.makeMenu(parent));
 
             if (parent.data('type') === 'disabled') return;
             event.preventDefault();
@@ -102,6 +113,11 @@ class ContextMenuClass {
                 Actions.decompress();
             });
 
+            $(menu).find('li[data-action="folder"]').unbind().on('click', e => {
+                e.preventDefault();
+                Actions.folder();
+            });
+
             $(menu).find('li[data-action="download"]').unbind().on('click', e => {
                 e.preventDefault();
                 Actions.download();