Implements Delete & Create Folder of File Componenet

1111/test.txt

@@ -0,0 +1 @@
+QH7NXUAqV8dWJ9Lg4aTkDCezpTS5HgJ2DvqznexTbSTxgi

package.json

@@ -3,7 +3,7 @@
   "version": "DEV_5.0",
   "private": true,
   "nodemonConfig": {
-    "ext": "js",
+    "ext": "js, html",
     "ignore": [
       "*.json"
     ],

public/templates/files.html

@@ -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 id="fi_new_folder" 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_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) != "/") {
 
@@ -378,6 +503,57 @@
                                     })
 
                                 }
+
+                                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>

routes/filemanager.js

@@ -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()})
 
 
                             } 
@@ -83,12 +84,60 @@ 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"})
             }

users/0cee5da6-6812-49d8-97f5-2df5c1d78191.json

@@ -9,5 +9,5 @@
     "livableToken": true,
     "createdAt": 1679260759114
   },
-  "lastconnexion": 1679262309689
+  "lastconnexion": 1679501732426
 }