Skip to content

Commit

Permalink
Added upload file & improved browsing greatly!
Browse files Browse the repository at this point in the history
  • Loading branch information
turtle0x1 committed Oct 26, 2019
1 parent ceed5b1 commit be06f26
Show file tree
Hide file tree
Showing 10 changed files with 170 additions and 84 deletions.
8 changes: 6 additions & 2 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@ function css(){
"node_modules/toastr/build/toastr.min.css",
"node_modules/xterm/dist/xterm.css",
"src/assets/token/styles/token-input.css",
"src/assets/token/styles/token-input-facebook.css"
"src/assets/token/styles/token-input-facebook.css",
"node_modules/dropzone/dist/min/basic.min.css",
"node_modules/dropzone/dist/min/dropzone.min.css"


])
.pipe(cleanCSS({}))
Expand All @@ -25,7 +28,8 @@ function js(){
"node_modules/ace-builds/src-min/mode-yaml.js",
"node_modules/jquery-confirm/dist/jquery-confirm.min.js",
"node_modules/toastr/build/toastr.min.js",
"src/assets/token/src/jquery.tokeninput.js"
"src/assets/token/src/jquery.tokeninput.js",
"node_modules/dropzone/dist/min/dropzone.min.js"
])
.pipe(minify({
noSource: true
Expand Down
5 changes: 5 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"body-parser": "^1.18.3",
"cors": "^2.8.5",
"dotenv": "^6.2.0",
"dropzone": "^5.5.1",
"express": "^4.16.4",
"express-ws": "^4.0.0",
"mysql": "^2.16.0",
Expand Down
4 changes: 3 additions & 1 deletion src/assets/dist/external.dist.css

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion src/assets/dist/external.dist.js

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<?php

namespace dhope0000\LXDClient\Controllers\Containers\Files;

use \dhope0000\LXDClient\Tools\Containers\Files\UploadFiles;

class UploadFilesToPathController implements \dhope0000\LXDClient\Interfaces\RecordAction
{
private $uploadFiles;

public function __construct(UploadFiles $uploadFiles)
{
$this->uploadFiles = $uploadFiles;
}

public function upload(
int $hostId,
string $container,
string $path
) {
$response = $this->uploadFiles->upload($hostId, $container, $path, $_FILES);

return ["state"=>"success", "message"=>"Uploaded file", "lxdResponse"=>$response];
}
}
28 changes: 28 additions & 0 deletions src/classes/Tools/Containers/Files/UploadFiles.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<?php

namespace dhope0000\LXDClient\Tools\Containers\Files;

use dhope0000\LXDClient\Model\Client\LxdClient;

class UploadFiles
{
private $lxdClient;

public function __construct(LxdClient $lxdClient)
{
$this->lxdClient = $lxdClient;
}

public function upload(int $hostId, string $container, string $path, array $files)
{
$client = $this->lxdClient->getANewClient($hostId);

foreach ($files as $file) {
$content = file_get_contents($file['tmp_name']);
$localPath = $path . "/" . $file["name"];
$response = $client->containers->files->write($container, $localPath, $content);
}

return true;
}
}
109 changes: 31 additions & 78 deletions src/views/boxes/container.php
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@ function loadContainerTreeAfter(milSeconds = 2000)
}, milSeconds);
}

function deleteFilesystemObjectConfirm(path, callback = null)
function deleteFilesystemObjectConfirm(path)
{
$.confirm({
title: `Delete From - ${currentContainerDetails.alias} / ${currentContainerDetails.container} `,
Expand Down Expand Up @@ -316,9 +316,7 @@ function deleteFilesystemObjectConfirm(path, callback = null)
modal.buttons.cancel.enable();
return false;
}
if($.isFunction(callback)){
callback.call();
}
loadFileSystemPath(currentPath);
modal.close();
});
return false;
Expand Down Expand Up @@ -869,16 +867,10 @@ function loadContainerView(data)
$(this).addClass("bg-primary");
});

var pathHistory = [];

function getLastPathHistory() {
return pathHistory[pathHistory.length - 1].path;
}
var currentPath = "/";
var currentRequest = null;

var currentRequest = null;

