Las limitaciones de seguridad en el entorno de los navegadores modernos
(como JavaScript en el lado del cliente), no es posible interactuar
directamente con el sistema de archivos local para crear carpetas o archivos
en ubicaciones específicas como el escritorio o una carpeta llamada
htdocs. Esto requiere acceso al sistema de archivos del
usuario, que solo se puede lograr a través de software especializado,
aplicaciones de escritorio o backend utilizando tecnologías como Node.js,
Python, o C#.
Dicho esto, aquí te explico cómo podrías implementar esta funcionalidad utilizando herramientas adecuadas:
1. Frontend + Backend para Crear Carpetas y Archivos
- Utiliza JavaScript/HTML/CSS para crear una interfaz donde el usuario pueda agregar un árbol (tree) de directorios y archivos.
- Implementa un backend en Node.js para manejar las operaciones del sistema de archivos utilizando el módulo fs.
- En el frontend, podrías enviar la estructura del árbol como un objeto JSON al servidor, el cual crearía las carpetas y archivos en la ubicación correspondiente.
2. Edición y Visualización del Contenido
- Puedes implementar una interfaz de administración (ventana de edición) y otra de invitados (solo visualización) usando JavaScript y AJAX para cargar datos dinámicamente desde el backend.
- En el backend, podrías almacenar y servir estos datos en archivos JSON o bases de datos.
Ejemplo de Código:
A continuación, te dejo un ejemplo simplificado que combina frontend y backend para simular parte de la funcionalidad:
Backend (Node.js)
const express = require("express");
const fs = require("fs");
const path = require("path");
const app = express();
app.use(express.json());
const htdocsPath = path.join(process.env.HOME || process.env.USERPROFILE, "Desktop", "htdocs");
// Crear carpeta `htdocs` si no existe
if (!fs.existsSync(htdocsPath)) {
fs.mkdirSync(htdocsPath);
}
// Endpoint para crear archivos y carpetas desde un árbol JSON
app.post("/create-tree", (req, res) => {
const tree = req.body;
const createStructure = (basePath, tree) => {
for (const item of tree) {
if (item.type === "folder") {
const folderPath = path.join(basePath, item.name);
if (!fs.existsSync(folderPath)) {
fs.mkdirSync(folderPath);
}
if (item.children) {
createStructure(folderPath, item.children);
}
} else if (item.type === "file") {
const filePath = path.join(basePath, item.name);
fs.writeFileSync(filePath, item.content || "");
}
}
};
createStructure(htdocsPath, tree);
res.send("Estructura creada exitosamente");
});
// Endpoint para recuperar archivos en formato JSON
app.get("/get-tree", (req, res) => {
const getStructure = (dir) => {
return fs.readdirSync(dir).map((file) => {
const fullPath = path.join(dir, file);
const isDirectory = fs.lstatSync(fullPath).isDirectory();
if (isDirectory) {
return { name: file, type: "folder", children: getStructure(fullPath) };
} else {
return { name: file, type: "file", content: fs.readFileSync(fullPath, "utf-8") };
}
});
};
res.json(getStructure(htdocsPath));
});
app.listen(3000, () => console.log("Servidor escuchando en el puerto 3000"));
Frontend (HTML + JavaScript)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Administrador de Archivos</title>
</head>
<body>
<h1>Gestión de Archivos y Carpetas</h1>
<button id="create-tree">Crear Árbol</button>
<button id="get-tree">Obtener Datos</button>
<div id="output"></div>
<script>
// Ejemplo de árbol
const tree = [
{ type: "folder", name: "Carpeta1", children: [
{ type: "file", name: "archivo1.txt", content: "Contenido de archivo1" },
{ type: "folder", name: "SubCarpeta1", children: [
{ type: "file", name: "archivo2.txt", content: "Contenido de archivo2" }
]}
]},
{ type: "file", name: "archivo3.txt", content: "Contenido de archivo3" }
];
document.getElementById("create-tree").onclick = () => {
fetch("http://localhost:3000/create-tree", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(tree)
}).then(response => response.text())
.then(data => alert(data));
};
document.getElementById("get-tree").onclick = () => {
fetch("http://localhost:3000/get-tree")
.then(response => response.json())
.then(data => {
document.getElementById("output").textContent = JSON.stringify(data, null, 2);
});
};
</script>
</body>
</html>
Explicación:
- Backend: maneja las operaciones del sistema de archivos y define los endpoints necesarios para crear y recuperar datos.
- Frontend: Proporciona botones para crear la estructura (enviada como JSON) y para recuperar la estructura existente.
Este es un ejemplo práctico y funcional para la creación y manipulación de archivos.
Tags
JavaScript