Guardar el fichero en el servidor

Clase 28 de 33 • Curso de Node.js: Base de Datos con MongoDB y WebSockets

Andres Roberto Coello Goyes

student•

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
      cb(null, Date.now() + path.extname(file.originalname)) //Appending extension
    }
  })

const upload = multer({
    storage: storage
});```

para agregar la extencion del archivo...

Wilson Marino Pablo Mendez

student•

cabe destacar que require la instalación del modulo path --> npm i path

Deleted .

student•

A ti no te sale: Error: ENOENT: no such file or directory, open 'C:\Users...\uploads\1573012846127.jpg' ?

Si no tengo la carpeta ++uploads++ ya creada, me sale ese error... Tuve que modificar la function destination así: var storage = multer.diskStorage({ destination: 'public/files/', ...

Oscar Ricardo Aranda

student•

Aporte:

realice el siguiente codigo para poder servir img desde mi api con la opcion de modificar la resolucion para optimizar la descarga de img.


const express = require("express");
const multer = require("multer");
const router = express.Router();
const response = require("./../../network/response").error;

const fs = require("fs");
const sharp = require("sharp");
const path = require("path");

router.get("/:type/:width/:height/:fileName", async (req, resp) => {
  const format = req.params.type || "png";
  const width = parseInt(req.params.width) || 255;
  const height = parseInt(req.params.height) || 255;
  const file = req.params.fileName;


  const readStream = fs.createReadStream(
    path.join(__dirname, "./../../upload/", `${file}`)
  );
  readStream.on("error", e => {
    resp.type(`application/json`);
    response(
      req,
      resp,
      "no se encuetnra la img solicitada",
      400,
      "[IMG] no se puede encontrar la img"
    );
  });
  resp.type(`image/${format}`);
  let transform = sharp();
  transform = transform.toFormat(format);
  transform = transform.resize(width, height);
  readStream.pipe(transform).pipe(resp);
});

Rolando Mamani Salas

student•

Gracias !

Ramdhei López Arcila

student•

Un tip: No se equivoquen poniendo localhost/3000, eso me acaba de dar muchos dolores de cabeza.

Joaquin Mayer

student•

¿Porqué cuando subo un archivo, no me pone la extensión del mismo?

Victor Martin Ortiz Palacio

student•

Entiendo que es por una cuestion de seguridad, de todos modos, se lo podes agregar utilizando el modulo path, yo lo hice guiandome de este post: https://alejandrojs.wordpress.com/2017/08/23/subiendo-archivos-en-node-usando-multer/

Carlos Hernández

teacher•

La respuesta corta, para asegurar que no hay dos archivos con el mismo nombre. . La respuesta larga tiene que ver con cómo se procesan archivos, y la poca utilidad del nombre o la extensión (a nivel maquina) para definir el tipo de archivo. Dentro de todos los archivos, hay una serie de información sobre el tipo de archivo que es, y la forma de leerlo. Por eso, multer no se preocupa de las extensiones. . Si quieres añadirla, puedes poner un middleware en el que modifiques el nombre del archivo que se va a generar. En este post de StackOverflow puedes ver más en detalle como hacerlo:

Saúl Partida Padilla

student•

Hola a todos.

De las siguientes opciones:

Guardar los archivos en una carpeta en el servidor como se muestra en esta clase.
Convertir el archivo a texto; base64 por ejemplo; y guardar el contendido en la base de datos.

¿Qué técnica o proceso es mejor? ¿En que casos es mejor usar una u otra?

Gracias por sus comentarios y respuestas.

Saludos

Carlos Hernández

teacher•

¡Buenas!

Acabo de encontrarme con esta pregunta.

La mejor técnica, siempre, es guardarlo como un archivo. Dependiendo del caso, puede ser en una carpeta, o en algún almacenamiento en cloud (Google Cloud Storaga, Amazon S3...).

¿Por qué?

Caché: Al guardarla como un archivo, puedes definir políticas de caché tanto en el archivo como en los CDN que lo cargan.
Procesamiento y miniaturas: Al guardarla como archivo, puedes crear de forma más sencilla diferentes versiones de una misma imagen, y tenerlas bien organizadas. Si lo haces en base de datos, tendrás que hacer el procesamiento en memoria, y luego actualizar tu registro. Se te come la ram.
Escalabilidad y velocidad: Si el flujo de imágenes de tu sitio sube, tu base de datos empezará a crecer muchísimo. Y, a más tamaño de la base de datos, más lentas las consultas.

Emanuel Valero

student•

Para quienes prefieran guardar sus imágenes con la extensión, pueden configurar multer de esta forma en el network:

// upload files with multer
const storage = multer.diskStorage({
    destination: (req, file, callback) =&gt; callback(null, 'public/files'),
    filename: (req, file, callback) =&gt; {
        const id = nanoid.nanoid(64);
        const extension = path.extname(file.originalname);
        const fileName = id + extension;
        callback(null, fileName)
  	}
});

const upload = multer({ storage });

Y luego en el controller, se genera el fileUrl asi:

const fileUrl = file 
    ? config.host + ':' + config.port + config.publicRoute + 
       '/files/' + file.filename
    : '';

Usuario anónimo

user•

path.extname te trae literal la extencion de un file sino tiene extension retorna un empty string ejemplo :

path.extname('index.html');
// Returns: '.html'

path.extname('index.');
// Returns: '.'

path.extname('index');
// Returns: ''

Ludwing Juan Homero Pérez Tzaquitzal

student•

Si multer se ha configurado para guardar las imágenes en public/files, por qué la url del archivo hace referencia a app/files?

Juan Pablo Celiz

student•

¡Hola! Porque la url hace referencia a la carpeta public en sí, entonces lo tomas como app.

Luis Angel Vásquez Nepomuceno

student•

Hola Ludwin

En server.js tenemos algo como:

app.use(`/app`, express.static('public'));

Entonces cuando haces un request a localhost/app entras a public y si vas a localhost/app/files entras a public/files y si... bueno, es la idea.

(Puse los localhost sin el http porque es un link inseguro :P)

Cualquier duda acá andamos.

IA Interactive

student•

Tambien les dejo mi metodo para crear el file url:

let fileUrl = '';
  if (req.file) {
    fileUrl = `${req.protocol}://${req.get('host')}/${req.file.destination}${req.file.filename}`;
  }

