Cómo subir un fichero mediante Ajax en Node.js

A todo el mundo nos mola Ajax, ¿no es así? Y es debido a una razón más que obvia: mejora enormemente la experiencia del usuario para con la página web. En este tutorial, voy a crear una aplicación utilizando Node.js que permitirá al usuario subir archivos utilizando Ajax en lugar de una subida convencional, la cual requiere recargar el navegador para ver los resultados.

Este será nuestro package.json 

{
  "name": "file_upload",
  "version": "0.0.1",
  "dependencies": {
    "express": "4.13.3",
    "multer": "1.1.0"
  },
  "devDependencies": {
    "should": "~7.1.0",
    "mocha": "~2.3.3",
    "supertest": "~1.1.0"
  }
}

Nos movemos a la carpeta donde está el fichero del package y escribimos... 

npm install

...para instalar las dependencias.

Server.js 

var express =   require("express");
var multer  =   require('multer');
var app     =   express();

var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    callback(null, file.fieldname + '-' + Date.now());
  }
});

var upload = multer({ storage : storage}).single('userPhoto');

app.get('/',function(req,res){
      res.sendFile(__dirname + "/index.html");
});

app.post('/api/photo',function(req,res){
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });
});

app.listen(3000,function(){
    console.log("Working on port 3000");
});

index.html 

<html>
  <head>
    <title>File upload Node.</title>
  </head>
  <body>
      <form id="uploadForm"
         enctype="multipart/form-data"
         action="/api/photo"
         method="post">
      <input type="file" name="userPhoto" />
      <input type="submit" value="Upload Image" name="submit">
      <span id = "status"></span>
    </form>
  </body>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
</html>

Si te has fijado, utilizamos la librería jquery.form que nos permite realizar el envío de formularios Ajax. Echa un vistazo al código JavaScript.

index.html 

<script>
  $(document).ready(function() {

     $('#uploadForm').submit(function() {
        $("#status").empty().text("File is uploading...");
        $(this).ajaxSubmit({

            error: function(xhr) {
        status('Error: ' + xhr.status);
            },

            success: function(response) {
        $("#status").empty().text(response);
                console.log(response);
            }
    });
        //Very important line, it disable the page refresh.
    return false;
    });    
});
</script>

Al enviar el formulario, detendremos la actualización de la página devolviendo FALSE y llamaremos a la API usando ajaxSubmit(). Agrega este código en un archivo separado y añádelo debajo de jquery.form o copia y pega justo debajo de esta línea. 

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>

<script>
------Pega código aqui------
</script>

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO