Como subir una imagen a nuestro servidor con Node.js y Express

En días anteriores hemos visto como trabajar con Node.js y Express, hoy os vamos a explicar como subir una imagen a nuestro servidor con Node.js. Para ello nos vamos a basar en el proyecto que ya creamos para explicaros como validar un formulario en Node.js.

Lo primero de todo que vamos a hacer es crear en nuestra directorio /routes el fichero upload.js dentro de él vamos a crear dos funciones.

La primera se va a encargar de cargar el formulario en el que vamos a insertar la imagen (fichero upload.jade que veremos mas adelante):

exports.upload = function(req, res){
  res.render('upload',{ title: 'ejemplo de subida de imagen por HispaBigData' });
};

La segunda es la función que va a recibir por post la imagen y la va a guardar en nuestro servidor, para ello debemos de importar el modulo fs:

// Importamos el modulo para subir ficheros
var fs = require('fs');

exports.Uploads = function(req, res) {
    console.log(req.files);
    var tmp_path = req.files.photo.path;
    // Ruta donde colocaremos las imagenes
    var target_path = './public/images/' + req.files.photo.name;
   // Comprobamos que el fichero es de tipo imagen
    if (req.files.photo.type.indexOf('image')==-1){
                res.send('El fichero que deseas subir no es una imagen');
    } else {
         // Movemos el fichero temporal tmp_path al directorio que hemos elegido en target_path
        fs.rename(tmp_path, target_path, function(err) {
            if (err) throw err;
            // Eliminamos el fichero temporal
            fs.unlink(tmp_path, function() {
                if (err) throw err;
                res.render('upload',{message: '/images/' + req.files.photo.name,title: 'ejemplo de subida de imagen por HispaBigData'});
            });
         });
     }
};

Como podeis observar en la función si la carga de la imagen ha sido correcta, vamos a enviar al upload.jade la variable message en la que indicamos cual es la ruta donde se encuentra guardada. Ahora en el fichero app.js vamos a añadir la ruta del archivo creado anteriormente, en la variable express

upload = require('./routes/upload.js')

y vamos a hacer dos llamadas nuevas, una para el método GET y otra para el método POST.

// indicamos que del fichero upload.js haga mención a la función upload, para cargar el formulario html
app.get('/upload',upload.upload); 
// indicamos que del fichero upload.js haga mención a la función Uploads para subir la imagen.
app.post('/upload', upload.Uploads);

Una vez tenemos preparado toda la parte de javascript, vamos a crear el formulario donde subiremos la imagen, pero primero, dentro de la carpata /views vamos a editar el index.jade y añadimos una opción más.

li
   a(href="/upload") Subida de imagen

Por último creamos el fichero upload.jade en el que vamos a mostrar nuestra imagen que vamos a subir al servidor.

extends layout
block content
   form.register(action='/upload', method='post', enctype='multipart/form-data')
      if locals.message
         img(src='#{message}', alt='')
      br
      |Selecciona la imagen
      input(type="file", name='photo')
      br
      input(type='submit', value='Guardar')

Como podéis observar, comprobamos si la variable message esta inicializada para mostrar la imagen que acabamos de subir en el servidor, solo se mostrará cuando pulsemos el botón de guardar y se haya verificado que realmente es una imagen.

Aquí os dejamos el proyecto para que podáis descargarlo y probarlo ustedes mismo.