Monthly Archives: November 2013

Fine Uploader 4.1: Pause Uploads, Image Validation, & Support for More Browsers

Update: December 27, 2013 – 4.1.1 Hotfix Release

This hotfix release addresses the following issues:

  • Fine Uploader S3: Uploads fail to complete in Safari 5. (#1080)

Here are some notable additions that are part of the 4.1 release:

Validate Image Dimensions

If you have a need to restrict uploaded image dimensions in your application, you can now enforce this client-side in all browsers other than IE9 and older, Safari 5.1 and older, and Android 2.3.x and older. You can restrict the height and/or width of submitted images via a new validation option property. Please see the validation feature documentation for more details.

Pause Uploads

This feature mainly compliments the chunking and auto-resume features. For example, while it is not necessary to “pause” an in progress upload to resume it later, it is probably much more intuitive for end users to do so. This feature also provides the ability to upload queued items immediately (or sooner) simply by pausing in-progress uploads that are lower priority.

See the pause feature documentation for more details.

Internet Explorer 11 Support

IE11 is now fully supported. In fact, all features available in IE10 are now available for
IE11 users.

Opera Support

We have finally added support for Opera. Note that this only includes Opera 15 and newer. As of Opera 15, Chromium is used “under the hood”. As a result, all features supported in Chrome are also now supported when you are using Opera!

Mobile Chrome Support

We now support the Chrome browser on iOS6+ and Android 4+. In iOS, Chrome supports all of the same features as mobile Safari, except for progress reporting. On Android, mobile Chrome supports all of the features supported by the Android stock browser as well as progress reporting.

Other fixes & changes

Next…

As always, for up-to-date information about features and fixes planned for the next release (4.2), please see the milestone in the Github issue tracker. We will begin to plan the 4.2 release shortly after this release of 4.1. Note that the release cycle for 4.2 will likely be longer than normal due to the upcoming holidays.

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.