AmpliBox - a Self Hosted File Storage App with AWS Amplify
Tags: tutorials, aws, svelte, tailwindcss
Published: 2020-10-12 15:35:04

---
title: AmpliBox - a Self Hosted File Storage App with AWS Amplify
published: true
description: A demo using AWS S3 (Simple Storage Service) using Amplify Storage, Svelte, and Tailwind CSS
tags: Tutorials, AWS, Svelte, Tailwind
slug: amplify-storage-demo
canonical_url: https://www.swyx.io/amplify-storage-demo
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/igg11wp4zrxios48582f.png
---

With Amplify Storage, it is very easy to add file storage capability to any web or mobile app. Here's a quick demo!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/94xwh0o7wv8f2ovesmgs.gif)

## What's Amplify?

[AWS Amplify](https://www.swyx.io/writing/hello-aws/) is an open source toolset that helps you get up and running on AWS faster:

- [A CLI](https://docs.amplify.aws/cli) that lets you add storage functionality and provision it in the cloud
- [JS libraries](https://docs.amplify.aws/lib) (or iOS or Android or Flutter) that lets you call simple functions to execute all these capabilities
- Premade [UI Components](https://docs.amplify.aws/ui/) that we won't be using today.

For app developers, Amplify offers easier access to curated AWS services in each "Category" - ranging from [GraphQL](https://docs.amplify.aws/cli/graphql-transformer/overview), [Authentication](https://docs.amplify.aws/cli/auth/overview), [Analytics](https://docs.amplify.aws/lib/analytics/getting-started/q/platform/js), and even [pretrained Machine Learning models](https://docs.amplify.aws/lib/predictions/intro/q/platform/js). However today we'll be exploring the [Storage](https://docs.amplify.aws/lib/storage/getting-started/q/platform/js) category, which uploads files to [Amazon S3](https://aws.amazon.com/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:

[![amplifybutton](https://oneclick.amplifyapp.com/button.svg)](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/sw-yx/demo-amplify-storage-file-upload)

The demo is built with [Tailwind UI](https://tailwindui.com/) and [Svelte](https://dev.to/swyx/how-to-set-up-svelte-with-tailwind-css-4fg5), 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](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js) if you are to release it for broader production use. You can also run `amplify delete` when you are done to remove all resources provisioned.

## 6 minute Codebase Walkthrough

You can see my 6 minute codebase walkthrough here:

{% youtube Be0hmfNMdxI %}

## Help me share this

If you liked this demo, you can help me [share it on Twitter](https://twitter.com/swyx/status/1315695498032902144?s=20) or [signup to my YouTube](https://youtu.be/Be0hmfNMdxI)!