Show file upload size limit when uploading files
Also handle errors better.
This commit is contained in:
Dane Everitt
parent
a03add7e4f
commit
72ad6d5c87
5 changed files with 83 additions and 14 deletions
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -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 }}"
|
||||
|
|
|
|||
|
|
@ -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;">
|
||||
<center><h2 style="margin-bottom: 25px;">Drag and Drop File Here</h2></center>
|
||||
<div id="upload_box" class="well well-sm" style="cursor:pointer;">
|
||||
<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);
|
||||
siofu.listenOnDrop(document.getElementById("uploader_box"));
|
||||
document.getElementById("upload_box").addEventListener("click", siofu.prompt, false);
|
||||
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();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue