🎉 Add support for uploading files from file listing! 🎉

closes pterodactyl#22

Author: DaneEveritt

public/themes/default/css/pterodactyl.css

@@ -285,3 +285,25 @@ li.btn.btn-default.pill:active,li.btn.btn-default.pill:focus,li.btn.btn-default.
 #consoleThrottled:hover {
     opacity: 1;
 }
+
+.hasFileHover {
+    border: 2px dashed #0087F7;
+    border-radius: 5px;
+    margin: 0;
+    opacity: 0.5;
+}
+
+.hasFileHover * {
+    pointer-events: none;
+}
+
+td.has-progress {
+    padding: 0px !important;
+    border-top: 0px !important;
+}
+.progress.progress-table-bottom {
+    margin: 0 !important;
+    height:5px !important;
+    padding:0;
+    border:0;
+}

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

@@ -27,6 +27,7 @@
     @parent
     {!! Theme::js('js/vendor/async/async.min.js') !!}
     {!! Theme::js('js/vendor/lodash/lodash.js') !!}
+    {!! Theme::js('js/vendor/upload/client.min.js') !!}
 @endsection
 
 @section('content')
@@ -43,7 +44,7 @@
             <div class="ajax_loading_box"><i class="fa fa-refresh fa-spin" id="position_me"></i></div>
         </div>
     </div>
-    <div class="row">
+    <div class="row" id="upload_box">
         <div class="col-md-12" id="load_files"></div>
         <div class="col-md-12">
             <div class="panel panel-default">
@@ -63,6 +64,124 @@
 <script>
 $(window).load(function () {
     $('.server-files').addClass('active');
+    @can('upload-files', $server)
+        var notifyUploadSocketError = false;
+        var uploadSocket = io('{{ $node->scheme }}://{{ $node->fqdn }}:{{ $node->daemonListen }}/upload/{{ $server->uuid }}', {
+            'query': 'token={{ $server->daemonSecret }}'
+        });
+
+        socket.io.on('connect_error', function (err) {
+            siofu.destroy();
+            $('#applyUpdate').removeClass('fa-circle-o-notch fa-spinner fa-spin').addClass('fa-question-circle').css({ color: '#FF9900' });
+            if(typeof notifyUploadSocketError !== 'object') {
+                notifyUploadSocketError = $.notify({
+                    message: 'There was an error connecting to the Upload Socket for this server.'
+                }, {
+                    type: 'danger',
+                    delay: 0
+                });
+            }
+        });
+
+        uploadSocket.on('error', err => {
+            siofu.destroy();
+            console.error(err);
+        });
+
+        uploadSocket.on('connect', function () {
+            if (notifyUploadSocketError !== false) {
+                notifyUploadSocketError.close();
+                notifyUploadSocketError = false;
+            }
+        });
+
+        socket.on('error', function (err) {
+            console.error('There was an error while attemping to connect to the websocket: ' + err + '\n\nPlease try loading this page again.');
+        });
+
+
+        var siofu = new SocketIOFileUpload(uploadSocket);
+        siofu.chunkDelay = 25;
+
+        siofu.listenOnDrop(document.getElementById("upload_box"));
+
+        window.addEventListener('dragover', function (event) {
+            event.preventDefault();
+        }, false);
+
+        window.addEventListener('drop', function (event) {
+            event.preventDefault();
+        }, false);
+
+        var dropCounter = 0;
+        $('#upload_box').bind({
+            dragenter: function (event) {
+                event.preventDefault();
+                dropCounter++;
+                $(this).addClass('hasFileHover');
+            },
+            dragleave: function (event) {
+                dropCounter--;
+                if (dropCounter === 0) {
+                    $(this).removeClass('hasFileHover');
+                }
+            },
+            drop: function (event) {
+                dropCounter = 0;
+                $(this).removeClass('hasFileHover');
+            }
+        });
+
+        siofu.addEventListener('start', function (event) {
+            event.file.meta.path = $('#headerTableRow').attr('data-currentdir');
+            event.file.meta.identifier = Math.random().toString(36).slice(2);
+
+            $('#append_files_to').append('<tr id="file-upload-' + event.file.meta.identifier +'"> \
+                <td><i class="fa fa-file-text-o" style="margin-left: 2px;"></i></td> \
+                <td>' + event.file.name + '</td> \
+                <td colspan=2">&nbsp;</td> \
+            </tr><tr> \
+                <td colspan="4" class="has-progress"> \
+                    <div class="progress progress-table-bottom active"> \
+                        <div class="progress-bar progress-bar-info prog-bar-' + event.file.meta.identifier +'" style="width: 0%"></div> \
+                    </div> \
+                </td> \
+            </tr>\
+            ');
+        });
+
+        siofu.addEventListener('progress', function(event) {
+            var percent = event.bytesLoaded / event.file.size * 100;
+            if (percent >= 100) {
+                $('.prog-bar-' + event.file.meta.identifier).css('width', '100%').removeClass('progress-bar-info').addClass('progress-bar-success').parent().removeClass('active');
+            } else {
+                $('.prog-bar-' + event.file.meta.identifier).css('width', percent + '%');
+            }
+        });
+
+        // Do something when a file is uploaded:
+        siofu.addEventListener('complete', function(event){
+            if (!event.success) {
+                $('.prog-bar-' + event.file.meta.identifier).css('width', '100%').removeClass('progress-bar-info').addClass('progress-bar-danger');
+                $.notify({
+                    message: 'An error was encountered while attempting to upload this file.'
+                }, {
+                    type: 'danger',
+                    delay: 5000
+                });
+            }
+        });
+
+        siofu.addEventListener('error', function(event){
+            $('.prog-bar-' + event.file.meta.identifier).css('width', '100%').removeClass('progress-bar-info').addClass('progress-bar-danger');
+            $.notify({
+                message: 'An error was encountered while attempting to upload this file.'
+            }, {
+                type: 'danger',
+                delay: 5000
+            });
+        });
+    @endcan
 });
 </script>
 @endsection

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

@@ -37,7 +37,7 @@
             </th>
         </tr>
     </thead>
-    <tbody>
+    <tbody id="append_files_to">
         @if (isset($directory['first']) && $directory['first'] === true)
             <tr data-type="disabled">
                 <td><i class="fa fa-folder" style="margin-left: 0.859px;"></i></td>