Full-Stack JavaScript Image Uploader Using AngularJS & Node.js

AngularJS has been a very popular client-side web application framework for some time now. As you may know, Fine Uploader is also quite a powerful cross-browser JavaScript file uploader. So, why not use both? Why not indeed. This post will walk you through writing an AngularJS directive for Fine Uploader. CSS and the native web API will also be used for styling and event handling/DOM manipulation (respectively). We’ll also be using the brand new HTML 5.1 <dialog> element for modal dialog support (and a polyfill for browsers that don’t yet support this element. Complete code for client and server side is also provided that includes a node.js backend.

Demonstrated Features

This demo targets all modern browsers (IE10+, Firefox, Chrome, Safari, Opera, etc). The following features will be demonstrated/enabled in the example code

Dependencies

Client-side

Server-side

Getting Started

This example assumes you are already comfortable with AngularJS, node.js, HTML, JavaScript, and CSS.

In order to implement this example in your web application, you must follow these steps:

  1. Install node.js on your server
  2. Download the angularjs-nodejs example code from the fine-uploader-examples GitHub repo. Add the files to your server.
  3. Run npm install in the directory housing the example code you downloaded. This will pull in all server-side  and client-side dependencies needed.
  4. Start up your server by running “npm run server” and begin uploading!

Notable Custom Features Specific to this Example

If you want to play around with all of the features provided by Fine Uploader UI in this example, run the example code in your own environment. Here, we will point out some of the notable custom features specific to our image uploader example.

Dynamic & Scrollable Drag & Drop Zone

Similar to the upload button, it is potentially useful to include a message in the drop zone that provides useful startup instructions to your users. When they first look at the page, it may be confusing for some, as far as options are concerned. The best approach here is to use Fine Uploader UI’s gallery view and include drop-zone text with specific information for users on how to proceed. This is trivial to implement due to Fine Uploader’s advanced UI features.

There are three possible states for the background text for the drop zone. These states correspond to the capabilities of the current browser. Chrome & Opera provide the ability to drop folders AND files. Everything else (except mobile browsers) provide the ability to drop files.

Here’s what the drop zone will look like in Chrome:
drop files or folders

…and Firefox:
drop files

Image Gallery View

Fine Uploader UI comes with a few different templates that you can customize further to suit your application needs. Our full-stack example uses the gallery view, which renders thumbnails as “tiles”, like this:

Screen Shot 2016-01-25 at 4.08.24 PM.png

Note that the gallery is completely responsive and will move tiles as the browser window changes size. Now, we go a bit further in this example, and allow users to see a larger preview, generated on-demand, simply by clicking on the small thumbnail next to the file. The large preview is generated by Fine Uploader’s “drawThumbnail” API method and rendered in a <dialog> element:

Screen Shot 2016-01-25 at 4.00.31 PM

The large preview is generated only when the smaller thumbnail in the gallery view is clicked. The above displayed modal is just a basic example. You can, of course, style this modal however you please using CSS.

Aggregate & Per-File Progress Bars

This image uploader example also provides an “aggregate progress bar”. This is generated and updated entirely by Fine Uploader UI and indicates the total progress of all submitted files. Notice that each in-progress file has its own progress bar as well.

For example:

Screen Shot 2016-01-25 at 4.06.45 PM

Turnkey Traditional Node.js Server

You can simply drop-in the highly customizable node.js server provided by Fine Uploader –fine-uploader-traditional-server – by installing it from npm. It will handle both chunked and non-chunked upload requests, as well as delete file requests.

Wrap-up

If you want to try all of this out yourself and take a closer look at the source? You can access all source code for this image uploader example in the fine-uploader-example GitHub repo.