Easily upload files to
...and so much more
What is Fine Uploader?
- Native JavaScript file upload library
- jQuery supported (but optional)
- S3, Azure, & custom endpoint support
-
Fault tolerance: chunking, resume, retry, pause
- Images: scaling, previews, paste
- UI: DnD, templating, progress, initial lists
- Also: CORS, delete, forms, validation
- 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
- Create a bucket
- Custom domain?
- Setup CORS rules
- 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 demo w/ server-provided signatures
- Fine Uploader S3 server-side request handler examples
-
Serverless S3 uploads demo
- Getting started w/ Fine Uploader S3
- Fine Uploader S3 docs page
- Fine Uploader S3 server-side notes
- Fine Uploader S3 options
- Fine Uploader S3 API
- Fine Uploader S3 events
Fine Uploader S3
By Ray Nicholus
Fine Uploader S3
Fine Uploader - uploading to S3 (and more)
- 2,546