Fine Uploader S3
1 like904 views
Fine Uploader is a JavaScript library that allows for easy file uploads directly to AWS S3. It handles chunking files, resuming uploads, and signing requests directly in the browser to upload files without requiring a server intermediary. The library supports uploading files via drag-and-drop, file lists, image scaling and previews. Setup requires configuring an S3 bucket, IAM users, and CORS rules to allow cross-origin requests.
Fine Uploader S3
- 1. Easily upload files to ...and so much more
- 2. 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, ...
- 5. browsers that don't suck
- 6. 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
- 7. 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)
- 8. All other browsers Uses S3 "multipart upload API" Upload files in chunks via XHR Each request must be signed
- 9. AWS Setup 1. Create a bucket 2. Custom domain? 3. Setup CORS rules 4. Create IAM user(s)
- 10. 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
- 11. 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)
- 12. "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
- 13. 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.
- 14. 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