-
-To create a fork on GitHub is as easy as clicking the “fork” button on the repository page.
+_Final Page_
-
+
-## Technologies used
+_Final Page with opened folder_
+
+
+
+
+> **Comparison of the original design (Wireframe) with the final result of the project**
+
+As you can see, during the work we have modificated the page for better UX and UI design:
+
+- Added buton "Sing out" if the user want close the session,
+- Added folder "Trash" if the user want to restore deleted file in the future,
+- The content of the file now we can see in pop-up after "click" at the file(in the wireframe if was situated at rhe right part of display),
+- We will be relocated to editor-page if we want to edit file in text format (.txt),
+- We will be relocated to search-page if we want to find any file r folder (enter the "first enter" in "search)
+
+
+### **Use case diagram**
+
+
+
+> **Comparison of the use case diagram with the actions that the user can finally perform**:
+
+- Log in - yes, Sign up - no;
+- If you want Upload file, first you need to choose folder and just then a file;
+- Added options: edit text file, relocate files between folders, create subfolders
+
+
+
+## Organization and distribution of the tasks
+
+Sush as [**Valentino Traverso**](https://github.com/valentraverso) has more expirience in PHP, he has taken the leading role in this project.
+
+_The biggest part_ of the time we have used **peer coding** to see together how work diferent PHP methods and share experience:
+- Interfaces for Log in/Sign out, General Files Explorer page, Edit .txt document;
+
+Then, we shared tasks:
+[**Valentino Traverso**](https://github.com/valentraverso): created functions to search files and folders in subfolders;
+[**Iuliia Shikhanova**](https://github.com/IuliiaNova): created functions to move files between folders
+
+
+## Sources of information :bulb:
+
+PHP official [website](https://www.php.net/)
-\* HTML
-\* CSS
+## Goals of the project
-\* JS
+- Understand how works PHP in the real project,
+- Using of fetch to pass dates from PHP to JS,
+- Improve our knowledges in logic and programming,
+- Understand what is a file system and how it works,
-\* PHP
-## Resources
+## Authors :pencil2:
-- [File system](https://es.wikipedia.org/wiki/Administrador_de_archivos)
-- [PHP FileSystem W3C](https://www.w3schools.com/php/php_ref_filesystem.asp)
-- [PHP FileSystem Oficial](https://www.php.net/manual/es/book.filesystem.php)
-- [README Guidelines Example](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2)
+This project was made for [Assembler Institute of Technology](https://assemblerinstitute.com/) by:
+[**Valentino Traverso**](https://github.com/valentraverso) and
+[**Iuliia Shikhanova**](https://github.com/IuliiaNova)
diff --git a/assets/add-trash.php b/assets/add-trash.php
new file mode 100755
index 00000000..978a19d8
--- /dev/null
+++ b/assets/add-trash.php
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/assets/close-session.php b/assets/close-session.php
new file mode 100755
index 00000000..5ce04519
--- /dev/null
+++ b/assets/close-session.php
@@ -0,0 +1,7 @@
+
\ No newline at end of file
diff --git a/assets/delete-file.php b/assets/delete-file.php
new file mode 100755
index 00000000..519fe6c3
--- /dev/null
+++ b/assets/delete-file.php
@@ -0,0 +1,7 @@
+
diff --git a/assets/delete-folder.php b/assets/delete-folder.php
new file mode 100755
index 00000000..142279f8
--- /dev/null
+++ b/assets/delete-folder.php
@@ -0,0 +1,20 @@
+
\ No newline at end of file
diff --git a/assets/display-content.php b/assets/display-content.php
new file mode 100755
index 00000000..1e1880c4
--- /dev/null
+++ b/assets/display-content.php
@@ -0,0 +1,8 @@
+
\ No newline at end of file
diff --git a/assets/display-folders.php b/assets/display-folders.php
new file mode 100755
index 00000000..f21316bd
--- /dev/null
+++ b/assets/display-folders.php
@@ -0,0 +1,16 @@
+
\ No newline at end of file
diff --git a/assets/display-metadata-file.php b/assets/display-metadata-file.php
new file mode 100755
index 00000000..8f74daa5
--- /dev/null
+++ b/assets/display-metadata-file.php
@@ -0,0 +1,16 @@
+ $creationDate, "modify"=> $lastModification, "size"=> $size);
+
+
+
+echo json_encode($information);
+
+
+?>
\ No newline at end of file
diff --git a/assets/documentation/Diagram - Diagram copia.pdf b/assets/documentation/Diagram - Diagram copia.pdf
new file mode 100644
index 00000000..64bc3f6a
Binary files /dev/null and b/assets/documentation/Diagram - Diagram copia.pdf differ
diff --git a/assets/documentation/Diagram - Diagram.pdf b/assets/documentation/Diagram - Diagram.pdf
new file mode 100644
index 00000000..64bc3f6a
Binary files /dev/null and b/assets/documentation/Diagram - Diagram.pdf differ
diff --git a/assets/documentation/Resords problems && Lessons.pdf b/assets/documentation/Resords problems && Lessons.pdf
new file mode 100644
index 00000000..6424c8c7
Binary files /dev/null and b/assets/documentation/Resords problems && Lessons.pdf differ
diff --git a/assets/edit-text.php b/assets/edit-text.php
new file mode 100755
index 00000000..848e491b
--- /dev/null
+++ b/assets/edit-text.php
@@ -0,0 +1,17 @@
+
\ No newline at end of file
diff --git a/assets/js/app.js b/assets/js/app.js
new file mode 100755
index 00000000..46178b40
--- /dev/null
+++ b/assets/js/app.js
@@ -0,0 +1,777 @@
+const divFolders = document.getElementById('folder');
+const btnCreateFolder = document.querySelector("#create-new-folder");
+const divFiles = document.getElementById('files');
+const btnDeleteFile = document.querySelector("#delete-file");
+let btnRelocateFile = document.querySelector("#relocate-file");
+let btnOpenTrash = document.querySelector("#trash-folder");
+const btnClosePopUp = document.getElementById("close-popup");
+
+// Display Folders Left Side
+function getInfoFolders() {
+ while (divFolders.firstChild) {
+ divFolders.removeChild(divFolders.lastChild);
+ }
+
+ while (divFiles.firstChild) {
+ divFiles.removeChild(divFiles.lastChild);
+ }
+
+ fetch('../assets/display-folders.php')
+ .then(response => response.json())
+ .then(data => displayFolderIndex(data));
+
+ let h1Files = document.createElement('h1');
+ h1Files.textContent = 'Welcome! Please choose a folder😁🖼️';
+ h1Files.id = 'choose-folder-h1';
+
+ divFiles.prepend(h1Files);
+}
+
+function resetMainFolderTab(){
+ while (divFolders.firstChild) {
+ divFolders.removeChild(divFolders.lastChild);
+ }
+
+ fetch('../assets/display-folders.php')
+ .then(response => response.json())
+ .then(data => displayFolderIndex(data));
+}
+function displayFolderIndex(data) {
+ foldersArray = data;
+
+ foldersArray.forEach(folder => {
+ let elLi = document.createElement('li');
+
+ let elDiv = document.createElement('div');
+ let elImgFolder = document.createElement('img');
+
+ let divBtns = document.createElement('div');
+
+ let spanEdit = document.createElement('span');
+ let iEdit = document.createElement('i');
+
+ let spanDelete = document.createElement('span');
+ let iDelete = document.createElement('i');
+
+ elDiv.className = 'select-folder';
+ elDiv.setAttribute('name-folder', folder);
+ elDiv.textContent = folder;
+ elImgFolder.src = '../image/folder.ico';
+ elImgFolder.className = 'imageFolder';
+ elImgFolder.alt = 'image Folder';
+
+ spanEdit.className = 'modify-name-folder';
+ spanEdit.setAttribute('actual-folder', folder);
+ iEdit.className = 'fa-solid fa-pen';
+
+ spanDelete.className = 'delete-folder';
+ iDelete.className = 'fa-solid fa-trash';
+ iDelete.id = 'delete-folder';
+ spanDelete.setAttribute('filePath', folder);
+
+ divFolders.prepend(elLi);
+
+ elLi.appendChild(elDiv);
+ elDiv.prepend(elImgFolder);
+
+ elLi.appendChild(divBtns);
+
+ divBtns.appendChild(spanEdit);
+ spanEdit.appendChild(iEdit);
+
+ divBtns.appendChild(spanDelete);
+ spanDelete.appendChild(iDelete);
+ })
+
+ const modifyNameFolder = document.querySelectorAll(".modify-name-folder");
+ const selectFolder = document.querySelectorAll(".select-folder");
+ const deleteFolder = document.querySelectorAll(".delete-folder");
+
+ modifyNameFolder.forEach((item) => {
+ item.addEventListener("click", modifyNameFolders)
+ });
+
+
+ deleteFolder.forEach((item) => {
+ item.addEventListener("click", deleteFolders)
+ });
+
+ selectFolder.forEach((item) => {
+ item.addEventListener("click", selectFolders)
+ });
+}
+
+// Option Folders
+
+function createNewFolder(pathNewFolder) {
+ let newName = prompt(`Assign a name to the new folder.`);
+
+ if (newName !== 'null' && typeof newName !== 'object') {
+ if (typeof pathNewFolder !== 'object') {
+ newName = pathNewFolder + "/" + newName;
+ }
+
+ fetch("../assets/create-folder.php?nameFolder=" + newName)
+ .then(response => response.json(),
+ reject => alert('There was an error, we couldnt create the folder!'))
+ .then(info => {
+ if (info.exists) {
+ alert(info.msg);
+ } else {
+ if (typeof pathNewFolder !== 'object') {
+ createFilesTab(pathNewFolder);
+ } else {
+ getInfoFolders();
+ }
+ }
+ });
+ }
+}
+
+function modifyNameFolders(event) {
+ let actualFolderName = event.currentTarget.getAttribute('actual-folder');
+ let newName = prompt(`Put new folder name for "${actualFolderName}", please/`);
+
+ if (newName) {
+ fetch("../assets/modify-folder.php?nameFolder=" + newName + "&actualFolderName=" + actualFolderName)
+ .then(response => {
+ if (response.status === 200) {
+ getInfoFolders();
+ } else {
+ alert('There was an error, we couldnt change the name of the folder!');
+ }
+ })
+ }
+}
+
+function deleteFolders(event) {
+ let actualFolderName = event.currentTarget.getAttribute('filePath');
+
+ let popUpDeleteConfirm;
+ if (actualFolderName.includes('Trash/') === true) {
+ popUpDeleteConfirm = confirm("This folder will delete permanently, are you sure to delete it?");
+ } else {
+ popUpDeleteConfirm = confirm(`Do you want delete "${actualFolderName}" folder?`);
+ }
+
+ if (popUpDeleteConfirm) {
+ if (actualFolderName.includes('Trash/') === true) {
+ deleteFolderTrash(actualFolderName);
+ createFilesTab('Trash');
+ }else if(actualFolderName.includes('/') === true){
+ atrBasura = '../root/' + actualFolderName;
+ addTrash(atrBasura);
+ }else{
+ atrBasura = '../root/' + actualFolderName;
+ addTrash(atrBasura);
+ resetMainFolderTab();
+ }
+ }
+}
+
+function moveFolders(folderPath) {
+ fetch('../assets/display-content.php?actualFolderName=')
+ .then(response => response.json())
+ .then(data => listFoldersPopUp(data));
+}
+
+function listFoldersPopUp(data) {
+ hideOptionPopUp('both');
+
+ const divViewContent = document.querySelector('#view-content');
+ const filePopUp = document.querySelector('#file-show-popup');
+
+ filePopUp.style.display = 'none';
+
+ let divPopUpMove = document.createElement('div');
+ divPopUpMove.className = 'move-btwn-folders';
+
+ let spanMoveTo = document.createElement('h2');
+ spanMoveTo.textContent = 'Move To';
+
+ divViewContent.prepend(divPopUpMove);
+ divPopUpMove.prepend(spanMoveTo);
+
+ data.forEach(folder => {
+ let indexSlashPath = folder.lastIndexOf('/');
+ let pathFolderNoSlash = folder.slice(indexSlashPath + 1);
+
+ if (!pathFolderNoSlash.includes('.')) {
+ let divFolder = document.createElement('div');
+ divFolder.className = 'inside-btwn';
+
+ let spanFolder = document.createElement('span');
+ spanFolder.textContent = pathFolderNoSlash;
+ spanFolder.id = 'span-folder-move';
+ spanFolder.setAttribute('file-path', pathFolderNoSlash)
+
+ divPopUpMove.appendChild(divFolder);
+ divFolder.prepend(spanFolder);
+
+ showFolderInsideMove(pathFolderNoSlash, divFolder);
+
+ spanFolder.addEventListener('click', relocateFileTo);
+ }
+ })
+}
+
+function showFolderInsideMove(folderPath, divFolder, i) {
+ fetch('../assets/display-content.php?actualFolderName=' + folderPath)
+ .then(response => response.json())
+ .then(data => {
+ data.forEach(folder => {
+ let folderNoRoot = folder.slice(8);
+
+ let folderNameSlash = folder.lastIndexOf('/');
+ let folderName = folder.slice(folderNameSlash + 1);
+
+ if (!folderNoRoot.includes('.')) {
+ let insideDiv = document.createElement('div');
+ insideDiv.className = 'inside-div-move';
+
+ let spanInside = document.createElement('span');
+ spanInside.textContent = folderName;
+ spanInside.setAttribute('file-path', folderNoRoot);
+
+ divFolder.appendChild(insideDiv);
+ insideDiv.appendChild(spanInside);
+
+ showFolderInsideMove(folderNoRoot, insideDiv);
+
+ spanInside.addEventListener('click', relocateFileTo);
+ }
+ });
+ });
+}
+
+// Display Files of the folder | middle
+
+function selectFolders(event) {
+ let openFolder = event.srcElement.getAttribute('name-folder');
+
+ createFilesTab(openFolder);
+}
+
+function createFilesTab(folderName) {
+ while (divFiles.firstChild) {
+ divFiles.removeChild(divFiles.lastChild);
+ }
+
+ let bodyTable = document.createElement("table");
+ let tableRow = document.createElement("tr");
+
+ divFiles.appendChild(bodyTable);
+ bodyTable.appendChild(tableRow);
+ bodyTable.id = "tableFolder";
+
+ for (let i = 0; i < 4; i++) {
+ let nameHead = "";
+ switch (i) {
+ case 0:
+ nameHead = "File name:";
+ break
+ case 1:
+ nameHead = "Created date:";
+ break
+ case 2:
+ nameHead = "Modified date:";
+ break
+ case 3:
+ nameHead = "Size:";
+ break
+ }
+ tableRow.appendChild(document.createElement("th")).textContent = nameHead;
+ }
+
+ createButtonsFile(folderName);
+
+ if(!folderName.includes('Trash')){
+ let btnCreateInsideFolder = document.querySelector('#create-folder-inside')
+ let pathCreateNewFolder = btnCreateInsideFolder.getAttribute('folder-path');
+ btnCreateInsideFolder.addEventListener('click', () => {
+ createNewFolder(pathCreateNewFolder);
+ });
+
+}
+
+
+ fetch("../assets/display-content.php?actualFolderName=" + folderName)
+ .then(response => response.json())
+ .then(data => showelementosOfFolder(data))
+}
+
+function showelementosOfFolder(data) {
+ data.forEach(file => {
+ const containerOpenFolder = document.querySelector("#tableFolder");
+ let trFile = document.createElement("tr");
+ let cutPath = file.lastIndexOf("/");
+ let pathFile = file.slice(cutPath + 1);
+ containerOpenFolder.appendChild(trFile);
+ trFile.className += "elemtoOfFolder";
+ trFile.setAttribute("filePath", file);
+
+ fetch("../assets/display-metadata-file.php?filePath=" + file)
+ .then(response => response.json())
+ .then(data => constructorTable(data, pathFile, trFile))
+
+ })
+
+ let folderElement = document.querySelectorAll(".elemtoOfFolder");
+ folderElement.forEach((item) => {
+ item.addEventListener("click", showInfoElement)
+ });
+}
+
+function constructorTable(data, pathFile, trFile) {
+ for (let i = 0; i < 4; i++) {
+ let size = "";
+ if (data.size <= 1024000) {
+ let sizeKb = Math.round(data.size / 1024 * 10) / 10;
+ size = sizeKb + "Kb";
+ } else {
+ let sizeMb = Math.round(data.size / 1024000 * 10) / 10;
+ size = sizeMb + "MB";
+ }
+
+ let infoTd = "";
+ switch (i) {
+ case 0:
+ infoTd = pathFile;
+
+ break
+
+ case 1:
+ infoTd = data.modify;
+ break
+ case 2:
+ infoTd = data.creation;
+ break
+ case 3:
+ infoTd = size;
+ break;
+ }
+ let tdRow = document.createElement("td");
+ tdRow.textContent = infoTd;
+
+
+ if (i === 0) {
+ let extension = getPathExtension(pathFile);
+ let img = document.createElement("img");
+
+ switch (extension) {
+ case "mp3":
+ img.src = "../image/mp3.png";
+ break
+ case "mp4":
+ img.src = "../image/mp4.png";
+ break
+ case "txt":
+ img.src = "../image/txt.png";
+ break
+ case "img":
+ img.src = "../image/img2.jpeg";
+ break
+ }
+ tdRow.prepend(img);
+ }
+ trFile.appendChild(tdRow);
+ }
+}
+
+// Get into folder inside a folder
+
+function displayInsideFolder(folderName) {
+ let pathFile = folderName;
+
+ if (folderName.includes("../root/")) {
+ pathFile = folderName.slice(8);
+ }
+
+ createFilesTab(pathFile);
+
+ let indexPreviousFolder = pathFile.lastIndexOf("/");
+ let backPath = pathFile.slice(0, indexPreviousFolder);
+
+ const btnFiles = document.querySelector('.buttons-files');
+ const btnAddFolder = document.querySelector('#create-folder-inside');
+
+ const backSpan = document.createElement('span');
+ backSpan.textContent = '< Go back';
+ backSpan.setAttribute('back-path', backPath);
+ backSpan.id = 'btn-backpath';
+
+ let btnDeleteInsideFolder = document.createElement('span');
+ let iDeleteFolder = document.createElement('i');
+ iDeleteFolder.className = 'fa-solid fa-trash';
+ btnDeleteInsideFolder.id = 'delete-folder-inside';
+ btnDeleteInsideFolder.textContent = 'Delete Folder';
+ btnDeleteInsideFolder.setAttribute('filePath', pathFile);
+
+ btnFiles.prepend(backSpan);
+
+ if(!pathFile.includes('Trash')){
+ btnAddFolder.insertAdjacentElement('afterend', btnDeleteInsideFolder);
+ }else{
+ backSpan.insertAdjacentElement('afterend', btnDeleteInsideFolder);
+ }
+ btnDeleteInsideFolder.prepend(iDeleteFolder);
+
+ backSpan.addEventListener('click', () => {
+ if (backPath.lastIndexOf("/") === -1) {
+ while (backSpan.firstChild) {
+ backSpan.removeChild(backSpan.lastChild);
+ }
+ while (btnDeleteInsideFolder.firstChild) {
+ btnDeleteInsideFolder.removeChild(btnDeleteInsideFolder.lastChild);
+ }
+ createFilesTab(backPath);
+ } else {
+ displayInsideFolder(backPath);
+ }
+ });
+
+ btnDeleteInsideFolder.addEventListener('click', deleteFolders);
+}
+
+// Options files
+
+function createButtonsFile(folderPath) {
+ const h1Files = document.querySelector('#choose-folder-h1');
+ if (h1Files !== null) {
+ h1Files.remove();
+ }
+
+ let divOptionsFolder = document.createElement('div');
+ divOptionsFolder.className = 'buttons-files';
+
+ divFiles.prepend(divOptionsFolder);
+
+ if(!folderPath.includes('Trash')){
+
+ let btnCreateFile = document.createElement('span');
+ let iCreateFile = document.createElement('i');
+ iCreateFile.className = 'fa-solid fa-file';
+ btnCreateFile.textContent = 'New File';
+ btnCreateFile.setAttribute('folder-path', folderPath)
+
+ let btnCreateFolder = document.createElement('span');
+ let iCreateFolder = document.createElement('i');
+ iCreateFolder.className = 'fa-solid fa-plus';
+ btnCreateFolder.id = 'create-folder-inside';
+ btnCreateFolder.textContent = 'New Folder';
+ btnCreateFolder.setAttribute('folder-path', folderPath);
+
+ let spanNameFolder = document.createElement('span');
+ spanNameFolder.id = 'name-folder';
+ spanNameFolder.textContent = folderPath;
+
+ divOptionsFolder.appendChild(btnCreateFile);
+ btnCreateFile.prepend(iCreateFile);
+
+ divOptionsFolder.appendChild(btnCreateFolder);
+ btnCreateFolder.prepend(iCreateFolder);
+
+ divOptionsFolder.appendChild(spanNameFolder);
+
+ btnCreateFile.addEventListener('click', createPopUpUpload);
+ }
+}
+
+// Get info of the files
+
+function getPathExtension(path) {
+ let cutExtension = path.lastIndexOf(".");
+ let pathExtension = path.slice(cutExtension + 1);
+ let formatImg = ["jpg", "png", "webp"];
+
+ if (formatImg.includes(pathExtension)) {
+ pathExtension = "img";
+ }
+
+ return pathExtension;
+}
+
+function showInfoElement(event) {
+ let atrituboFile = event.currentTarget.getAttribute("filePath")
+ let pathExtension = getPathExtension(atrituboFile);
+
+ switch (pathExtension) {
+ case "txt":
+ let cutPath = atrituboFile.indexOf("/");
+ let pathFile = atrituboFile.slice(cutPath + 1);
+ window.location.replace("../text-editor.php?pathFile=" + pathFile);
+ break;
+ case "img":
+ createFileContent("img", atrituboFile);
+ break;
+ case "mp4":
+ createFileContent("mp4", atrituboFile);
+ break;
+ case "mp3":
+ createFileContent("mp3", atrituboFile);
+ break;
+ default:
+ displayInsideFolder(atrituboFile);
+ break;
+ }
+
+ btnDeleteFile.setAttribute("filePath", atrituboFile)
+ btnDeleteFile.addEventListener("click", deleteFile);
+
+ btnRelocateFile.setAttribute("filePath", atrituboFile);
+}
+
+// Relocate documento
+
+function relocateFileTo(path) {
+ let filePath = btnRelocateFile.getAttribute("filePath");
+ let newFilePath = path.currentTarget.getAttribute('file-path');
+ let confirmMove = confirm(`Where do you want to move this file to ${newFilePath}?`);
+
+ if (confirmMove) {
+ fetch("../assets/relocate-file.php?filepath=" + filePath + "&folderName=" + newFilePath)
+ .then(response => response.json())
+ .then(data => {
+ if (data.code === 200) {
+ document.querySelector('.move-btwn-folders').remove();
+ closePopUp();
+ if (data.redir.match("/")) {
+ displayInsideFolder(data.redir);
+ } else {
+ createFilesTab(data.redir);
+ }
+ } else if (data.code === 500) {
+ alert(code.msg);
+ }
+ });
+ }
+
+}
+
+// Move to trash / delete
+
+function deleteFile() {
+ let basura = document.querySelector("#delete-file");
+ let atrBasura = basura.getAttribute("filePath");
+
+ let popUpDeleteConfirm;
+ if (atrBasura.includes('/Trash/') === true) {
+ popUpDeleteConfirm = confirm("This file will delete permanently, are you sure to delete it?");
+ } else {
+ popUpDeleteConfirm = confirm("Do you want delete this file?");
+ }
+
+ if (popUpDeleteConfirm) {
+ addTrash(atrBasura);
+ }
+}
+
+function addTrash(atrBasura) {
+ if (atrBasura.includes('/Trash/') === true) {
+ fetch("../assets/delete-file.php?filePath=" + atrBasura)
+ .then(response => {
+ if (atrBasura.split('.').length > 3) {
+ closePopUp();
+ }
+ createFilesTab('Trash');
+ });
+ } else {
+ fetch("../assets/add-trash.php?filePath=" + atrBasura)
+ .then(response => {
+ if (atrBasura.split('.').length > 3) {
+ closePopUp();
+ }
+ if(atrBasura.split('/').length === 2){
+ getInfoFolders();
+ }else{
+ createFilesTab('Trash');
+ }
+ });
+ }
+}
+
+function deleteFolderTrash(atrBasura){
+ fetch("../assets/delete-folder.php?filePath=" + atrBasura)
+ .then(response => response.json())
+}
+
+function openTrashFolder() {
+ createFilesTab("Trash");
+}
+
+// Pop Up Options
+
+function hideOptionPopUp(option) {
+ switch (option) {
+ case 'delete':
+ btnDeleteFile.style.display = 'none';
+ break;
+ case 'move':
+ btnRelocateFile.style.display = 'none';
+ break;
+ case 'both':
+ btnRelocateFile.style.display = 'none';
+ btnDeleteFile.style.display = 'none';
+ break;
+ }
+}
+
+function showOptionPopUp(option) {
+ switch (option) {
+ case 'delete':
+ btnDeleteFile.style.display = 'initial';
+ break;
+ case 'move':
+ btnRelocateFile.style.display = 'initial';
+ break;
+ case 'both':
+ btnRelocateFile.style.display = 'initial';
+ btnDeleteFile.style.display = 'initial';
+ break;
+ }
+}
+
+// Create Pop up Files
+
+function createPopUpUpload(event) {
+ const pathFile = event.currentTarget.getAttribute('folder-path');
+
+ const divViewContent = document.querySelector('#view-content');
+ const trashBtn = document.querySelector('#delete-file');
+
+ hideOptionPopUp('both');
+
+ let elForm = document.createElement('form');
+ elForm.setAttribute('enctype', 'multipart/form-data');
+ elForm.method = 'post';
+
+ let divBackgroundUpload = document.createElement('div');
+ divBackgroundUpload.className = 'upload-file-pop-up';
+
+ let inputFile = document.createElement('input');
+ inputFile.type = 'file';
+ inputFile.name = 'uploadFile';
+
+ let inputPath = document.createElement('input');
+ inputPath.type = 'hidden';
+ inputPath.name = 'uploadFolder';
+ inputPath.value = pathFile;
+
+ let btnUpload = document.createElement('button');
+ btnUpload.textContent = 'Upload File';
+ btnUpload.id = 'btn-upload-file';
+
+ divViewContent.prepend(elForm);
+ elForm.appendChild(divBackgroundUpload)
+ divBackgroundUpload.appendChild(inputFile);
+ divBackgroundUpload.appendChild(inputPath);
+ divBackgroundUpload.appendChild(btnUpload);
+
+ elForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+
+ let formData = new FormData(elForm);
+
+ fetch('../assets/upload-file.php', {
+ method: "POST",
+ body: formData
+ })
+ .then(response => response.json())
+ .then(info => {
+ if (info.status) {
+ trashBtn.style.display = 'initial';
+
+ closePopUp();
+
+ if (pathFile.includes("/")) {
+ console.log('subido')
+ displayInsideFolder(pathFile);
+ } else {
+ console.log('subido carpeta')
+ createFilesTab(pathFile);
+ }
+
+ alert(info.msg);
+ } else {
+ alert(info.msg);
+ }
+ });
+ });
+
+ displayPopUp();
+
+ let btnClosePopUp = document.getElementById('close-popup');
+ btnClosePopUp.addEventListener('click', () => {
+ trashBtn.style.display = 'initial';
+ })
+}
+
+function createFileContent(typeFile, data) {
+ const containerContent = document.querySelector("#view-content");
+
+ while (containerContent.firstChild) {
+ containerContent.removeChild(containerContent.lastChild);
+ }
+
+ if (typeFile === "txt") {
+ let elementTxt = document.createElement("div");
+ elementTxt.textContent = data;
+ containerContent.appendChild(elementTxt);
+ } else if (typeFile === "img") {
+ let elementImg = document.createElement("img");
+ elementImg.src = data;
+ elementImg.id = 'file-show-popup';
+ containerContent.appendChild(elementImg);
+ } else if (typeFile === "mp4") {
+ let elementVideo = document.createElement("video");
+ elementVideo.controls = true;
+ elementVideo.id = 'file-show-popup';
+ let elementSource = document.createElement("source");
+ elementSource.src = data;
+ elementSource.setAttribute("type", "video/mp4");
+ containerContent.appendChild(elementVideo);
+ elementVideo.appendChild(elementSource);
+ } else if (typeFile === "mp3") {
+ let elementAudio = document.createElement("audio");
+ elementAudio.controls = true;
+ elementAudio.id = 'file-show-popup';
+ let elementAudioSource = document.createElement("source");
+ elementAudioSource.src = data;
+ elementAudioSource.setAttribute("type", "audio/mpeg");
+ containerContent.appendChild(elementAudio);
+ elementAudio.appendChild(elementAudioSource);
+ }
+
+ displayPopUp();
+}
+
+
+// PopUp open and PopUp Close
+
+function displayPopUp() {
+ const viewContent = document.querySelector('.pop-up-file');
+ viewContent.classList.toggle('hidden');
+
+}
+
+function closePopUp() {
+ const viewContent = document.querySelector('.pop-up-file');
+ viewContent.classList.toggle('hidden');
+ const containerContent = document.querySelector("#view-content");
+ showOptionPopUp('both');
+ while (containerContent.firstChild) {
+ containerContent.removeChild(containerContent.lastChild);
+ }
+}
+
+// AddEventListeners
+
+window.addEventListener('load', getInfoFolders);
+
+btnRelocateFile.addEventListener("click", moveFolders);
+
+btnCreateFolder.addEventListener("click", createNewFolder);
+
+btnClosePopUp.addEventListener('click', closePopUp);
+
+btnOpenTrash.addEventListener("click", openTrashFolder);
\ No newline at end of file
diff --git a/assets/js/results.js b/assets/js/results.js
new file mode 100755
index 00000000..612b0807
--- /dev/null
+++ b/assets/js/results.js
@@ -0,0 +1,93 @@
+const contentFile = document.querySelectorAll(".file-search");
+const file = document.querySelectorAll('.file-search');
+const btnClosePopUp = document.getElementById("close-popup");
+
+function showInfoElement(event) {
+ let atrituboFile = event.srcElement.getAttribute("filePath")
+ let cutExtension = atrituboFile.lastIndexOf(".");
+ let pathExtension = atrituboFile.slice(cutExtension + 1);
+
+ let formatImg = ["jpg", "png", "webp"];
+
+ if (formatImg.includes(pathExtension)) {
+ pathExtension = "img";
+ }
+ switch (pathExtension) {
+ case "txt":
+ let pathTxt = "../" + atrituboFile;
+ fetch("assets/display-info-file.php?filePath=" + pathTxt)
+ .then(response => response.json())
+ .then(data => createFileContent("txt", data, atrituboFile))
+
+ break
+ case "img":
+ createFileContent("img", atrituboFile);
+ break
+ case "mp4":
+ createFileContent("mp4", atrituboFile);
+ break
+ case "mp3":
+ createFileContent("mp3", atrituboFile);
+ break
+ default:
+ console.log("no podemos descargar este archivo")
+ break
+ }
+}
+
+function createFileContent(typeFile, data, pathTxt) {
+ const containerContent = document.querySelector("#view-content");
+
+ while (containerContent.firstChild) {
+ containerContent.removeChild(containerContent.lastChild);
+ }
+ if (typeFile === "txt") {
+ let elementTxt = document.createElement("div");
+ elementTxt.textContent = data;
+ containerContent.appendChild(elementTxt);
+
+
+ } else if (typeFile === "img") {
+ let elementImg = document.createElement("img");
+ elementImg.src = data;
+ containerContent.appendChild(elementImg);
+
+ } else if (typeFile === "mp4") {
+ let elementVideo = document.createElement("video");
+ elementVideo.controls = true;
+ let elementSource = document.createElement("source");
+ elementSource.src = data;
+ elementSource.setAttribute("type", "video/mp4");
+ containerContent.appendChild(elementVideo);
+ elementVideo.appendChild(elementSource);
+
+ } else if (typeFile === "mp3") {
+ let elementAudio = document.createElement("audio");
+ elementAudio.controls = true;
+ let elementAudioSource = document.createElement("source");
+ elementAudioSource.src = data;
+ elementAudioSource.setAttribute("type", "audio/mpeg");
+ containerContent.appendChild(elementAudio);
+ elementAudio.appendChild(elementAudioSource);
+ }
+}
+
+function displayPopUp() {
+ const viewContent = document.querySelector('.pop-up-file');
+ viewContent.classList.toggle('hidden');
+}
+
+function closePopUp() {
+ const viewContent = document.querySelector('.pop-up-file');
+ viewContent.classList.toggle('hidden');
+}
+
+contentFile.forEach((item) => {
+ item.addEventListener("click", showInfoElement)
+});
+
+file.forEach(item => {
+ item.addEventListener('click', displayPopUp);
+})
+
+btnClosePopUp.addEventListener('click', closePopUp);
\ No newline at end of file
diff --git a/assets/js/txt-editor.js b/assets/js/txt-editor.js
new file mode 100755
index 00000000..1c232286
--- /dev/null
+++ b/assets/js/txt-editor.js
@@ -0,0 +1,33 @@
+const btnDeleteFileTxt = document.querySelector("#delete-txt");
+btnDeleteFileTxt.addEventListener("click", deleteFileTxt);
+
+
+function deleteFileTxt(event){
+ event.preventDefault();
+ const popUpDeleteConfirm = confirm("Do you want delete this file?");
+ let filePath;
+
+ if (popUpDeleteConfirm) {
+ filePath = event.srcElement.getAttribute("filePath");
+ console.log(filePath)
+
+ fetch("assets/add-trash.php?filePath="+filePath);
+ window.location.replace("root");
+}
+}
+
+const btnSaveChangedFileTxt = document.querySelector("#modify-file");
+btnSaveChangedFileTxt.addEventListener("click", saveModifiedFile);
+
+function saveModifiedFile(){
+ const confirmModify = confirm("Do you want save changes?");
+ if(confirmModify){
+ alert("Your changes were saved successful!");
+ }
+}
+
+
+
+
+
+
diff --git a/assets/login.php b/assets/login.php
new file mode 100755
index 00000000..8955cd24
--- /dev/null
+++ b/assets/login.php
@@ -0,0 +1,23 @@
+
\ No newline at end of file
diff --git a/assets/modify-folder.php b/assets/modify-folder.php
new file mode 100755
index 00000000..63e7c884
--- /dev/null
+++ b/assets/modify-folder.php
@@ -0,0 +1,7 @@
+
\ No newline at end of file
diff --git a/assets/relocate-file.php b/assets/relocate-file.php
new file mode 100755
index 00000000..bdd17050
--- /dev/null
+++ b/assets/relocate-file.php
@@ -0,0 +1,22 @@
+
\ No newline at end of file
diff --git a/assets/upload-file.php b/assets/upload-file.php
new file mode 100755
index 00000000..d8c18460
--- /dev/null
+++ b/assets/upload-file.php
@@ -0,0 +1,22 @@
+
\ No newline at end of file
diff --git a/image/csv.png b/image/csv.png
new file mode 100755
index 00000000..41b84e16
Binary files /dev/null and b/image/csv.png differ
diff --git a/image/doc.png b/image/doc.png
new file mode 100755
index 00000000..42fe1140
Binary files /dev/null and b/image/doc.png differ
diff --git a/image/folder.ico b/image/folder.ico
new file mode 100755
index 00000000..fc05bd1b
Binary files /dev/null and b/image/folder.ico differ
diff --git a/image/img2.jpeg b/image/img2.jpeg
new file mode 100755
index 00000000..2e6bba84
Binary files /dev/null and b/image/img2.jpeg differ
diff --git a/image/logo.webp b/image/logo.webp
new file mode 100755
index 00000000..6c7957bb
Binary files /dev/null and b/image/logo.webp differ
diff --git a/image/logoNew.png b/image/logoNew.png
new file mode 100755
index 00000000..a415c3c7
Binary files /dev/null and b/image/logoNew.png differ
diff --git a/image/mp3.png b/image/mp3.png
new file mode 100755
index 00000000..071b2a59
Binary files /dev/null and b/image/mp3.png differ
diff --git a/image/mp4.png b/image/mp4.png
new file mode 100755
index 00000000..46b29fe3
Binary files /dev/null and b/image/mp4.png differ
diff --git a/image/txt.png b/image/txt.png
new file mode 100755
index 00000000..51d43a1f
Binary files /dev/null and b/image/txt.png differ
diff --git a/index.php b/index.php
new file mode 100755
index 00000000..0c9b1100
--- /dev/null
+++ b/index.php
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+ 
+
+ My folders
+
+
+
++ +
+
+
+
+
+
+
+
+
+Trash
+ +
+
+
+Search Results
'; + + foreach ( $indexFile as $indexResult ) { + if(strpos($arrayFile[$indexResult], '.')){ + $positionSlashFile = strpos( $arrayFile[ $indexResult ], '/', 5 ); + $fileWithoutSlash = substr( $arrayFile[ $indexResult ], $positionSlashFile ); + echo ''.$arrayFile[ $indexResult ].'
';
+ }else{
+ $positionSlashFolder = strpos( $arrayFile[$indexResult], '/' );
+ $folderWithoutSlash = substr( $arrayFile[$indexResult], $positionSlashFolder );
+
+ echo '
+ Text editor
+
+
+
+
+
+
+
'.$folderWithoutSlash.'
';
+ }
+ }
+ }else if ( sizeof( $indexFile ) === 0 ) {
+ echo "Upppsss!! We couldn't find this file or folder 😔
"; + } + + // if ( sizeof( $indexFolder ) >= 1 ) { + // + // foreach ( $indexFolder as $folderResult ) { + // $positionSlashFolder = strpos( $arrayFolder[ $folderResult ], '/' ); + // $folderWithoutSlash = substr( $arrayFolder[ $folderResult ], $positionSlashFolder ); + + // if ( sizeof( $indexFile ) >= 1 ) { + // echo '
+ //
';
+ // } else {
+ // echo ''.$folderWithoutSlash.'
';
+
+ // foreach ( $indexFile as $indexResult ) {
+ // $positionSlash = strpos( $arrayFile[ $indexResult ], '/', 5 );
+ // $fileWithoutSlash = substr( $arrayFile[ $indexResult ], $positionSlash + 1 );
+
+ // if ( strpos( $arrayFile[ $indexResult ], $arrayFolder[ $folderResult ] ) !== false ) {
+ // echo ''. $fileWithoutSlash .'
';
+ // continue;
+ // }
+
+ // echo ''. $fileWithoutSlash .'
';
+
+ // }
+
+ // echo '
+ //
';
+
+ // }
+ // }
+ // } else {
+
+
+
+ ?>
+
+
+
+
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100755
index 00000000..063eca22
--- /dev/null
+++ b/style.css
@@ -0,0 +1,386 @@
+*{
+ font-family: 'Roboto', sans-serif;
+}
+body{
+ margin: 0;
+}
+
+/* Login */
+
+#form{
+ width:30%;
+}
+
+#form input{
+ width:100%;
+ border: 0;
+ border-bottom:1px solid #000;
+}
+
+#form input:focus{
+ outline:none;
+ border: 0;
+ border-bottom:1px solid rgb(1, 1, 211);
+}
+
+#loginBody {
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+gap: 10px;
+}
+
+#logoLogin{
+ border-radius: 50%;
+}
+
+#errorMessageLogin{
+ color:red;
+ font-weight: 800;
+}
+
+.marginLogin{
+ margin:20px 0;
+}
+
+/* Panel */
+
+header{
+padding: 10px;
+background-color: #F9DCC4;
+}
+
+#navigation{
+ display: grid;
+ grid-template-columns: 20% 60% 20%;
+ justify-content:space-between;
+
+}
+
+main{
+ display: grid;
+ grid-template-columns: 20% 80%;
+ padding: 10px;
+ height: 90vh;
+}
+
+#folders{
+ border-right: 1px solid black;
+ padding: 10px;
+}
+
+#show-files{
+ border-left: 1px solid black;
+ padding: 10px;
+}
+
+#files{
+ padding: 10px;
+}
+
+table{
+ border-spacing: 0;
+}
+
+.elemtoOfFolder{
+ padding:0 2px;
+}
+
+.elemtoOfFolder:hover{
+ background: #e1e1e1;
+}
+
+#logo-panel{
+ width: 4rem;
+}
+
+#folder{
+ width: 100%;
+ cursor: pointer;
+}
+img.imageFolder{
+ height: 1rem;
+ margin-right: 5px;
+}
+
+#folder li{
+list-style: none;
+display: flex;
+margin-bottom: 10px;
+justify-content: space-between;
+}
+
+.select-folder{
+ width: 60%;
+}
+
+.modify-name-folder{
+ margin-right: 10px;
+}
+
+.fa-solid{
+font-size: 0.8rem;
+cursor:pointer;
+}
+
+#tableFolder{
+ width:100%;
+}
+
+#tableFolder{
+ margin-bottom:10px;
+ font-size:14px;
+ text-align: left;
+}
+
+#tableFolder img{
+ height:18px;
+}
+
+#create-new-folder{
+ position: relative;
+}
+
+#create-new-folder i{
+ position: absolute;
+ right: 0;
+ font-size: 20px;
+ background: #FCD5CE;
+ color: #fff;
+ border-radius: 20px;
+ padding: 5px;
+ cursor:pointer;
+}
+.buttons-files{
+ margin-bottom: 20px;
+}
+
+.buttons-files span{
+ border-radius: 10px;
+ padding: 5px;
+ background: #FEC89A;
+ color: #fff;
+ box-shadow: 2px 2px 2px #b5b5b5;
+ margin-right: 10px;
+ cursor:pointer;
+}
+
+.buttons-files span i{
+ margin-right:5px;
+}
+
+#name-folder{
+ background: #fff;
+ box-shadow: 0px 0px;
+ color: #a5a5a5;
+ float: right;
+}
+
+/* Upload File */
+.upload-file-pop-up{
+background: #fff;
+ width: 500px;
+ height: 500px;
+ z-index: 100;
+ position: relative;
+}
+
+/* Move Files */
+
+.move-btwn-folders{
+ background: #fff;
+ z-index: 200;
+ position: relative;
+ padding: 20px;
+}
+
+#span-folder-move{
+ font-weight: 800;
+}
+
+#span-folder-move, .inside-btwn div{
+ cursor:pointer;
+}
+
+.inside-btwn{
+ padding-bottom: 10px;
+}
+
+.inside-btwn div{
+ padding: 0 10px;
+}
+
+.inside-btwn div:before{
+ content: "";
+ display: list-item;
+ list-style: '- ';
+ background: #ccc;
+ position: absolute;
+}
+
+/* Search */
+
+#search{
+ height: 100%;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ justify-content: center;
+}
+
+#search form{
+ margin:0;
+ width: 80%;
+}
+
+#search input{
+ height: 80%;
+ width: 80%;
+ margin: 0;
+ padding: 0 20px;
+ font-size: 20px;
+ border-radius: 20px;
+ border-color: rgb(234, 220, 220);
+}
+
+#user{
+ display: flex;
+ align-items: center;
+ margin-left: 70px;
+}
+
+#sing-out{
+ width: 75px;
+ border: 1px solid rgb(167, 158, 158);
+ border-radius: 20px;
+ padding: 3px;
+ text-align: center;
+ background-color: #ecdfdf;
+ color: rgb(136, 130, 130);
+ cursor: pointer;
+ vertical-align: middle;
+
+}
+
+main.search-main{
+position: relative;
+display: inline-block;
+width: calc(100% - 20px);
+}
+
+.pop-up-file{
+ width: 80%;
+ margin: 0 10%;
+ height: 80%;
+ position: absolute;
+}
+
+.hidden{
+ display:none;
+}
+
+.close-popup-file i.fa-solid{
+ font-weight: 900;
+ color: #fff;
+ font-size: 30px;
+ z-index: 100;
+ position: relative;
+ padding: 5px;
+}
+
+.close-popup-file i.fa-solid.fa-trash{
+ font-size: 22px;
+ cursor:pointer;
+}
+
+.cover{
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: rgba(0,0,0,0.6);
+ z-index: 50;
+ width: 100%;
+ height: 100%;
+}
+
+#view-content{
+ width: 100%;
+ position: relative;
+}
+
+#view-content video, #view-content audio, #view-content img{
+ position:absolute;
+ max-width:80%;
+ z-index:100;
+}
+
+.folder-search{
+ padding: 5px;
+ background: #f3f3f3;
+ font-weight: 800;
+}
+
+.file-search{
+ padding: 10px 15px;
+}
+
+.file-search.no-folder {
+ padding: 10px 0px;
+}
+
+
+/* editor de texto */
+
+.text-editor{
+ width: 100%;
+}
+
+.text-editor textarea{
+ width: 80%;
+ height: 45vh;
+ margin: 5% 10%;
+}
+
+#trash-folder{
+ color: red;
+}
+
+#trash-folder li{
+ list-style: none;
+}
+
+#trash-folder img{
+ width: 10px;
+}
+
+#trash-visual-folder{
+ display: flex;
+ flex-direction: row;
+}
+
+#trash-folder p{
+ width: 60px;
+ border: 1px solid #ecdfdf;
+ border-radius: 20px;
+ padding: 3px;
+ text-align: center;
+ background-color: #ecdfdf;
+ color: rgb(136, 130, 130);
+}
+
+.button-edit-text{
+ border-radius: 10px;
+ border-color: #FEC89A;
+ padding: 5px;
+ background: #FEC89A;
+ color: #fff;
+ box-shadow: 2px 2px 2px #b5b5b5;
+ cursor:pointer;
+}
+
+
+#relocate-file{
+ font-size: 25px;
+}
+
diff --git a/text-editor.php b/text-editor.php
new file mode 100755
index 00000000..0a47c190
--- /dev/null
+++ b/text-editor.php
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+
+
+
+
+ '
+ // .$folderWithoutSlash.
+ // '
+ //
+
+
+
+
+
+
+
\ No newline at end of file