Fine Uploader S3

Easilyuploadfilesto

...andsomuchmore

What is Fine Uploader?

1. NativeJavaScriptfileuploadlibrary2. jQuerysupported(butoptional)3. S3,Azure,&customendpointsupport4. Faulttolerance:chunking,resume,retry,pause5. Images:scaling,previews,paste6. UI:DnD,templating,progress,initiallists7. Also:CORS,delete,forms,validation8. Soon:CloudFront,duplicatefiledetection,...

Browser Support

the oldies...

browsers that don't suck

Fine Uploader S3

Don'tworryabouttheS3RESTAPIForgetaboutconstructingrequests&handlingerrorsConstructapolicy?Noneed!UseS3'sbandwidth,notyourserver'sKeepyourserversimple&focused

Internet Explorer IE7 - 9

MPEPOSTviaformsubmitentirefileinonerequestcustomheaderssentasparams303fromS3toasame-originendpointIE7requiresjson2.js(forpolicygeneration)

All other browsers

UsesS3"multipartuploadAPI"UploadfilesinchunksviaXHREachrequestmustbesigned

AWS Setup

1. Createabucket2.3. SetupCORSrules4. CreateIAMuser(s)

Customdomain?

Server-signed requestworkflow

EachrequestsenttoS3mustbesignedbyserverSecretkeylivesontheserverAccesskeyontheclientKeysshouldbeassociatedw/limitedIAMuser

Dirt Simple Client-Side Code

varuploader=newqq.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"}});

...ofcourse,youneedtohandlesignaturerequestsserverside.(justakeyed-HMAC)

"Serverless" Workflow

ServeronlynecessaryforstaticresourcesGenerateshort-livedlimitedcredsviaserver......-or-use (allclient-side)Requestsaresignedclient-sidebyFineUploaderWIFonlypossiblein"modern"browsers

AWSWIF

Dirt Simple ?Client-Side Code

Notreally.

YoumustintegratewithIP(s)&usetheAWSJSSDK.

Notrocketscience,butmorethanafewlinesofcode.

References

FineUploaderS3demow/server-providedsignaturesFineUploaderS3server-siderequesthandlerexamplesServerlessS3uploadsdemoGettingstartedw/FineUploaderS3FineUploaderS3docspageFineUploaderS3server-sidenotesFineUploaderS3optionsFineUploaderS3APIFineUploaderS3events