swyxWith Amplify Storage, it is very easy to add file storage capability to any web or mobile app. Here's a quick demo!
What's Amplify?
AWS Amplify is an open source toolset that helps you get up and running on AWS faster:
- A CLI that lets you add storage functionality and provision it in the cloud
- JS libraries (or iOS or Android or Flutter) that lets you call simple functions to execute all these capabilities
- Premade UI Components that we won't be using today.
For app developers, Amplify offers easier access to curated AWS services in each "Category" - ranging from GraphQL, Authentication, Analytics, and even pretrained Machine Learning models. However today we'll be exploring the Storage category, which uploads files to Amazon S3.
Demo
You can clone my demo on GitHub here: https://github.com/sw-yx/demo-amplify-storage-file-upload
Or you could try out the one click deploy from Amplify:
The demo is built with Tailwind UI and Svelte, but Amplify is framework agnostic and you can use this toolchain with anything you like. I won't bore you with the step-by-step, since it would mostly duplicate the docs (that I also have updated), but here are the features demonstrated:
- Upload file with progress bar
- List files (with metadata)
- Delete files
- Download files
- Create folder
- Toast success/failure
⚠️ Note that this demo is designed explicitly for educational purposes around Amplify Storage - you still need to add authentication if you are to release it for broader production use. You can also run
amplify deletewhen you are done to remove all resources provisioned.
6 minute Codebase Walkthrough
You can see my 6 minute codebase walkthrough here:
Help me share this
If you liked this demo, you can help me share it on Twitter or signup to my YouTube!
