Uploading files made fun with Express js and Blueimp file upload

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

Uploading files made fun with Express js and Blueimp file upload

In this post, we are going to upload stuff to the server (yeah!!). We will use Express js as our server and Blueimp jQuery file upload plugin to perform the operations.

We will leverage a Node package named blueimp-file-upload-expressjs (written by me). There is already a middleware available, but I wanted to write one on my own, with a few more options. BTW, this is not a middleware, it’s just a plug and play code. 

The final result will be

Screen Shot 2014-05-01 at 3.30.27 pm You can take a dig at this demo here. And you can find the complete code here.

Credits : I have not written any local/server file upload code from scratch. I have taken the node server code from here & cleaned it up a bit. The original code uses imagemagick, and I am planning to use something lightweight and less dependency oriented to enable simple operations like cropping, resizing, filters etc. The search is still on, suggestions are welcome. I have found this awesome node module named Light Weight Image Processor for NodeJS, so far the best light weight image processor.

Contents

Setup

Let’s get started and create our file uploader. First off, create a new folder named fileUploader. Make sure node is installed and then open terminal/prompt here.

Run

Windows Mac/*nix
$ npm install express -g     $ sudo npm install express -g

Once express is installed, we will scaffold a new app.

Run

$ express -e

This will scaffold a new express project with ejs as the templating engine. You can read more about express here. And you should see something like

Screen Shot 2014-05-01 at 3.59.29 pmNow, all you need to do is run

$ npm install

This will install the required dependencies. Once that is done, to run the app

$ node bin/www  or  $ nodemon bin/www

This will start the server and you can navigate  http://localhost:3000 to see the app.

Alternatively you can use a slush generator named slush-express. Run

Windows Mac/*nix
$ npm install gulp slush slush-express -g     $ sudo npm install gulp slush slush-express -g

Then run

$ slush express

to scaffold a new express app. You can select from the following view engines

  1. Jade
  2. Ejs
  3. Hogan
  4. HTML

and the following Style Sheet engines

  1. CSS
  2. LESS
  3. Stylus
  4. SCSS

Once the setup is done, you use run app by executing

$ gulp

This will start the server and you can navigate  http://localhost:3000 to see the app.

Next, stop the server (ctrl + c) and  lets add the file uploader dependency. Run

$ npm install blueimp-file-upload-expressjs --save

Now, in the routes folder, create a new file named uploadManager.js. In index.js, we will load the upload manager passing the router as dependency. Add the below line in index.js after the router declaration

var uploadManager = require('./uploadManager')(router);

Local/Server File Upload

Now, we will configure the Upload Manager. First lets add a set of options on how the uploader should behave in our environment. Add the below code to uploadManager.js

For a Local/Server file upload the minimal options would be

The full blown options would be

Option Description Required Defaults
tmpDir Temporary Upload Directory Y
uploadDir Where the uploaded files need to finally end up Y
uploadUrl Path where the files are uploaded (this will also be the delete route url) Y
maxPostSize Maximum Upload Size N 11 GB
minFileSize Minimum file size to accept an upload N 1 KB
maxFileSize Maximum file size to reject an upload N 10GB
acceptFileTypes Regex with list of file sizes to accept N All
copyImgAsThumb In case of Image uplaods, copy the same image as a thumbnail for preview N True
inlineFileTypes Documents you would like to show inline, for generating a preview. Like Images N Standard Image formats
imageTypes List of Images N  Standard Image formats
imageVersions Dimensions of the resized image N 80×80
accessControl CORS settings N All hosts and methods are allowed
storage Type of storage Y local

As you can see, there are quite a few options you can control.

With more control comes more issues.. I Know!

The above options are tweaked as per our current project. So, you can directly copy these to uploadManager.js. Next, let’s pump in these options to the node package and initialize it. Append the below line to uploadManager.js

Then, we will configure the 3 key routes. Add the below code after the above line

Very Important : The delete method path should be the same as uploadUrl.

Thats it we are all done with our server. Restart your server and navigate to    http://localhost:3000/upload. You should see a JSON response with the empty array of files.

Next, lets take the server to a test drive. Open views/index.ejs and update with the below code

Back to the browser, refresh http://localhost:3000 and you should see a file upload form. Pick a file and click on submit.

The file should get uploaded and you will receive a response like

Screen Shot 2014-05-01 at 4.52.17 pm

Simple right? You can go and check the files folder (and thumbnails folder, if you uploaded an image).

PS : As of now, I am copying the same source image as thumbnail. Looking for simpler alternatives to resize an image in Node.

To build the example that is shown in the demo, we will download the latest Blueimp jQuery file Upload distribution from here then copy the required files to our project.

Update the index.ejs as show here. And copy all the files from the downloaded folder, listed here to public folder in your project.

Restart the server and you are good to go. You can also try integrating the various versions of the plugin listed here. The server side code will be the same for the Basic version as well as the Angular version. Do not forget to change the url in main.js to '/upload'.

The complete example code is available here.

AWS File Upload

To upload a file to AWS, the minimal options would be

and the full blown version would be

 

Option Description Required Defaults
tmpDir Temporary Upload Directory Y
uploadUrl Path where the files are uploaded (this will also be the delete route url) Y
maxPostSize Maximum Upload Size N 11 GB
minFileSize Minimum file size to accept an upload N 1 KB
maxFileSize Maximum file size to reject an upload N 10GB
acceptFileTypes Regex with list of file sizes to accept N All
inlineFileTypes Documents you would like to show inline, for generating a preview. Like Images N Standard Image formats
imageTypes List of Images N  Standard Image formats
accessControl CORS settings N All hosts and methods are allowed
storage