Show file upload size limit when uploading files

Also handle errors better.
This commit is contained in:
Dane Everitt 2016-12-01 18:32:05 -05:00
parent a03add7e4f
commit 72ad6d5c87
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 83 additions and 14 deletions

View file

@ -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 }}"

View file

@ -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();
});

View file

@ -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