This demo targets all modern browsers (IE10+, Firefox, Chrome, Safari, Opera, etc). The following features will be demonstrated/enabled in the example code
- Pre-upload client-side image preview generation
- Click on thumbnails to display larger images in a modal
- Drag & drop uploads
- Drag and drop folder uploads (Chrome & Opera)
- Scrollable, fixed-height, visible drop zone/file list
- Background text for the drop zone/file list that changes based on the capabilities of the current browser
- Splitting large files into smaller chunks
- Auto-resume for failed or interrupted uploads
- Deleting uploaded files
- Limiting files by extension (all browsers) and MIME type
- Limiting files by size
- Auto and manual retry of failed uploads
- Aggregate upload progress bar
In order to implement this example in your web application, you must follow these steps:
- Install node.js on your server
- Download the angularjs-nodejs example code from the fine-uploader-examples GitHub repo. Add the files to your server.
npm installin the directory housing the example code you downloaded. This will pull in all server-side and client-side dependencies needed.
- 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.
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:
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:
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.
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.