Easily upload files to



...and so much more

What is Fine Uploader?


  1. Native JavaScript file upload library
  2. jQuery supported (but optional)
  3. S3, Azure, & custom endpoint support
  4. Fault tolerance: chunking, resume, retry, pause
  5. Images: scaling, previews, paste
  6. UI: DnD, templating, progress, initial lists
  7. Also: CORS, delete, forms, validation
  8. Soon: CloudFront, duplicate file detection, ...

Browser Support



the oldies...


browsers that don't suck





Fine Uploader S3


  • Don't worry about the S3 REST API
  • Forget about constructing requests & handling errors
  • Construct a policy?  No need!
  • Use S3's bandwidth, not your server's
  • Keep your server simple & focused


Internet Explorer IE7 - 9


  • MPE POST via form submit
  • entire file in one request
  • custom headers sent as params
  • 303 from S3 to a same-origin endpoint
  • IE7 requires json2.js (for policy generation)

All other browsers


  • Uses S3 "multipart upload API"
  • Upload files in chunks via XHR
  • Each request must be signed

AWS Setup


  1. Create a bucket
  2. Custom domain?
  3. Setup CORS rules
  4. Create IAM user(s)

Server-signed request workflow


  • Each request sent to S3 must be signed by server
  • Secret key lives on the server
  • Access key on the client
  • Keys should be associated w/ limited IAM user

Dirt Simple Client-Side Code


 var uploader = new qq.s3.FineUploader({
    element: document.getElementById("uploaderContainer"),
    request: {
        endpoint: "https://mybucket.s3.amazonaws.com",
        accessKey: "{{MY_CLIENTSIDE_IAM_USER_ACCESS_KEY}}"
    },
    signature: {
        endpoint: "/s3signatures.php"
    },
    iframeSupport: {
        localBlankPagePath: "/blankpage.html"
    }
});

... of course, you need to handle signature requests server side.  (just a keyed-HMAC)

"Serverless" Workflow


  • Server only necessary for static resources
  • Generate short-lived limited creds via server...
  • ... -or- use AWS WIF (all client-side)
  • Requests are signed client-side by Fine Uploader
  • WIF only possible in "modern" browsers

Dirt Simple Client-Side Code?


Not really.

You must integrate with IP(s) & use the AWS JS SDK.  

Not rocket science, but more than a few lines of code.

References




Fine Uploader S3

By Ray Nicholus

Fine Uploader S3

Fine Uploader - uploading to S3 (and more)

  • 2,421