Carga de archivos en NodeJS significa mover archivos desde la ubicación del cliente a la ubicación del servidor. Una barra de progreso es un componente visual que cambia y se actualiza según el porcentaje total de carga de archivos. Aquí vamos a crear un servidor local y cargar archivos a una carpeta de destino aumentando la longitud de la barra a medida que avanza la carga.
Módulo formidable: es un módulo de Node.js para analizar datos de formularios, utilizado principalmente para cargar archivos.
Instalar: vaya al directorio del proyecto y ejecute el comando:
npm install formidable
Instalar Módulo Formidable
Pasos para crear un servidor:
Paso 1: Primero cree un archivo ‘index.html’ que actuará como interfaz para el cliente. A continuación se proporciona un código de ejemplo. Creamos un componente vacío ProgressUpload que se actualizará solo después de que se seleccionen los archivos para cargar.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" src="index.css"> <title>Node.js Upload Files with Progress Bar</title> </head> <body> <h1>Check The Progress of Uploaded Files</h1> <div> <span>Select files to upload</span> <input type="button" class="chooseFiles" value="Select..." /> <div class="progressUpload"></div> </div> <script src="uploader.js"></script> </body> </html>
Paso 2: Cree un ‘uploader.js’ que abrirá una ventana emergente para cargar archivos y mostrará una barra de progreso. El código JS se proporciona a continuación.
Primero, creamos un elemento de entrada para los archivos y lo adjuntamos a nuestro botón de navegación en la interfaz utilizando la función addEventListener. Cuando se selecciona un nuevo archivo, los detalles del archivo se envían utilizando el formato FormData().
Para actualizar la barra de progreso, le agregamos Eventlistener y actualizamos su valor en porcentaje. La barra de progreso se agrega a ‘index.html’ mediante la creación de dos componentes div en la función createProgressbar().
Javascript
var browse = document.getElementsByClassName('chooseFiles')[0];
var selectDialog = document.createElement("INPUT");
selectDialog.setAttribute("type", "file");
selectDialog.setAttribute("multiple", "true");
selectDialog.style.display = "none";
var progressUpload = document.getElementsByClassName("progressUpload")[0];
var progress;
addProgressBar();
browse.addEventListener("click", function(){
selectDialog.click();
});
selectDialog.addEventListener("change", function(){
sendFiles(selectDialog.files);
});
function sendFiles(files){
resetProgressBar();
var req = new XMLHttpRequest();
req.upload.addEventListener("progress", updateProgress);
req.open("POST", "/uploadFile");
var form = new FormData();
for(var file = 0; file < files.length; file++){
form.append("file" + file, files[file], files[file].name);
}
req.send(form);
}
function updateProgress(e){
progress.style.width = (((e.loaded/e.total)*100))+ "%";
}
function resetProgressBar(){
progress.style.width = "0%";
}
function addProgressBar(){
var progressBar = document.createElement("div");
progressBar.className = "progressBar";
progressUpload.appendChild(progressBar);
var innerDIV = document.createElement("div");
innerDIV.className = "progress";
progressBar.appendChild(innerDIV);
progress = document.getElementsByClassName("progress")[0];
}
Paso 3: ahora cree el archivo del servidor principal ‘server.js’ que cargará los archivos en el destino y enviará los recursos solicitados para una página web al lado del cliente. Tenemos cuatro tipos diferentes de solicitud de URL para HTML, CSS, JS y carga. Con el módulo del sistema de archivos de Nodejs ‘fs’, mueva el archivo a una nueva ubicación.
Nota: En ‘var upd’ agregue la dirección de destino de su máquina.
Javascript
var http = require("http");
var url = require("url");
var fs = require("fs");
var formidable = require("formidable");
var host = "localhost";
var port = 7777;
http.createServer(function (req, res) {
var path = url.parse(req.url, true);
if(path.pathname.endsWith("html")){
fs.readFile("." + path.pathname, function(err, data){
res.writeHead(200, "OK", { "Content-Type": "text/html"});
res.write(data);
res.end();
});
} else if(path.pathname.endsWith("css")){
fs.readFile("." + path.pathname, function(err, data){
res.writeHead(200, "OK", {"Content-Type": "text/css"});
res.write(data);
res.end();
});
} else if(path.pathname.endsWith("js")){
fs.readFile("." + path.pathname, function(err, data){
res.writeHead(200, "OK", { "Content-Type": "text/javascript"});
res.write(data);
res.end();
});
} else if(path.pathname.endsWith("uploadFile")){
var form = new formidable.IncomingForm();
form.parse(req, function(err, fields, files){
for(var file in files){
if(!files.hasOwnProperty(file)) continue;
var old = files[file].filepath;
var upd = 'C:/Users/sunny/' + files[file].name;
fs.rename(old, upd, function (error) {
if (error) throw error;
});
}
res.write('File uploaded Successfully');
res.end();
});
}
}).listen(port, host);
Paso 4 : finalmente cree una hoja de estilo ‘index.css’ para formatear la visualización de la barra de progreso.
CSS
.progressupload{
height: 20px;
margin-top: 25px;
}
.progress{
background-color: green;
width: 0%;
height: 20px;
}
.progressBar{
padding-top: 2px;
padding-bottom: 2px;
}
Paso 5: actualice el módulo NodeJS instalando npm y ejecute el proyecto ejecutando el comando:
node server.js.
Actualizar y ejecutar el proyecto
Paso 6: Vaya a la URL http://localhost:7777/index.html y cargue el archivo.
Ejecute el servidor y cargue el archivo.
Publicación traducida automáticamente
Artículo escrito por sunnydrall y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA