StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add support for new file upload mechanics

Browse source
This commit is contained in:
Dane Everitt 2016-10-13 21:03:49 -04:00
parent f65e41a1af
commit e5ffb15020
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
4 changed files with 97 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

169
resources/views/server/files/add.blade.php
View file

@ -25,7 +25,7 @@
@section('scripts')
@parent
{!! Theme::js('js/binaryjs.js') !!}
{!! Theme::js('js/vendor/upload/client.min.js') !!}
{!! Theme::js('js/vendor/lodash/lodash.js') !!}
@endsection
@ -102,11 +102,11 @@
</div>
</div>
<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.</div>
<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;">Connecting...</h2></center>
<center><h2 style="margin-bottom: 25px;">Drag and Drop File Here</h2></center>
</div>
<span id="file_progress"></span>
</div>
@ -124,99 +124,90 @@ $(window).load(function () {
var newFileContents;
@can('upload-files', $server)
var client = new BinaryClient('{{ $node->scheme === 'https' ? 'wss' : 'ws' }}://{{ $node->fqdn }}:{{ $node->daemonListen }}/upload/', {
chunkSize: 40960
var notifyUploadSocketError = false;
var uploadSocket = io('{{ $node->scheme }}://{{ $node->fqdn }}:{{ $node->daemonListen }}/upload/{{ $server->uuid }}', {
'query': 'token={{ $server->daemonSecret }}'
});
// Wait for connection to BinaryJS server
client.on('open', function() {
var box = $('#uploader_box');
box.on('dragenter', doNothing);
box.on('dragover', doNothing);
box.html('<center><h2 style="margin-bottom:25px;">Drag or Click to Upload</h2></center>');
box.on('click', function () {
$('#fileinput').click();
});
box.on('drop', function (e, files) {
if (typeof files !== 'undefined') {
e.originalEvent = {
dataTransfer: {
files: files.currentTarget.files
}
};
}
// e.preventDefault();
$.each(e.originalEvent.dataTransfer.files, function(index, value) {
var file = e.originalEvent.dataTransfer.files[index];
var identifier = Math.random().toString(36).slice(2);
$('#file_progress').append('<div class="well well-sm" id="file-upload-' + identifier +'"> \
<div class="row"> \
<div class="col-md-12"> \
<h6>Uploading ' + file.name + '</h6> \
<span class="prog-bar-text-' + identifier +'" style="font-size: 10px;position: absolute;margin: 3px 0 0 15px;">Waiting...</span> \
<div class="progress progress-striped active"> \
<div class="progress-bar progress-bar-info prog-bar-' + identifier +'" style="width: 0%"></div> \
</div> \
</div> \
</div> \
</div>');
// Add to list of uploaded files
var stream = client.send(file, {
token: "{{ $server->daemonSecret }}",
server: "{{ $server->uuid }}",
path: $("#u_file_name").val(),
name: file.name,
size: file.size
});
var tx = 0;
stream.on('data', function(data) {
if(data.error) {
$("#upload_error").html(data.error).show();
$("#file-upload-" + identifier).hide();
} else {
tx += data.rx;
if(tx >= 0.999) {
$('.prog-bar-text-' + identifier).text('Upload Complete');
$('.prog-bar-' + identifier).css('width', '100%').parent().removeClass('active').removeClass('progress-striped');
} else {
$('.prog-bar-text-' + identifier).text(Math.round(tx * 100) + '%');
$('.prog-bar-' + identifier).css('width', tx * 100 + '%');
}
}
});
stream.on('close', function(data) {
$("#upload_error").html("The BinaryJS data stream was closed by the server. Please refresh the page and try again.").show();
$("#file-upload-" + identifier).hide();
});
stream.on('error', function(data) {
console.error("An error was encountered with the BinaryJS upload stream.");
});
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
});
});
}
});
// listen for a file being chosen
$('#fileinput').change(function (event) {
$('#uploader_box').trigger('drop', [event, event.currentTarget]);
$('#fileinput').val('');
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 = 50;
document.getElementById("uploader_box").addEventListener("click", siofu.prompt, false);
siofu.listenOnDrop(document.getElementById("uploader_box"));
siofu.addEventListener('start', function (event) {
event.file.meta.path = $("#u_file_name").val();
event.file.meta.identifier = Math.random().toString(36).slice(2);
$('#file_progress').append('<div class="well well-sm" id="file-upload-' + event.file.meta.identifier +'"> \
<div class="row"> \
<div class="col-md-12"> \
<h6>Uploading ' + event.file.name + '</h6> \
<span class="prog-bar-text-' + event.file.meta.identifier +'" style="font-size: 10px;position: absolute;margin: 3px 0 0 15px;">Waiting...</span> \
<div class="progress progress-striped active"> \
<div class="progress-bar progress-bar-info prog-bar-' + event.file.meta.identifier +'" style="width: 0%"></div> \
</div> \
</div> \
</div> \
</div>');
});
siofu.addEventListener('progress', function(event) {
console.log(event.file);
var percent = event.bytesLoaded / event.file.size * 100;
if (percent >= 100) {
$('.prog-bar-text-' + event.file.meta.identifier).text('Upload Complete');
$('.prog-bar-' + event.file.meta.identifier).css('width', '100%').removeClass('progress-bar-info').addClass('progress-bar-success').parent().removeClass('active progress-striped');
$('.prog-bar-text-' + event.file.meta.identifier).parents().eq(2).delay(5000).slideUp();
} else {
$('.prog-bar-text-' + event.file.meta.identifier).text(Math.round(percent) + '%');
$('.prog-bar-' + event.file.meta.identifier).css('width', percent + '%');
}
});
// 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();
$("#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();
$("#file-upload-" + event.file.meta.identifier).hide();
});
// Deal with DOM quirks
function doNothing (e){
e.preventDefault();
e.stopPropagation();
}
@endcan
const Editor = ace.edit('fileContents');