Max Andy Diaz Neyra

student•

Excelente aporte!

Francisco Maneiro

student•

Por alguna razon, el video anterior tiene el codigo adelantado a esta clase, pero los inicios y finales de estas tres ultimas clases, estan bien. No entiendo que paso alli, pero me causaron una confucion gigantesca, pero bueno a seguir con el curso

Sebastian Kloster

student•

Una pregunta. Realmente lo que estamos haciendo es guardar la uri del archivo en la DB. Pero lo que realmente no se suele hacer en produccion es guardar los archivos directamente en la DB? Como puedo lograr esto con Node? No me parece muy practico el guardar los archivos en una carpeta del proyecto y despues guardar la uri en la base. Pero tal vez me este equivocando. Muchas gracias!!

Alex Camacho

teacher•

En la base de datos lo más usual es guardar la referencia a donde se encuentra dicho archivo.

Sebastian Kloster

student•

Pero me quedo una duda, entonces donde se suele guardar el archivo en si?

Juan Camilo Noreña López

student•

El link que nos queda en insomnia no me descarga la imagen

Juan Camilo Noreña López

student•

A mi me funciono así:

const storage = multer.diskStorage({
    destination : "public/file/",
    filename : function (req, file, cb) {
        cb(null, file.originalname)
    }
});
const upload = multer({
    storage:storage
})

freddy conto mena

student•

const {mongo} = require("../db/mongo");
const postModel = require('../models/PostModel');
const fs = require('fs');

 const AddPost = async (req, res, next) => {
     console.log(req.file)

      const image = await fs.readFileSync(req.file.path,'base64');

     //delete imagen
     fs.unlinkSync(req.file.path, (err) => {
            if(err) throw err;
     })
     const { title, body,user } = req.body;
     const newPost = new postModel({
         title,
         body,
         image,
         user
     });
     newPost.save().then(r => {
         console.log(r)
         return res.send('Insert User');
     }).catch(err => {
         return res.status(403).send('No se pudo insertar el dato')
     });
 }

