@extends('layouts.master')
@section('title')
Add File to: {{ $server->name }}
@endsection
@section('scripts')
@parent
<script src="{{ asset('js/binaryjs.js') }}"></script>
@endsection
@section('content')
<div class="col-md-12">
<ul class="nav nav-tabs" id="config_tabs">
<li class="active"><a href="#create" data-toggle="tab">Create File</a></li>
@can('upload-files', $server)<li><a href="#upload" data-toggle="tab">Upload Files</a></li>@endcan
</ul>
<div class="tab-content">
<div class="tab-pane active" id="create">
<div id="write_status" style="display:none;width: 100%; margin: 10px 0 5px;"></div>
<form method="post" id="new_file">
<h4>/home/container/{{ $directory }} <input type="text" id="file_name" class="filename" value="newfile.txt" /></h4>
<div class="form-group">
<div>
<textarea name="file_contents" id="fileContents" style="border: 1px solid #dddddd;" class="form-control console"></textarea>
</div>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary btn-sm" id="create_file">{{ trans('strings.save') }}</button>
<button class="btn btn-default btn-sm" onclick="window.location='/server/{{ $server->uuidShort }}/files?dir=/{{ $directory }}';return false;">{{ trans('server.files.back') }}</button>
</div>
</div>
</form>
</div>
@can('upload-files', $server)
<div class="tab-pane" id="upload">
<h4>/home/container/ <input type="text" id="u_file_name" value="{{ $directory }}" style='outline: none;width:450px;background: transparent;margin-left:-5px;padding:0;border: 0px;font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight: 250;line-height: 1.1;color: inherit;font-size: 19px;'/></h4>
<div class="alert alert-warning">Please edit the path location above <strong>before you upload files</strong>. They will automatically be placed in the directory you specify above. Simply click next to <code>/home/container/</code> and begin typing. You can change this each time you upload a new file without having to press anything else.</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>
</div>
<span id="file_progress"></span>
</div>
@endcan
</div>
</div>
<script>
$(window).load(function () {
$('.server-files').addClass('active');
var newFilePath;
var newFileContents;
@can('upload-files', $server)
var client = new BinaryClient('{{ $node->scheme === 'https' ? 'wss' : 'ws' }}://{{ $node->fqdn }}:{{ $node->daemonListen }}/upload/', {
chunkSize: 40960
});
// 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.");
});
});
});
});
// listen for a file being chosen
$('#fileinput').change(function (event) {
$('#uploader_box').trigger('drop', [event, event.currentTarget]);
$('#fileinput').val('');
});
// Deal with DOM quirks
function doNothing (e){
e.preventDefault();
e.stopPropagation();
}
@endcan
$('textarea').keydown(function (e) {
if (e.keyCode === 9) {
var start = this.selectionStart;
var end = this.selectionEnd;
var value = $(this).val();
$(this).val(value.substring(0, start) + '\t' + value.substring(end));
this.selectionStart = this.selectionEnd = start + 1;
e.preventDefault();
}
});
$("#create_file").click(function(e) {
e.preventDefault();
$("#create_file").append(' <i class="fa fa-spinner fa fa-spin"></i>').addClass("disabled");
$.ajax({
type: 'POST',
url: '/server/{{ $server->uuidShort }}/ajax/files/save',
headers: { 'X-CSRF-Token': '{{ csrf_token() }}' },
data: {
file: '{{ $directory }}' + $('#file_name').val(),
contents: $('#fileContents').val()
}
}).done(function (data) {
window.location.replace('/server/{{ $server->uuidShort }}/files/edit/{{ $directory }}' + $('#file_name').val());
}).fail(function (jqXHR) {
$('#write_status').html('<div class="alert alert-danger">' + jqXHR.responseText + '</div>').show();
$('#create_file').html('{{ trans('strings.save') }}').removeClass('disabled');
});
});
});
</script>
@endsection