Use AWS Amplify to add Amazon S3 Static File Storage
In this video, we'll first create a form for our video model. Once a new video is created, we'll upload the video file to Amazon S3, which we'll enable via the Amplify CLI. Finally, we'll display a video on our page.
Ali Spittel: [0:00] I currently have an app that shows my courses on the page and allows me to add new courses. I also want to make it so that I can add new videos to each course. I'm going to create a new component called videoForm.
[0:21] I'll import my videoForm, and I'll create an instance with each course. I'll also pass the course ID. I'll make it to that my form has four inputs. In the future, I'd want to add titles and all of that, but for the sake of the video, I'll keep it simple. The last field will be a file field which will accept movies and mp4s. I'll import { useState } from' react' and create state fields for each input.
[1:11] I'll add event listeners to each input that when I type in them my state updates to match. I'll add an onSubmit to the form and also add a Submit button. I'll go to the Admin UI. I'll click Local setup instructions, and then go to my video. I want Create.
[2:30] First, I'll copy and paste the imports and put them at the top of the file. I'll also copy and paste this data storage snippet. I need to change these to use my real values instead of the ones supplied. I'll use the course ID from props.
[3:01] Once my video is saved, I want to store it to a variable. I want to use Amazon S3 to host my videos. I'll go to my terminal and run amplify add storage within my project. I want Content. I'll give all permissions to everybody for the time being.
[3:35] I'll run amplify push to deploy my storage changes. I'll make it so that my video uploads after my video's created. I'll import storage from AWS Amplify and then I'll run storage.put. Instead of my storage.put, I'll provide two arguments -- the name that I want to give my file and the file itself.
[4:02] I'll use the ID of the video as the name and then use the video file as the upload. I also need to add an e.preventDefault() to prevent the page from refreshing when I submit the form.
[4:15] Now I can create a new video. Render one video on the page. I'm going to go to the App.js component. From here, I'll import storage so that I can get my video from S3. I'm also going to import my video model. Then I'm going to query all of my videos.
[4:40] I'll then store that video in state. I'm only going to store my first video in state. Once a video comes back, I also need to get my video file from S3. I'll use the ID of the video from above. I'll also store this video file in state. Now, I'll use the video tag to render the video on the page. You can see that my video shows up on the page.
[5:39] In this video, we've created a form to create a new video. Then we made it so that when we create a new video, a new video file is added to S3. We used amplify add storage to enable this. Finally, we made it so that we can display a video on the page.