function loadFileSystemPath(){
let path = getLastPathHistory();
function loadFileSystemPath(path){
let reqData = {
...currentContainerDetails,
...{path: path, download: 0}
Expand All @@ -890,29 +882,28 @@ function loadFileSystemPath(){
url: globalUrls.containers.files.getPath,
beforeSend : function() {
if(currentRequest != null) {
if(pathHistory.length == 1){
pathHistory.pop();
}else{
let cur = pathHistory.pop();
pathHistory.pop();
pathHistory.push(cur);
}

currentRequest.abort();
}
},
success: function(data){
currentRequest = null;
data = makeToastr(data);


if(data.hasOwnProperty("state") && data.state == "error"){
pathHistory[pathHistory.length - 1].directory = false;
// pathHistory[pathHistory.length - 1].directory = false;
return false;
}

if(data.isDirectory){
currentPath = path;
let h = "";
if(path.endsWith("/") !== true){
path += "/";
}
if(path !== "/"){
h = `<div class="card goUpDirectory bg-dark w-10">

h = `<div class="card bg-dark w-10 goUpDirectory">
<div class="card-body text-center">
<i class="fas fa-circle fa-3x"></i>
<i class="fas fa-circle fa-3x"></i>
Expand All @@ -922,8 +913,9 @@ function loadFileSystemPath(){
}
$.each(data.contents, function(_, item){
let icon = `<i class="fas fa-3x fa-${item.isDirectory ? "folder" : "file"}"></i>`

h += `
<div class="card filesystemObject bg-dark w-10" data-name="${item.name}" data-path="${pathHistory[pathHistory.length - 1].path}/${item.name}">
<div class="card filesystemObject bg-dark w-10" data-name="${item.name}" data-path="${path}${item.name}">
<div class="card-body text-center">
${icon}
<h4>${item.name}</h4>
Expand All @@ -933,77 +925,37 @@ function loadFileSystemPath(){
});
$("#filesystemTable").empty().append(h);
}else {
$("#testSubmit").find("input[name=hostId]").val(currentContainerDetails.hostId);
$("#testSubmit").find("input[name=path]").val(getLastPathHistory());
$("#testSubmit").find("input[name=container]").val(currentContainerDetails.container);
$("#testSubmit").trigger("submit");
pathHistory[pathHistory.length - 1].directory = false;
$("#downloadContainerFileForm").find("input[name=hostId]").val(currentContainerDetails.hostId);
$("#downloadContainerFileForm").find("input[name=path]").val(path);
$("#downloadContainerFileForm").find("input[name=container]").val(currentContainerDetails.container);
$("#downloadContainerFileForm").trigger("submit");
}

currentRequest = null;
}
});
}

$("#containerBox").on("click", "#goToFiles", function(){
pathHistory.push({directory: true, path : "/"});
$("#containerFiles").show();
$("#containerConsole, #containerBackups, #containerDetails").hide();
loadFileSystemPath();
loadFileSystemPath("/");
});

$(document).on("click", ".filesystemObject", function(){
let object = $(this).data("name");

let p = pathHistory.slice().reverse();

let lastDirectory = {};

$.each(p, function(i, item){
if(item.directory ){
lastDirectory = item;
return false;
}
});

let lastPath = lastDirectory.path;
let path = "";
if(lastPath == "/"){
path = "/" + object;
}else{
path = lastPath + "/" + object
}

pathHistory.push({directory: true, path: path});

loadFileSystemPath();
loadFileSystemPath($(this).data("path"));
});

$(document).on("click", ".goUpDirectory", function(){
let lastPath = getLastPathHistory();
if(lastPath == "/"){
loadFileSystemPath();
return;
}
let parts = currentPath.split("/").filter(word => word.length > 0);

let p = pathHistory.slice().reverse();

$.each(p, function(i, item){
if(i > 0 && item.directory && item.path !== lastPath ){
if(item.path !== "/"){
item.path = item.path.substr(0, item.path.lastIndexOf("/"));
}

if(item.path == ""){
item.path = "/";
}
if(parts.length > 1){
parts.pop();
}else{
parts = ["/"];
}

pathHistory.push(item);
return false;
}
});
let p = parts.join("/")

loadFileSystemPath();
loadFileSystemPath(p);
});

$("#containerBox").on("click", "#goToDetails", function(){
Expand Down Expand Up @@ -1150,4 +1102,5 @@ function loadFileSystemPath(){
require __DIR__ . "/../modals/containers/restoreSnapshot.php";
require __DIR__ . "/../modals/containers/createContainer.php";
require __DIR__ . "/../modals/containers/editSettings.php";
require __DIR__ . "/../modals/containers/files/uploadFile.php";
?>
18 changes: 16 additions & 2 deletions src/views/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@
importContainerBackup: "/api/Containers/Backups/ImportBackupController/import"
},
files: {
uploadFiles: '/api/Containers/Files/UploadFilesToPathController/upload',
delete: '/api/Containers/Files/DeletePathController/delete',
getPath: '/api/Containers/Files/GetPathController/get'
}
Expand Down Expand Up @@ -267,7 +268,7 @@
</script>
</head>
<body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
<form style="display: none;" method="POST" id="testSubmit" action="/api/Containers/Files/GetPathController/get">
<form style="display: none;" method="POST" id="downloadContainerFileForm" action="/api/Containers/Files/GetPathController/get">
<input value="" name="hostId"/>
<input value="" name="path"/>
<input value="" name="container"/>
Expand Down Expand Up @@ -544,7 +545,20 @@ function makeOperationHtmlItem(id, icon, description, statusCode)
icon: "delete",
callback: function(key, opt, e){
let item = opt["$trigger"];
deleteFilesystemObjectConfirm(item.data("path"), loadFileSystemPath);
deleteFilesystemObjectConfirm(item.data("path"));
}
}
}
});
$.contextMenu({
selector: '#filesystemTable',
items: {
"upload": {
name: "Upload",
icon: "upload",
callback: function(key, opt, e){
let item = opt["$trigger"];
$("#modal-container-files-upload").modal("show");
}
}
}
Expand Down
53 changes: 53 additions & 0 deletions src/views/modals/containers/files/uploadFile.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!-- Modal -->
<div class="modal fade" id="modal-container-files-upload" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Upload</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div method="POST" class="dropzone" id="fileUpload"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<script>
Dropzone.autoDiscover = false;
var uploadDropzone = null;
$("#modal-container-files-upload").on("shown.bs.modal", function(){
if(uploadDropzone == null){
uploadDropzone = $("div#fileUpload").dropzone({
url: globalUrls.containers.files.uploadFiles,
method: "POST",
init: function() {
this.on("sending", function(file, xhr, formData){
$.each(currentContainerDetails, function(key, item){
formData.append(key, item);
});
formData.append("path", currentPath);
});
this.on("complete", function (file) {
if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
loadFileSystemPath(currentPath);
}
});
}
});
}
});
</script>

0 comments on commit be06f26

Please sign in to comment.