Uploading and Resizing Images (on the fly) With Node.js and Express

Since I wrote my first post on uploading images with Node.js, a couple things have changed. Express no longer supports the bodyParser method, and I've found a new way to resize images on the fly with the Quickthumb node module. Using this package for image resizing is super easy and useful. To upload images using Node.js and Express, I've enlisted the help of the Formidable module. So lets get started in creating our image upload application using Node.js, Express, Formidable and Quickthumb. First, make sure you have Node.js installed. Visit the node.js website for instructions on how to do this. Using your preferred terminal application, cd to the preferred location of your application and create your application folder:

mkdir uploadapp

Then navigate into this folder:

cd uploadapp

Next let's install all of our dependent packages. We'll be installing the Express.js framework, Formidable, Quickthumb and Fs-extra. Run the following commands:

npm install express
npm install formidable
npm install quickthumb
npm install fs-extra

Now that we have our webframework and dependencies, lets setup our server.

vim app.js

Add the following to app.js:

var express = require("express"),
    app = express(),
    formidable = require('formidable'),
    util = require('util'),
    fs   = require('fs-extra'),
    qt   = require('quickthumb');

// Use quickthumb
app.use(qt.static(__dirname + '/'));

app.post('/upload', function (req, res){
  var form = new formidable.IncomingForm();
  form.parse(req, function(err, fields, files) {
    res.writeHead(200, {'content-type': 'text/plain'});
    res.write('received upload:\n\n');
    res.end(util.inspect({fields: fields, files: files}));
  });

  form.on('end', function(fields, files) {
    /* Temporary location of our uploaded file */
    var temp_path = this.openedFiles[0].path;
    /* The file name of the uploaded file */
    var file_name = this.openedFiles[0].name;
    /* Location where we want to copy the uploaded file */
    var new_location = 'uploads/';

    fs.copy(temp_path, new_location + file_name, function(err) {  
      if (err) {
        console.error(err);
      } else {
        console.log("success!")
      }
    });
  });
});

// Show the upload form 
app.get('/', function (req, res){
  res.writeHead(200, {'Content-Type': 'text/html' });
  var form = '<form action="/upload" enctype="multipart/form-data" method="post">Add a title: <input name="title" type="text" /><br><br><input multiple="multiple" name="upload" type="file" /><br><br><input type="submit" value="Upload" /></form>';
  res.end(form); 
}); 
app.listen(8080);

Next inside your terminal start node on the app.js file:

node app.js

Next, go to http://localhost:8080 and you should now see your form with an input field, a title field and a browse file field. With this, you can pass whatever data you want along with your file, such as a new title, user info, etc. Upload a file and notice it takes you to http://localhost:8080/upload where all of your upload information is available. You would probably want to setup a redirect or upload the file / data through ajax, but this shows you what data is being passed. Next go to: http://localhost:8080/uploads/your-uploaded-file-name You should now see your fullsize uploaded file. Now here comes the fun part. To resize your image on the fly, just add the paramater 'dim' at the end of your url: http://localhost:8080/uploads/your-uploaded-file-name?dim=200 Your image will now display at 200 pixels wide and adjust the height proportionately. You can also customize the dim value to reflect the desired width and height of your image. For more options, check out the quickthumb node module on github. Note: Quick Thumb requires Image Magick. If you get an error trying to upload the image, Image Magick may need to be installed on your machine. On a mac you can run the following command to install via brew:

brew install imagemagick

I hope you found this helpful. Hit me up on twitter if you have any questions/comments: @tonyspiro.