Uploading a Video from Angular to Amazon S3
The ability to upload files from HTML applications has existed for a long time. But in many modern scenarios, we are uploading very large files such as videos, and they are potentially uploading to a cloud blob technology such as Amazon S3.
In this blog post, we are going to upload a file to S3 from an Angular application. There isn’t any magic here, but a common scenario we might run into.
Part of this scenario is that we often want to upload directly from Angular to S3 and avoid extra middleware. Extra hops, especially for big videos, require additional bandwidth, which doesn’t help the process.
Step one is to create a signed URL that will allow video uploading.
This URL will allow for direct upload from anyone as long as they have the URL. The URL will only work once and for a certain amount of time.
Once we have the URL, we need to upload a file from Angular. This is relatively simple, but there are some things to be aware of.
First, we need to add an upload input tag to one of our Angular components.
Then we need to save the file to a private member variable on our Angular component.
We need to send the file to S3 using the HTTP client put method.
While this isn’t particularly complicated, there are a few details to get correct. Hopefully this post helps point you in the right direction.
