Tienes razón, necesitas una forma de mantener la lista de archivos subidos por el usuario sin usar una base de datos. El localStorage puede ser útil, pero tiene sus limitaciones.
Para solucionar esto, puedes utilizar un array dentro del localStorage y actualizarlo cada vez que el usuario suba un nuevo archivo. Aquí te explico cómo:
1. Obtener el nombre del archivo:
Cuando el usuario elige un archivo en el input file, usa el evento change para acceder al nombre del archivo:
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const fileName = file.name;
// ... (guardar el nombre del archivo en el localStorage)
});
2. Guardar los nombres de los archivos en el localStorage:
Crea un array en el localStorage para almacenar los nombres de los archivos. Si no existe, crea uno nuevo.
Agrega el nombre del archivo recién subido al array.
Guarda el array actualizado en el localStorage.
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const fileName = file.name;
let fileNames = JSON.parse(localStorage.getItem('uploadedFiles')) || []; // Obtiene el array o crea uno vacío
fileNames.push(fileName); // Añade el nombre del archivo
localStorage.setItem('uploadedFiles', JSON.stringify(fileNames)); // Guarda el array actualizado
// ... (actualizar la visualización de la lista de archivos)
});
3. Mostrar la lista de archivos:
Cuando se cargue la página o después de que el usuario suba un archivo, recupera el array de uploadedFiles del localStorage.
Crea elementos HTML (por ejemplo, li) para cada archivo y agrega esos elementos a una lista en tu página.
function showUploadedFiles() {
const fileNames = JSON.parse(localStorage.getItem('uploadedFiles')) || [];
const fileList = document.getElementById('fileList');
fileList.innerHTML = ''; // Limpia la lista anterior
fileNames.forEach(fileName => {
const listItem = document.createElement('li');
listItem.textContent = fileName;
fileList.appendChild(listItem);
});
}
// Llama a showUploadedFiles() cuando se cargue la página
window.onload = showUploadedFiles;
// Llama a showUploadedFiles() después de subir un archivo
fileInput.addEventListener('change', showUploadedFiles);
Ejemplo completo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Subir Archivos</title>
</head>
<body>
<h1>Subir Archivos</h1>
<input type="file" id="fileInput">
<ul id="fileList"></ul>
<script>
const fileInput = document.getElementById('fileInput');
const fileList = document.getElementById('fileList');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const fileName = file.name;
let fileNames = JSON.parse(localStorage.getItem('uploadedFiles')) || [];
fileNames.push(fileName);
localStorage.setItem('uploadedFiles', JSON.stringify(fileNames));
showUploadedFiles();
});
function showUploadedFiles() {
const fileNames = JSON.parse(localStorage.getItem('uploadedFiles')) || [];
fileList.innerHTML = '';
fileNames.forEach(fileName => {
const listItem = document.createElement('li');
listItem.textContent = fileName;
fileList.appendChild(listItem);
});
}
window.onload = showUploadedFiles;
</script>
</body>
</html>
Recuerda:
El localStorage tiene limitaciones de tamaño, por lo que no es adecuado para grandes cantidades de archivos.
Si necesitas almacenar mucha información de archivos o tienes necesidades de seguridad más robustas, considera utilizar una base de datos.
Espero que esta explicación te sea útil. Si tienes alguna otra duda, no dudes en preguntar.