Category Archives: 4.4

Fine Uploader 4.4 Released!

We are excited to announce the official release of Fine Uploader version 4.4. That’s the 37th release! As always, we have continued to add the features that you all demand the most. Thanks again for your continued support. It is due to the backing of commercial license holders, everyone reporting bugs, those who suggest great features, and all the people that have expressed their support for this library that make it as great as it is.

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

Features:

Client-side image scaling

This feature gives Fine Uploader the ability to resize images on the client, and upload the resized versions (along the with the original and all EXIF data) to your server. That means less work for your server and saved money for those who are paying by the clock cycle.

The documentation on image scaling contains information on how to set up scaling on the client, and modify the various options.

Total Progress Reporting

A brand new feature for users of UI mode is total progress reporting. Fine Uploader has had progress-bars for each file for a while now, but one feature that was requested was to show progress for all of the uploads. It has always been possible to hook into existing events to display an aggregate progress-bar, but with this latest release it has become much easier. See the documentation on progress bars for more information.

Also part of this feature is the addition of the totalProgress event. This event will report the total progress for a batch of files in the AJAX uploader. The event will be emitted when an individual file’s progress changes, a file is added, and when a file is cancelled.

Folder Paths

It is now possible to detect the full paths to any files or directories added to the uploader as children of a directory when dragging and dropping a folder in Google Chrome and Opera.

Multiple-endpoint Custom Builds

The custom build generator now has the capability to create builds with multiple endpoints. This means you should never need to create more than one custom build because you can select any combination of one or more endpoints.

Bug Fixes:

  • Allow function parameters in S3 modes (#1105)
  • Drop zones are properly hidden when dragging in and out of browser in Safari, IE10, and IE11 (#1034)
  • Blobs and Data URI generation in Androids’ stock browser (#1146)
  • setName now updates the name UI (#1138)
  • drawThumbnail correctly renders image in iOS (#1131)
  • Prevent resumption of currently uploading file (#1101)
  • Thumbnail process correctly handles unreadable files#1143
  • Fix exception when using standalone drag and drop module for the S3 uploader (#1132)

Next…

As always, for up-to-date information about features and fixes planned for the next release, please see the milestone in the Github issue tracker.

The next release is already in the works and some big things are going to be included. We plan to take a serious look into implementing a few new ideas to the basic upload algorithm with the goal of supporting multiple simultaneous chunked uploads.

Thanks for being a part of Fine Uploader!

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.