Show file upload size limit when uploading files

Also handle errors better.

CHANGELOG.md

@@ -3,6 +3,11 @@ This file is a running track of new features and fixes to each version of the pa
 
 This project follows [Semantic Versioning](http://semver.org) guidelines.
 
+## v0.5.4 (Bodacious Boreopterus)
+### Changed
+* File uploads now account for a maximum file size that is assigned for the daemon, and gives cleaner errors when that limit is reached.
+* File upload limit can now be controlled from the panel.
+
 ## v0.5.3 (Bodacious Boreopterus)
 ### Fixed
 * Fixed an error that occurred when viewing a node listing when no nodes were created yet due to a mis-declared variable. Also fixes a bug that would have all nodes trying to connect to the daemon using the same secret token on the node listing, causing only the last node to display properly.

database/migrations/2016_12_01_173018_add_configurable_upload_limit.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddConfigurableUploadLimit extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('nodes', function (Blueprint $table) {
+            $table->unsignedInteger('upload_size')->after('disk_overallocate')->default(100);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('nodes', function (Blueprint $table) {
+            $table->dropColumn('upload_size');
+        });
+    }
+}

resources/views/admin/nodes/view.blade.php

@@ -216,6 +216,19 @@
                         </div>
                     </div>
                     <div class="panel-heading" style="border-top: 1px solid #ddd;"></div>
+                    <div class="panel-body">
+                        <div class="row">
+                            <div class="form-group col-md-6">
+                                <label for="disk_overallocate" class="control-label">Maximum Web Upload Filesize</label>
+                                <div class="input-group">
+                                    <input type="text" name="upload_size" class="form-control" value="{{ old('upload_size', $node->upload_size) }}"/>
+                                    <span class="input-group-addon">MB</span>
+                                </div>
+                                <p class="text-muted"><small>Enter the maximum size of files that can be uploaded through the web-based file manager.</small></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="panel-heading" style="border-top: 1px solid #ddd;"></div>
                     <div class="panel-body">
                         <div class="row">
                             <div class="col-xs-6">
@@ -310,7 +323,7 @@
         "installed": "{{ route('remote.install') }}"
     },
     "uploads": {
-        "maximumSize": 100000000
+        "size_limit": {{ $node->upload_size }}
     },
     "keys": [
         "{{ $node->daemonSecret }}"

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

@@ -105,8 +105,11 @@
                 <div class="alert alert-warning">Edit the path location above <strong>before you upload files</strong>. They will automatically be placed in the directory you specify above. You can change this each time you upload a new file without having to press anything else. <em>The directory must exist before performing an upload.</em></div>
                 <div class="alert alert-danger" id="upload_error" style="display: none;"></div>
                 <input type="file" id="fileinput" name="fileUpload[]" multiple="" style="display:none;"/>
-                <div id="uploader_box" class="well well-sm" style="cursor:pointer;">
+                <div id="upload_box" class="well well-sm" style="cursor:pointer;">
-                    <center><h2 style="margin-bottom: 25px;">Drag and Drop File Here</h2></center>
+                    <center>
+                        <h2 style="margin-bottom: 25px;">Drag and Drop File(s) Here</h2>
+                        <p class="text-muted">The maximum size for web-based file uploads is currently <code>{{ $node->upload_size }} MB</code>.</p>
+                    </center>
                 </div>
                 <span id="file_progress"></span>
             </div>
@@ -154,16 +157,33 @@ $(window).load(function () {
             }
         });
 
+        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');
+            }
+        });
+
         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;
 
-        document.getElementById("uploader_box").addEventListener("click", siofu.prompt, false);
+        document.getElementById("upload_box").addEventListener("click", siofu.prompt, false);
-        siofu.listenOnDrop(document.getElementById("uploader_box"));
+        siofu.listenOnDrop(document.getElementById("upload_box"));
 
         siofu.addEventListener('start', function (event) {
             event.file.meta.path = $("#u_file_name").val();
@@ -197,13 +217,13 @@ $(window).load(function () {
         // Do something when a file is uploaded:
         siofu.addEventListener('complete', function(event){
             if (!event.success) {
-                $("#upload_error").html('An error was encountered while attempting to upload this file. Does the target directory exist?').show();
+                $("#upload_error").html('An error was encountered while attempting to upload this file: <strong>' + event.message + '.</strong>').show();
                 $("#file-upload-" + event.file.meta.identifier).hide();
             }
         });
 
         siofu.addEventListener('error', function(event){
-            $("#upload_error").html('An error was encountered while attempting to upload this file. Does the target directory exist?').show();
+            $("#upload_error").html('An error was encountered while attempting to upload this file: <strong>' + event.message + '.</strong>').show();
             $("#file-upload-" + event.file.meta.identifier).hide();
         });
 

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

@@ -52,7 +52,7 @@
                     <h3 class="panel-title">File Path Information</h3>
                 </div>
                 <div class="panel-body">
-                    When configuring any file paths in your server plugins or settings you should use <code>/home/container</code> as your base path.
+                    When configuring any file paths in your server plugins or settings you should use <code>/home/container</code> as your base path. The maximum size for web-based file uploads is currently <code>{{ $node->upload_size }} MB</code>.
                 </div>
             </div>
         </div>
@@ -101,8 +101,6 @@ $(window).load(function () {
 
 
         var siofu = new SocketIOFileUpload(uploadSocket);
-        siofu.chunkDelay = 25;
-
         siofu.listenOnDrop(document.getElementById("upload_box"));
 
         window.addEventListener('dragover', function (event) {
@@ -173,12 +171,13 @@ $(window).load(function () {
         });
 
         siofu.addEventListener('error', function(event){
+            console.error(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.'
+                message: 'An error was encountered while attempting to upload this file: <strong>' + event.message + '.</strong>',
             }, {
                 type: 'danger',
-                delay: 5000
+                delay: 8000
             });
         });
     @endcan