Alver Alexander Grisales Ortega

student•

mi aporte, trate de generar la url para no quemar nada y quede escalable por si se llega a desplegar en algun servidor

router.post('/', upload.single('file'), function (req, res) {
    let fileUrl = '';
    if (req.file) {
        fileUrl = `${req.protocol}://${req.get('host')}/${destination}${req.file.filename}`;
    }
    controller.addMessage(req.body.chat, req.body.user, req.body.message, fileUrl)
        .then((response) => responses.success(req, res, response))
        .catch((error) => responses.error(req, res, error, 400, 'Error en el controlador'))
});

Platzi Team

student•

ileUrl =${req.protocol}://${req.get('host')}:${req.get('port')}/${destination}${req.file.filename};

Iván Darío Sánchez Jiménez

student•

O también lo podríamos hacer desde la variables de entorno en caso que el servidor para almacenar las imágenes sea diferente al servidor local.

Rulo Code

student•

Y cómo guardamos esas imagenes directamente en base de datos ?

Ken Ramirez

student•

Si no me equivoco podrías hacerlo convirtiéndola primero en base64

Oscar Ricardo Aranda

student•

Es recomendable no guardar imagenes en una base de datos. lo mejor que podes hacer es guardar la img en una carpeta y en la base de datos guardar la ubicación del archivo.

IA Interactive

student•

Hola, a los que como a mi no se les descagaba la imagen en cuanto ya generaban su file url y su destino es "public/files/" agreguen esta linea en el archivo routes.js :

server.use(express.static('public'));

tambien les dejo mi funcion para obtener el nombre con extension:

filename: function (req, file, cb) {
    const [name, extension] = file.originalname.split('.');
    cb(null, `${Date.now()}.${extension}`);
  }

Manuel Entrena Jimenez

student•

Ten cuidado con la extensión. Como el nombre tenga algun punto en mitad split te va a dividir el string del file en más de dos partes. Te recomiendo lo siguiente:

const parts = file.originalname.split(".");
    cb(null, `${parts[0]}-${Date.now()}.${parts[parts.length - 1]}`);

Emmanuel Rodríguez

student•

Ya veo. En práctica estas genial pero en realidad veo 2 inconvenientes:

Se establece una referencia a un directorio interno, en el servidor, el cual estará entrando en colisión cuando haya una mala gestión en memoria. Hay que considerar la eliminación del mismo como un fs
No se vayan con la finta que mongoDB almacena la información, porque hay 2 tipos de almacenamiento, storage y la BD como tal. Por ello, se ocupan CDN o Buckets de almacenamiento en nubes o dedicados en una intranet.

Wilson Fernando Antury Torres

student•

En caso que desee hacer una verificación antes de salvar la imagen, podría ejecutar el middleware o la función de guardar en una función dentro del router?

Andrés Muñoz

student•

Me pasa algo super curioso, si guardo la imagen con la extensión y la intento abrir en mi navegador 
localhost:3000/files/sign5-1653324067674.png solo visualizo la imagen no sé descarga automáticamente. Pero sí la guardo sin la extensión el navegador se comporta diferente y se descarga la imagen
localhost:3000/files/sign5-1653324067674. A qué se debe esto ? Cuando debo guardar los archivos con extensión y cuando no ?

Jorge Iván Otero Vargas

student•

Porque cuando no trae extensión el navegador no sabe con qué abrir el archivo y por defecto realiza descarga del mismo, cuando le pones extensión .png identifica que es una imagen y procede a mostrarla.

Valentin Rivetti

student•

Me parece perfecto que nos enseñen a subir ficheros a nuestra base de datos pero... ¿Borrar? ¿Modificar? Despues de todo una base de datos debe seguir como mínimo el modelo CRUD ¿Cierto? Ahora nuestro backend no puede hacer mas que acumular imagenes por mas que queramos borrar mensajes.