Uploading files directly to Amazon S3 using AJAX

Direct upload using uppy (uppy.io)

Uppy plugins used:

Dashboard
DragDrop
GoldenRetriever
AwsS3

Source code of this example: JS, HTML

URLs to uploaded files:

Direct upload using HTML form

Choose your image

Debug information coming from s3_upload key

{"form_data":{"key":"uploads/db6432b8-7fd0-4036-bdd0-50c6ba8bbed4/${filename}","success_action_status":"201","acl":"public-read","Content-Disposition":"inline","x-amz-meta-versions":"{}","x-amz-meta-acl":"public-read","x-amz-meta-content-disposition":"inline","policy":"eyJleHBpcmF0aW9uIjoiMjAyMC0wNS0yNVQwMDowODoxMloiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJ1cGxvYWRzLnN0YWdpbmcub3JlZ29uLnBsYXRmb3JtLW9zLmNvbSJ9LFsic3RhcnRzLXdpdGgiLCIka2V5IiwidXBsb2Fkcy9kYjY0MzJiOC03ZmQwLTQwMzYtYmRkMC01MGM2YmE4YmJlZDQvIl0seyJzdWNjZXNzX2FjdGlvbl9zdGF0dXMiOiIyMDEifSx7ImFjbCI6InB1YmxpYy1yZWFkIn0seyJDb250ZW50LURpc3Bvc2l0aW9uIjoiaW5saW5lIn0seyJ4LWFtei1tZXRhLXZlcnNpb25zIjoie30ifSx7IngtYW16LW1ldGEtYWNsIjoicHVibGljLXJlYWQifSx7IngtYW16LW1ldGEtY29udGVudC1kaXNwb3NpdGlvbiI6ImlubGluZSJ9LHsieC1hbXotY3JlZGVudGlhbCI6IkFLSUE0SU1LSVdZVkY2NVgzUjZSLzIwMjAwNTI0L3VzLXdlc3QtMi9zMy9hd3M0X3JlcXVlc3QifSx7IngtYW16LWFsZ29yaXRobSI6IkFXUzQtSE1BQy1TSEEyNTYifSx7IngtYW16LWRhdGUiOiIyMDIwMDUyNFQyMzA4MTJaIn1dfQ==","x-amz-credential":"AKIA4IMKIWYVF65X3R6R/20200524/us-west-2/s3/aws4_request","x-amz-algorithm":"AWS4-HMAC-SHA256","x-amz-date":"20200524T230812Z","x-amz-signature":"fadc0c013c5bebb1d0405d2c2a1e22cc5715e492929afeffb763186297dcf3a2"},"direct_upload_url":"https://s3-us-west-2.amazonaws.com/uploads.staging.oregon.platform-os.com"}

Direct upload using AJAX

Heads up! Example below require you to be logged in as *developer*.
If you dont have developer account, create it here.

Direct upload using uppy (uppy.io)

Direct upload using HTML form

Direct upload using AJAX

Uploading Files Directly to Amazon S3 and using uploaded file as an avatar