Fine Uploader 5.2 – Major UI Improvements, New Gallery View, Accessibility Updates

Update: June 8, 2015 – 5.2.2 Hotfix Release

  • Canceling a file with a queued thumbnail preview prevents other queued thumbnails from being generated. (#1416)
  • Deleting an uploaded file with a thumbnail in the (to-be-generated) preview queue prevents subsequently selected files from receiving generated thumbnail previews. (#1419)
  • Trash button is occasionally pushed to the next line in gallery mode. (#1418)
  • Trash button submits the form (if enclosed in a non-Fine-Uploader controlled form) after files have been uploaded successfully. (#1417)

Update: April 21, 2015 – 5.2.1 Hotfix Release

  • File input elements cannot be passed into addFiles API method on modern (File API) browsers  (#1398)

We are excited to announce the official release of Fine Uploader version 5.2!

UI Enhancements

5.2 brings major updates for Fine Uploader UI. Until version 5.2, Fine Uploader’s UI has remained mostly constant since its inception. We now offer a brand new modern CSS file, fine-uploader-new.css, which can be used with any existing Fine Uploader UI templates. To use the new look, simply reference this new CSS file in your project after upgrading to Fine Uploader 5.2. If you wish to continue using the old Fine Uploader UI display, you will not need to change anything.

We also added support for the new native browser


. As of 5.2, only Opera and Chrome support this element. However, once other browser add support, Fine Uploader will be able to use this new element in those browsers as well, without any code changes required. Currently, you must include appropriate

elements in your Fine Uploader template (already included for you in the default provided templates). If these are present, and the current browser has sufficient support, the element will be used to render confirm, alert, and prompt dialogs.

The new UI updates have been introduced without any breaking changes at all. You may continue to use Fine Uploader’s old look and continue to use any custom template adjustments or dialog/alert message implementations without changing any code.

You can also make use of the new gallery view. To integrate Fine Uploader’s customizable gallery view into your project, you will need to use the new gallery template and the fine-uploader-gallery.css file. The gallery view also makes use of several new icons introduced as part of the 5.2 release. Ensure that these new icons – continue.gif, pause.gif. retry.gif, and trash.gif – are accessible via the gallery CSS file as well.

Both new UIs share a default visible drop zone with background text (controlled by CSS) that matches the current browser’s capabilities:


Here is a preview of the gallery view, before and after uploading files:



Have a look at our updated live demo section on the Fine Uploader home page for code examples and additional designs. Customization and use of the new templates, styles,

support, and CSS is described in the updated styling documentation on our documentation site.

Accessibility Improvements

There were a number of accessibility-related adjustments to be made to Fine Uploader UI, the docs site, and the home page. In the interest of accommodating any and all users who must interact with Fine Uploader, we wanted to make a concerted effort to address any related deficiencies in this library and associated sites. We are happy to announce that this effort was successful, and Fine Uploader 5.2 (along with the docs site and home page) contains a substantial number of accessibility adjustments. We will continue to audit Fine Uploader for accessibility conformance going forward. If you happen to notice any accessibility obstacles we missed, please file an issue so we can schedule a fix as soon as possible.

Other Features

Support for uploading via PUT request

For all browsers other than IE9 and older, you may now ask Fine Uploader to submit upload requests to your server via a PUT (or even PATCH) request. Upload success requests may be sent via PUT as well. These methods can be specified via a new request.method option and the new S3 uploadSuccess.method option, respectively.

Uploading videos via iOS8 mobile Chrome now supported by default again

A workaround was put into Fine Uploader 5.0.5 to prevent Chrome from crashing in iOS8 due to issues with the Chrome browser and iOS8. This workaround, unfortunately, prevented videos from being uploaded in mobile Chrome due to another long-standing Apple iOS bug. This workaround is now disabled by default in Fine Uploader 5.2 as the underlying issue in mobile Chrome and iOS8 appears to be fixed.

Bug Fixes

  • Large S3 uploads hang w/ async key function and concurrent chunking enabled (#1394)
  • QuotaExceededError when trying to upload file when using Safari private browsing (#1395)
  • Empty file check validation is broken. (#1381)
  • “Retrying…” message remains in Fine Uploader UI even after failed chunk retry has succeeded. (#1349)
  • Pause button remains visible in Fine Uploader UI even after upload has failed. (#1367)


Fine Uploader 5.3 is the next planned version. Our top priority for 5.3 is to tackle S3 version 4 signature support. For a list of other cases to be completed in this version, please see the 5.3 milestone tracker in GitHub. Please be advised that cases may be removed or added from the milestone even after work on the milestone has commenced.

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.

Thanks for being a part of Fine Uploader!

P.S. Head on over to for demos, documentation, and downloads!


Fine Uploader 5.1 – S3 CDN support, canvas uploads, & performance enhancements

Update: January 8, 2015 – 5.1.3 Hotfix Release

  • Some files that fail validation may not be marked as rejected.  (#1345)

We are excited to announce the official release of Fine Uploader version 5.1

The two biggest features in v5.1 include the ability to upload to Amazon’s Simple Storage Service (S3) via a CDN (such as fastly).  You can also upload to an S3-like storage service, that is, a non-Amazon storage service that follows the S3 API but does not use the same conventions related to bucket naming.

Also, by popular demand, uploading a <canvas> is dirt-simple.  Simple pass an existing <canvas> into Fine Uploader’s addFiles API method, and Fine Uploader will take care of the rest for you!

Other Features

Dynamically change the item limit

If you’d like to adjust the validation item limit set during initialization, you can easily make this adjustment at any time now via a new API method.

Dynamically change the upload success endpoint for S3/Azure

You can make this adjustment for all files or specific files via a new API method.

File parameters / form data sent to S3/Azure upload success endpoint

Instead of querying S3 in your upload success server code, you can pull any parameters associated with the file directly off of the upload success POST request sent by Fine Uploader.

More generic Fine Uploader S3 error messages

Previously, Fine Uploader would explicitly mention S3 when reporting upload errors in the S3 module.  The explicit references to S3 have been removed to better support S3-like endpoints.

Bug Fixes

  • Large number of thumbnail previews may cause browser to crash. (#1279)
  • DnD module makes the drop zone a block level element on hover. (#1273)
  • Canceling an in-progress upload does not hide total progress bar. (#1303)

We also worked on a number of tasks to improve the quality and consistency of Fine Uploader’s codebase and build scripts.

Licensing Change

Starting with version 5.1, Fine Uploader is licensed exclusively under the Widen Commercial License.  If you are using Fine Uploader for commercial purposes or in a commercial product, you must purchase a license. If you are using Fine Uploader in a free open-source product, you may use Fine Uploader free of charge.  In either case, you may download Fine Uploader directly from our site.

Downloading Fine Uploader

Starting with version 5.1, anyone may download Fine Uploader directly from our site.  Please be aware of the licensing associated with Fine Uploader (described in the above section).  You may also access Fine Uploader on npm.  This can be as simple as running “npm install fine-uploader”, which will grab the latest stable version from the npm registry. We will likely add Fine Uploader to various Content Delivery Networks in the future as well.

Note that current versions of Fine Uploader are no longer available on the jQuery plug-in registry, as the jQuery team has stopped maintaining their registry.


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. At the writing of this post, we are in the process of planning the 5.2 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.

Thanks for being a part of Fine Uploader!

iOS8 presents serious issues that prevent file uploading

Each new version of iOS seems to come with new bugs surrounding browser-based file uploads. Today, we detected a number of new and very serious upload-related issues in the iOS8 gold master build.  For those of you unfamiliar with this term, “gold master” is generally the last build of an in-beta Apple product that will eventually become the officially released version.

We’ve compiled a list of the file-upload-related issues, by browser. The issues discussed here may appear in earlier iOS8 betas as well.  These new issues, coupled with existing issues in iOS browsers, make uploading files via your iPhone or iPad nearly impossible at this point.


New to iOS8:

Chrome & UIWebView

New to iOS8:

Safari, Chrome, and UIWebView


With these outstanding bugs, File API support and file uploads are now completely broken in Safari.  In Chrome, video uploads are impossible, and image uploads only possible if the “multiple” attribute on the file input element is included.  In any app run inside UIWebView, all file uploads are possible, but only if the multiple attribute if left off of the file input element.

We have filed bugs with Apple and Google, but we encourage you to file issues as well.  It is critical that these issues are fixed before iOS8 releases to prevent a complete loss of browser-based file upload and file manipulation for mobile Apple device users.  This is not just a Fine Uploader issue.  Rather, it affects any browser-based applications that accept file uploads, manipulate, or read files client-side.


How We Are Dealing With This in Fine Uploader

Fine Uploader 5.0.5 includes a workaround for the browser-crash issue.  A workaround for the 0-sized video uploads has been a part of Fine Uploader for quite a while already, but, keep in mind, the workaround for the browser crash issue negates the 0-size video upload workaround in Chrome and UIWebView.

The bug in iOS8 Safari that prevents any sort of file uploads or file reading cannot be worked around.  Instead, we have added some code that identifies this browser and alerts users.  The alert explains the issue a bit, and asks users to switch to Chrome until Apple addresses the bug in iOS8 Safari.

All workarounds are now attached to options, and can be disabled by setting the corresponding flag to false.  See the new workaround option documentation for more details.  It is unlikely that you will ever want to disable these workarounds (as we intend to revert these workarounds once the corresponding browser bugs are fixed), but, just in case, this is possible.  Note that you can also customize the alert displayed to your users in iOS8 Safari by overriding the default text for the unsupportedBrowserIos8Safari message.

Update: September 18, 2014

The released version of iOS8 (8.0) contains all the bugs described above.  Workarounds and detection methods are present in Fine Uploader 5.0.5.

Update: September 24, 2014

Apple released a hotfix update today: 8.0.1.  This hotfix appeared to address the broken file input and File API in iOS8 Safari.  It also seemed to fix the long-standing issue that resulted in upload of 0-sized videos when the file input element contains a multiple attribute.  Sadly, 8.0.1 contained some other serious regressions that prevented some devices from obtaining cellular service.  As a result, Apple aborted the 8.0.1 update shortly after its release.  There is no known planned release date for 8.0.2, as Apple is unnecessarily secretive about dates (among other things).  Given the serious quality issues with the last two iOS releases, it seems likely that Apple will take a bit more time before releasing 8.0.2.  So, perhaps the release that addresses the issues described above could be weeks off, if not more.


Update: September 29, 2014

Apple released a hotfix update a couple days ago: 8.0.2.  This hotfix appeared to address the broken file input and File API in iOS8 Safari.  However, videos now cannot be uploaded successfully at all in Chrome.  We are considering an 8.0.2-targeted hotfix release for Fine Uploader that disables the workaround targeted at Safari for iOS 8.0.2 and up.  Unfortunately, iOS8 still has a number of serious bugs at this point.  You might want to encourage any of your users tied to Apple devices to stick with iOS7, or, better yet, iOS6.

Fine Uploader 5.0 – Concurrent Chunking

Update: December 3, 2014 – 5.0.9 Hotfix Release

  • Disabling cookies prevents the uploader from initializing. (#1324)

Update: October 9, 2014 – 5.0.8 Hotfix Release

  • File drag & drop doesn’t work in IE11. (#1309)
  • File chooser button doesn’t render properly in IE8 (#1306)
  • Paste event handler is not removed when uploader is reset. (#1305)

Update: October 1, 2014 – 5.0.7 Hotfix Release

  • Only target iOS Safari upload limitation for iOS 8.0.0.  Uploads in Safari should work starting with iOS 8.0.1. (#1284)

Update: September 18, 2014 – 5.0.6 Hotfix Release

  • Multiple file selection not possible after initially submitting multiple files via file chooser. (#1287)

Update: September 17, 2014 – 5.0.5 Hotfix Release

  • Files cannot be uploaded at all in iOS8 Safari  Please see the post on iOS8 browser bugs for more details. (#1284)
  • Browser crashes in iOS8 Chrome when multiple option is set to false.  Please see the post on iOS8 browser bugs for more details.  (#1283)
  • “qquuid” meta tag missing in Fine Uploader S3 upload requests.  (#1286)
  • With scaling enabled and the multiple option set to false, files cannot be uploaded.  (#1278)
  • Upload choose button may require a double click in IE for a large button.  (#1277)
  • Traditional endpoint cross-origin uploads broken in IE8 & IE9.  (#1272)
  • Tall upload chooser buttons do not invoke file chooser dialog unless top of button is clicked.  (#1152)

Update: August 25, 2014 – 5.0.4 Hotfix Release

  • Fixes an issue that prevents the cancelAll API method from actually cancelling all uploads. (#1262)
  • Fixes an issue that prevents the correct associated button element from being passed to the onValidate event handler. Also, non-standard properties may be passed to this handler via the blobData parameter. (#1261)
  • Fixes an issue that results in passing of an empty name parameter to the onProgress event handler. (#1255)
  • Ensures that an empty/invalid name isn’t appended to scaled file names if the name property is left off of a scaling option entry. (#1243)

Update: July 1, 2014 – 5.0.3 Hotfix Release

  • Fixes an issue where non-image files are not uploading when scaling is turned on and sendOriginal is off. (#1238)

Update: June 17, 2014 – 5.0.2 Hotfix Release

  • Fixes an issue with iOS subsampling images larger than 2 megapixels during the image scaling process (#1231)

Update: June 5, 2014 – 5.0.1 Hotfix Release

  • On traditional endpoints, when a chunked upload completes the server responseJSON does not get passed to the handler (#1227)

We are excited to announce the official release of Fine Uploader version 5.0.

This is a major version release due to some breaking changes we made to support a great new feature: Concurrent Chunking! This is a feature that other libraries have attempted to implement, without success. Fine Uploader is the ONLY upload library to offer concurrent chunking. This new feature is targeted at applications that expect users to upload single very large files.

Our internal tests that involved uploading multiple chunks for a specific file concurrently showed significant improvements in bandwidth utilization. For example, on our internal network, sending a 110 MB file to S3 with chunk sizes of 5 MB took about 22 seconds when chunks were uploaded one-at-a-time (with concurrent chunking disabled). When maxing out the default maxConnections for that file (3 chunks at once, concurrent chunking enabled) the same file uploaded in about 12 seconds. All other users who tested this feature during the beta phase reported similar results.

You can read more about this new feature on the associated feature page on the docs site.

Other Features:

Support for other promise implementations

This change allows you to use any A+ certified promise impl (such as RSVP or Q) when communicating with Fine Uploader. You may also continue to use Fine Uploader’s own (non-A+-certified) promise implementation.

Dynamically Set Custom Headers

This is targeted specifically at traditional upload endpoints (not S3 or Azure). A new method, setCustomHeaders, has been added to allow you to set upload request headers at any time after the upload instance has been created.

Bug Fixes:

  • Form support parser ignores textarea elements (#1204)
  • Retry Button should remove qq-hide while visible (#1193)
  • File size of 20 bytes is reported for all files in older browsers (#1161)
  • Google Closure Compiler Error (#1163)
  • dataTransfer.items is an object in Chrome and passes the truthy test then throws on the array indexer after && causing a bug (#1166)
  • Total Progress Bar Shows/Hides in rapid succession (#1175)


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. At the writing of this post, we are in the process of planning the 5.1 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.

Thanks for being a part of Fine Uploader!

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:


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)


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!

Fine Uploader 4.3: Support for HTML Forms and Windows Azure

Update: February 11, 2014 – 4.3.1 Hotfix Release

This hotfix release addresses the following issues:

  • HTTP is now used as the default scheme for S3 endpoints rather than HTTPS (#1129)(Reverts: #1119)
  • Apply display.fileSizeOnSubmit only to files submitted by the user (#1130)

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

Upload Files Directly to Azure From Your Browser

In 3.8, we added the ability to upload directly to Amazon’s S3 service directly from your browser, in all supported browsers. Starting with 4.3, you will be able to send these files directly to Microsoft’s Windows Azure Blob Storage service as well. You can read more about this feature on our documentation site. We have even provided a C# example for signing the requests that Fine Uploader Azure makes.

Please note that uploads directly to Azure are not possible in Internet Explorer 9 and older. This is due to a shortcoming of Azure’s API.

Easily Connect Fine Uploader to an Existing HTML Form

You can now easily connect Fine Uploader to an existing HTML form. Fine Uploader will send all of the form fields along with each upload request. It will even validate the form for you, if the browser supports this behavior. If you follow all of the (overridable) conventions in place, you can achieve this with only one total line of JavaScript! You can read more about this feature on our documentation site.

Other enhancements:

Bugs fixed:


As always, for up-to-date information about features and fixes planned for the next release (4.4), please see the milestone in the Github issue tracker. We will begin to plan the 4.4 release shortly after this release of 4.3.

Uploads without any server code

If you just want to simply accept files from users, why should you have to write server-side code? Well, if you are using Fine Uploader S3 version 4.2 or later, you don’t have to worry about server-side languages anymore! This blog post accompanies a live demo of this workflow at


Starting with Fine Uploader S3 4.2, the “no server” upload workflow is fully supported. This means that you only need to host your JavaScript and HTML files. Fine Uploader S3, AWS, and your identity providers take care of the heavy-lifting for you.

The workflow is simple:

  1. authenticate your users with the help of an identity provider, such as Google
  2. Use the temporary token from your ID provider to grab temporary access keys from AWS
  3. Pass the keys on to Fine Uploader S3
  4. Your users can now upload to your S3 bucket


A client-side workflow such as this one means that you must ensure your users are utilizing a modern browser (not IE9 or older). Some of the SDKs used here (mostly the AWS JavaScript SDK) will not work on older browsers.

Other things you will need to make this happen:

  • Fine Uploader S3 4.2+
  • OAuth/login JavaScript SDK from Google, Facebook, or Amazon
  • A simple web server to host your static content, such as a public-read S3 bucket
  • An AWS account
  • AWS JavaScript SDK


You should be familiar, at a high-level, with OAuth 2.0, which is the standard used by Google, Amazon, Facebook, and other similar identity providers. An identity provider here will allow you to request temporary credentials from AWS on behalf of the authenticated user. These credentials are required by Fine Uploader S3 to upload files to your S3 bucket without any server-side intervention on your part. It is important to ensure traffic between your web app and the identity provider be secured via SSL (HTTPS) when using an OAuth 2.0 ID provider.

You must also be familiar with:

  • HTML
  • JavaScript
  • Amazon’s Simple Storage Service (S3)
  • Fine Uploader S3

Setting up your identity providers

The live demo of this workflow allows you to choose between Google, Facebook, and Amazon as identity providers. You will need to register your application with each of these identity providers, record the assigned client ID, and specify the domain(s) of your web application in order to ensure that authentication against your registered application can only occur on your application’s domain(s).


1.) Login to the Google Cloud Console.

2.) Create a new project.
empty google cloud console project list

google cloud console create project

3.) Enable the “Google+ API”
enable Google+ API

4.) Create a new OAuth Client ID in the “Credentials” section of the “APIs & auth” side menu. The application type will be “Web application”. You should include the domain(s) of your web app in the “Authorized Javascript origins” text box. You can leave the “Authorized redirect URI” field blank.
create OAuth client ID

5.) Record the “Client ID for web application” value.
OAuth client ID


1.) Visit the Facebook developers page.

2.) Invoke the “Apps” menu, and click “Create a new app”. Fill in the fields as appropriate.
create facebook app

3.) Record the App ID after creating the app.
facebook app ID

4.) Click on the “Settings” option on the right, and then click the “Add Platform” bar.
facebook app add platform

5.) Click “Website”.
facebook app choose app type

6.) Fill out the “Site URL” under the new “Website” section. This should be the domain of your web app. Finally, save your changes.
facebook app details


1.) Sign in to Amazon’s App Console. with your AWS account. Click on the “Register new application” button.

2.) Fill out the relevant form fields. Note that all fields other than the logo URL are required.
register AWS app

3.) Record the App ID.
AWS app ID

4.) Expand the “Web Settings” section, and add your app’s domain name(s) in the “Allowed JavaScript Origins” section. Note that this URL must be SSL/HTTPS.
AWS web app settings

Creating and securing your S3 bucket

If you haven’t done so already, you will need to create an S3 bucket to receive your user’s files. This is covered in some detail in the “Configuring your buckets” section of the initial Fine Uploader S3 blog post.

In addition to the AllowedHeader values mentioned in the CORS section of the bucket configuration documentation, you will also need to ensure that the x-amz-security-token header is allowed.

Setting up your IAM roles

You will need to create a separate IAM role for each identity provider. Each role will link an identity provider to specific client-side permissions needed by Fine Uploader S3 to send files to your S3 bucket.

1.) Navigate to the IAM roles section of the AWS console.

2.) Click the “Create New Role” button & fill in a name.
IAM role name

3.) Choose the “Role for Identity Provider Access” option on the next step. Click the “Select” button next to “Grant access to web identity providers”.
IAM role for ID provider

4.) Pick an identity provider. If you are using Facebook or Amazon, paste the client ID you recorded when you registered your app in the “Application Id” field. If you are using Google, paste the application ID you recorded in the “Audience” field instead. Click “Continue”. You will be brought to a “Verify Role Trust” step. Click “Continue” again.
AWS role ID provider
AWS role verify ID provider

5.) Expand the “Policy Generator” section, and click “Select”.
AWS role policy generator

6.) You must now specify permissions for your S3 bucket. Fine Uploader S3 only needs the PutObject permission to upload files. However, if you intend to make all files publically viewable (as we do in the live demo), you will also need to include the PutObjectAcl permission. The Amazon Resource Name includes the name of the S3 bucket that will receive files, in the format “arn:aws:s3:::YOUR_BUCKET_NAME/*”. After you have filled all of this out, click “Add Statement”, then “Continue”.
IAM role S3 permissions
IAM role bucket name

7.) Click “Continue” on the “Set Permissions” page step that appears next, then “Create Role” on the final step.
IAM role set permissions

8.) Click on your new role in the roles list, then the “Summary” tab on the bottom pane, and record the Role ARN ID.
IAM role ARN

The code

There is a live demo with accompanying commented code as well. Note that the live demo is hosted in a public S3 bucket. This is more apparent when looking at the URL.

The live demo contains the following files:


Entry point for the live demo. It pulls in all other client-side files and resources. Also, it contains HTML for the Google, Facebook, and Amazon login buttons, as well as other elements required by the third-party JavaScript SDKs. A customized version of a Fine Uploader UI template is also present in the head element. Finally, there is some code to ensure the demo is only displayed if a modern browser is in use. We make use of conditional comments here to display & load the demo if a modern browser is in use, or a message explaining why the demo is not functional if IE9 or older is present.

3 JavaScript files to make use of the identity provider SDKs

We have one JavaScript file for each identity provider. These are used to track authentication requests and pass the token received from a successful auth request on to the AWS SDK. Also, they are used to notify the user when the bearer token has expired (asking them to re-authenticate by clicking on the login button). The files are amazon-auth.js, google-auth.js, and facebook-auth.js.

You must ensure the Role ARN and app IDs are filling in appropriately in these files. Note that the app ID for the Google ID provider is attached to the login button element in index.html as a data attribute. Also note that the facebook and aws files include a providerId in the call they make to the assumeRoleWithWebIdentity method. Google’s ID provider does not have such a property though.


Used to obtain temporary credentials (keys) supplied to Fine Uploader. The bearer tokens obtained from the identity providers are used to generate these credentials.

Fine Uploader S3 built source files & resources

We also must include the Fine Uploader UI S3 jQuery JavaScript, CSS, and other resource files (images/placeholders). You can generate your copy at


Some CSS to enhance the style of this demo.


Creates an instance of Fine Uploader UI S3 jQuery. The “complete” and “credentialsExpired” events are observed. The former includes a button that links to the uploaded file in S3 next to the file item in the UI after a successful upload. The latter asks the AWS credentials code for new credentials before they expire.

Additional reading