Implements Delete & Create Folder of File Componenet
This commit is contained in:
parent
f27c7a03f3
commit
77946ad1eb
1
1111/test.txt
Normal file
1
1111/test.txt
Normal file
@ -0,0 +1 @@
|
||||
QH7NXUAqV8dWJ9Lg4aTkDCezpTS5HgJ2DvqznexTbSTxgi
|
||||
@ -3,7 +3,7 @@
|
||||
"version": "DEV_5.0",
|
||||
"private": true,
|
||||
"nodemonConfig": {
|
||||
"ext": "js",
|
||||
"ext": "js, html",
|
||||
"ignore": [
|
||||
"*.json"
|
||||
],
|
||||
|
||||
@ -7,13 +7,14 @@
|
||||
<div class="fi_act">
|
||||
<h1><i class="fa fa-folder"></i> Fichiers</h1>
|
||||
<div>
|
||||
<button class="fi_act_btn"><i class="fa fa-folder"></i> Nouveau dossier</button>
|
||||
<button class="fi_act_btn"><i class="fa fa-upload"></i> Upload</button>
|
||||
<button id="fi_new_folder" class="fi_act_btn"><i class="fa fa-folder"></i> Nouveau dossier</button>
|
||||
<button id="fi_upload" class="fi_act_btn"><i class="fa fa-upload"></i> Upload</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fi_current_directory">
|
||||
<input id="fi_current_directory" class="fi_current_p" value="/" type="text">
|
||||
</div>
|
||||
<p id="fi_info" style="text-align: start; color: rgb(255, 48, 48);"></p>
|
||||
<div id="fileExplorer" class="fi_container">
|
||||
<p style="text-align: start; color: rgb(255, 48, 48);">Le répertoire n'existe pas ou est vide.</p>
|
||||
</div>
|
||||
@ -22,6 +23,26 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dialog class="fi_addfolder" id="fi_new_folder_dialog">
|
||||
<h1><i class="fa fa-folder"></i> Créer un dossier</h1>
|
||||
<p>Nom du dossier :</p>
|
||||
<input class="inp" id="fi_add_name" type="text">
|
||||
<div style="color: rgb(255, 76, 76);" id="fi_folder_info"></div>
|
||||
</div>
|
||||
<button id="fi_add_close" class="fi_add_close">Annuler</button>
|
||||
<button id="fi_add_confirm" class="fi_add_confirm">Ajouter</button>
|
||||
</dialog>
|
||||
|
||||
<dialog class="fi_addfolder" id="_rename">
|
||||
<h1><i class="fa fa-terminal"></i> Renommer un fichier</h1>
|
||||
<p><span id="_old_name">/home/gitlab-ci/test</span></p>
|
||||
<p>Nouveau lien :</p>
|
||||
<input class="inp" id="_rename_name" type="text">
|
||||
</div>
|
||||
<button id="_rename_close" class="fi_add_close">Annuler</button>
|
||||
<button id="_rename_confirm" class="fi_add_confirm">Editer</button>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
|
||||
if(typeof currentDir == "undefined") {
|
||||
@ -29,9 +50,119 @@
|
||||
const currentDir = document.getElementById("fi_current_directory")
|
||||
const fileExplorer = document.getElementById("fileExplorer")
|
||||
const fileExplorerError = '<div id="last_directory" class="fi_file"><p style="margin-left: 1vw;text-align:start;margin-bottom: 1vw !important;"><i class="fa fa-arrow-left"></i> Revenir au dossier parent</p></div>' + fileExplorer.outerHTML
|
||||
const fiInfo = document.getElementById("fi_info")
|
||||
|
||||
getDirectory(currentDir.value)
|
||||
|
||||
const newFolderBtn = document.getElementById("fi_new_folder")
|
||||
const newFolderDialog = document.getElementById("fi_new_folder_dialog")
|
||||
const newFolderConfirm = document.getElementById("fi_add_confirm")
|
||||
const newFolderName = document.getElementById("fi_add_name")
|
||||
const newFolderInfo = document.getElementById("fi_folder_info")
|
||||
|
||||
|
||||
const newFolderClose = document.getElementById("fi_add_close")
|
||||
|
||||
newFolderClose.addEventListener("click", () => {
|
||||
|
||||
newFolderDialog.close()
|
||||
getDirectory(currentDir.value)
|
||||
})
|
||||
|
||||
|
||||
|
||||
newFolderBtn.addEventListener("click", () => {
|
||||
|
||||
newFolderDialog.showModal()
|
||||
newFolderName.value = ""
|
||||
newFolderInfo.value = ""
|
||||
|
||||
})
|
||||
|
||||
newFolderConfirm.addEventListener("click", () => {
|
||||
|
||||
const folderDir = currentDir + newFolderName.value
|
||||
newFolderInfo.value = ""
|
||||
var wrongName = true
|
||||
var justspace = false
|
||||
|
||||
const refusedChar = ['\\','/' ,':' ,'*','?' ,'"','<','>','|']
|
||||
|
||||
for(var char of refusedChar) {
|
||||
|
||||
if(newFolderName.value.includes(char)) {
|
||||
wrongName = false
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 0; i < newFolderName.value.length; i++) {
|
||||
var char = newFolderName.value.charAt(i)
|
||||
|
||||
if(char != " ") {
|
||||
|
||||
justspace = true
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
if(wrongName == false) {
|
||||
|
||||
newFolderInfo.innerHTML = "<p>Le nom du dossier est invalide car il contient des caractères interdits !</p>"
|
||||
|
||||
} else if(justspace == false) {
|
||||
|
||||
newFolderInfo.innerHTML = "<p>Le nom du dossier ne peut être vide !</p>"
|
||||
|
||||
} else {
|
||||
|
||||
fetch('/filemanager', {
|
||||
method: 'POST',
|
||||
redirect: 'follow',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({"request":"addfolder", "value": newFolderName.value, "currentDir" : currentDir.value})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(response => res(response))
|
||||
|
||||
function res(response) {
|
||||
if(response.result == "failed") {
|
||||
content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i> Erreur de chargement des données - Erreur : ' + response.content + '</h1>'
|
||||
console.log("FAILED")
|
||||
|
||||
} else if(response.result == "success") {
|
||||
|
||||
if(response.content == "ERROR_ALREADY_EXIST") {
|
||||
newFolderInfo.innerHTML = "<p>Le nom du dossier est déjà existant !</p>"
|
||||
|
||||
|
||||
} else if(response.content == "ERROR_NOT_MAKEABLE") {
|
||||
newFolderInfo.innerHTML = "<p>Vous n'avez pas la permission !</p>"
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
newFolderDialog.close()
|
||||
getDirectory(currentDir.value)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
const uploadBtn = document.getElementById("fi_upload")
|
||||
|
||||
uploadBtn.addEventListener("click", () => {
|
||||
|
||||
document.getElementById("_rename").showModal()
|
||||
})
|
||||
|
||||
currentDir.addEventListener("change", () => {
|
||||
|
||||
@ -41,6 +172,8 @@
|
||||
|
||||
function getDirectory(directory) {
|
||||
|
||||
fiInfo.innerHTML = ""
|
||||
|
||||
var fileExplorerList = new Array()
|
||||
|
||||
fetch('/filemanager', {
|
||||
@ -176,7 +309,7 @@
|
||||
|
||||
if(file.directory == true) {
|
||||
|
||||
fileExplorerList.push('<div id="' + file.name + '_directory" class="fi_file row"> <p class="col-lg"><i style="color:yellow;" class="fa fa-folder"></i> ' + file.name + '</p> <p class="col-lg"><i class="fa fa-calendar"></i> Dernière édition : ' + lastedition + '</p> <p class="col-lg"><i class="fas fa-weight-hanging"></i> Taille : ' + file.size + ' octet(s)</p> <div class="col-lg fi_file_btn"> <button id="' + file.name + '_rename" class="fi_rename"><i class="fas fa-terminal"></i></button> <button id="' + file.name + '_delete" class="fi_delete"><i class="fa fa-trash"></i></button> </div> </div>')
|
||||
fileExplorerList.push('<div id="' + file.name + '_directory" class="fi_file row"> <p class="col-lg"><i style="color:yellow;" class="fa fa-folder"></i> ' + file.name + '</p> <p class="col-lg"><i class="fa fa-calendar"></i> Dernière édition : ' + lastedition + '</p> <p class="col-lg"><i class="fas fa-weight-hanging"></i> Taille : ' + file.size + ' octet(s)</p> <div class="col-lg fi_file_btn"> <button id="' + file.name + '_rename" class="fi_rename"><i id="' + file.name + '_trename" class="fas fa-terminal"></i></button> <button id="' + file.name + '_delete" class="fi_delete"><i id="' + file.name + '_tdelete" class="fa fa-trash"></i></button> </div> </div>')
|
||||
|
||||
|
||||
}
|
||||
@ -285,7 +418,7 @@
|
||||
|
||||
|
||||
|
||||
fileExplorerList.push('<div id="' + file.name + '_directory" class="fi_file row"> <p class="col-lg">' + icon+ '</i> ' + file.name + '</p> <p class="col-lg"><i class="fa fa-calendar"></i> Dernière édition : ' + lastedition + '</p> <p class="col-lg"><i class="fas fa-weight-hanging"></i> Taille : ' + file.size + ' octet(s)</p> <div class="col-lg fi_file_btn"> <button id="' + file.name + '_rename" class="fi_rename"><i class="fas fa-terminal"></i></button> <button id="' + file + '_download" class="fi_rename"><i class="fas fa-download"></i></button><button id="' + file.name + '_delete" class="fi_delete"><i class="fa fa-trash"></i></button> </div> </div>')
|
||||
fileExplorerList.push('<div id="' + file.name + '_directory" class="fi_file row"> <p class="col-lg">' + icon+ '</i> ' + file.name + '</p> <p class="col-lg"><i class="fa fa-calendar"></i> Dernière édition : ' + lastedition + '</p> <p class="col-lg"><i class="fas fa-weight-hanging"></i> Taille : ' + file.size + ' octet(s)</p> <div class="col-lg fi_file_btn"> <button id="' + file.name + '_rename" class="fi_rename"><i id="' + file.name + '_trename" class="fas fa-terminal"></i></button> <button id="' + file + '_download" class="fi_rename"><i id="' + file.name + '_tdownload" class="fas fa-download"></i></button><button id="' + file.name + '_delete" class="fi_delete"><i id="' + file.name + '_tdelete" class="fa fa-trash"></i></button> </div> </div>')
|
||||
|
||||
}
|
||||
|
||||
@ -334,15 +467,7 @@
|
||||
const renameBtn = document.getElementById(file.name + "_rename")
|
||||
|
||||
|
||||
deleteBtn.addEventListener("click", () => {
|
||||
|
||||
console.log(file.name)
|
||||
})
|
||||
|
||||
renameBtn.addEventListener("click", () => {
|
||||
|
||||
console.log(file.name)
|
||||
})
|
||||
|
||||
|
||||
if(file.directory == true) {
|
||||
|
||||
@ -350,9 +475,9 @@
|
||||
|
||||
dir.addEventListener("click", (event) => {
|
||||
|
||||
console.log(event.target.id != file.name + "_delete" && event.target.id != file.name + "_rename")
|
||||
console.log(event.target)
|
||||
|
||||
if((event.target.id != file.name + "_delete" & event.target.id != file.name + "_rename") == true) {
|
||||
if(event.target.id != file.name + "_delete" && event.target.id != file.name + "_rename" && event.target.id != file.name + "_trename" && event.target.id != file.name + "_tdelete") {
|
||||
|
||||
if(currentDir.value.slice(-1) != "\\" && currentDir.value.slice(-1) != "/") {
|
||||
|
||||
@ -371,13 +496,64 @@
|
||||
|
||||
getDirectory(currentDir.value)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
deleteBtn.addEventListener("click", () => {
|
||||
|
||||
fiInfo.innerHTML = ""
|
||||
|
||||
fetch('/filemanager', {
|
||||
method: 'POST',
|
||||
redirect: 'follow',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({"request":"del", "value": file})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(response => res(response))
|
||||
|
||||
function res(response) {
|
||||
|
||||
if(response.result == "failed") {
|
||||
|
||||
content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i> Erreur de chargement des données - Erreur : ' + response.content + '</h1>'
|
||||
console.log("FAILED")
|
||||
|
||||
} else if(response.result == "success") {
|
||||
|
||||
if(response.content == "ERROR_NOT_MAKEABLE") {
|
||||
fiInfo.innerHTML = "<p>Vous n'avez pas la permission !</p>"
|
||||
|
||||
|
||||
} else if(response.content == "ERROR_NOT_EXIST") {
|
||||
console.log("ERROR NOT EXIST")
|
||||
getDirectory(currentDir.value)
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
newFolderDialog.close()
|
||||
getDirectory(currentDir.value)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
renameBtn.addEventListener("click", () => {
|
||||
|
||||
console.log(file.name)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -610,6 +786,93 @@ table {
|
||||
margin-bottom: 0.5vw !important;
|
||||
}
|
||||
|
||||
.fi_addfolder {
|
||||
|
||||
border-radius: 1vw;
|
||||
border-color: transparent;
|
||||
background-color: rgb(80, 80, 80);
|
||||
color: white;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.fi_add_close {
|
||||
|
||||
border-radius: 1vw;
|
||||
border-color: rgb(255, 48, 48);
|
||||
border-width: 1%;
|
||||
border-style: solid;
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
transition: all 0.2s ease 0s;
|
||||
margin: 0.5vw;
|
||||
padding: 0.5vw;
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.fi_add_close:hover {
|
||||
box-shadow: 1px 1px 10px rgb(255, 48, 48);
|
||||
background-color: rgb(255, 48, 48);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.fi_add_close:active {
|
||||
box-shadow: none;
|
||||
|
||||
}
|
||||
|
||||
.fi_add_confirm {
|
||||
|
||||
border-radius: 1vw;
|
||||
border-color: rgb(0, 174, 255);
|
||||
border-width: 1%;
|
||||
border-style: solid;
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
transition: all 0.2s ease 0s;
|
||||
margin: 0.5vw;
|
||||
padding: 0.5vw;
|
||||
font-size: 1vw;
|
||||
|
||||
}
|
||||
|
||||
.fi_add_confirm:hover {
|
||||
box-shadow: 1px 1px 10px rgb(0, 174, 255);
|
||||
background-color: rgb(0, 174, 255);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.fi_add_confirm:active {
|
||||
box-shadow: none;
|
||||
|
||||
}
|
||||
|
||||
.inp {
|
||||
|
||||
border-style: hidden;
|
||||
border-radius: 1vw;
|
||||
padding: 0.2vw;
|
||||
padding-left: 1vw;
|
||||
transition: all 0.2s ease 0s;
|
||||
margin-bottom: 0.5vw;
|
||||
width: 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.inp:hover {
|
||||
|
||||
box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.477) ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.inp:focus {
|
||||
|
||||
box-shadow: 5px 5px 5px rgba(0, 174, 255, 0.477) ;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -3,7 +3,8 @@ var router = express.Router();
|
||||
var ntr = require("../neutral-functions.js")
|
||||
var fs = require("fs")
|
||||
var path = require("path")
|
||||
var mime = require('mime-types')
|
||||
var mime = require('mime-types');
|
||||
const { compileString } = require('sass');
|
||||
|
||||
/* GET home page. */
|
||||
router.get('/', function(req, res, next) {
|
||||
@ -59,7 +60,7 @@ router.post("/", function(req, res, next) {
|
||||
|
||||
const stat = fs.statSync(directory.replace("/", path.sep.replace("\\", path.sep)) + path.sep + file)
|
||||
|
||||
files.push({"name":file, "type":mime.lookup(file), "size":stat.size, "lastedition":stat.mtimeMs, "directory":stat.isDirectory()})
|
||||
files.push({"name":file, "fileDirectory" :directory.replace("/", path.sep.replace("\\", path.sep)) + path.sep + file , "type":mime.lookup(file), "size":stat.size, "lastedition":stat.mtimeMs, "directory":stat.isDirectory()})
|
||||
|
||||
|
||||
}
|
||||
@ -82,13 +83,61 @@ router.post("/", function(req, res, next) {
|
||||
|
||||
|
||||
} else if(bod.request == "del") {
|
||||
|
||||
res.send({"result":"failed", "content":"ERROR_NOT_MAKE"})
|
||||
|
||||
if(fs.existsSync(bod.value.fileDirectory) == false) {
|
||||
res.send({"result":"success", "content":"ERROR_NOT_EXIST"})
|
||||
|
||||
} else {
|
||||
|
||||
try {
|
||||
|
||||
if(file.directory == true) {
|
||||
fs.rmdirSync(file.fileDirectory)
|
||||
|
||||
} else {
|
||||
fs.rmSync(file.fileDirectory)
|
||||
|
||||
}
|
||||
console.log("DELETED")
|
||||
res.send({"result":"success", "content":"DELETED"})
|
||||
|
||||
} catch(error) {
|
||||
|
||||
console.log(error)
|
||||
console.log("NOT DELETED")
|
||||
res.send({"result":"success", "content":"ERROR_NOT_MAKEABLE"})
|
||||
}
|
||||
|
||||
console.log("NOT DELETED")
|
||||
|
||||
}
|
||||
|
||||
} else if(bod.request == "rename") {
|
||||
|
||||
res.send({"result":"failed", "content":"ERROR_NOT_MAKE"})
|
||||
|
||||
} else if(bod.request == "addfolder") {
|
||||
|
||||
|
||||
if(fs.existsSync(bod.currentDir + path.sep + bod.value) == true) {
|
||||
res.send({"result":"success", "content":"ERROR_ALREADY_EXIST"})
|
||||
|
||||
} else {
|
||||
|
||||
try {
|
||||
fs.mkdirSync(bod.currentDir + path.sep + bod.value)
|
||||
res.send({"result":"success", "content":"CREATED"})
|
||||
|
||||
} catch(error) {
|
||||
console.log(error)
|
||||
res.send({"result":"success", "content":"ERROR_NOT_MAKEABLE"})
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
res.send({"result":"failed", "content":"ERROR_REQUEST_MISSING_FIELDS", "additional": "REQUEST_MISSING"})
|
||||
}
|
||||
|
||||
@ -9,5 +9,5 @@
|
||||
"livableToken": true,
|
||||
"createdAt": 1679260759114
|
||||
},
|
||||
"lastconnexion": 1679262309689
|
||||
"lastconnexion": 1679501732426
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user