The underlying AWS mobile CLI used in this course has changed it's API. If you're starting to learn AWS, you may want to try the latest course. We now recommend you take the AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course.
Transcript from the "Upload Images in React with Amplify" Lesson
[00:00:00]
>> Steve Kinney: All right, so what we wanna do is, we've got the files enabled, the next thing we wanna do is go ahead and just like install the AWS mobile stuff. So I'm gonna open it up in Virtual Studio.
>> Steve Kinney: And we'll go into source, we'll go into index.
[00:00:34]
>> Steve Kinney: Does anyone remember what I need to do?
>> Speaker 2: Import.
>> Steve Kinney: Import.
>> Speaker 2: Amplify?
>> Steve Kinney: Amplify from, [LAUGH] not fair, then we'll input the configuration.
>> Steve Kinney: Exports.
>> Steve Kinney: Cool and then the last thing we need to do is amplify.configure.
>> Steve Kinney: And you could call this whatever you want.
[00:01:20] I call it configuration, if you just wanna call it config or whatever, it's all up to you. Cool, no change in my application just yet. So I mentioned like I should probably AWS mobile push it otherwise I'm gonna be like I want to start working on this S3 bucket.
[00:01:37] And they'd be like Nate, you don't have one. And I'm like but I enabled one. It's like yeah, but you didn't tell Amazon about it so if a bucket is created and no one tells Amazon, does it make a sound?
>> Speaker 2: [LAUGH]
>> Steve Kinney: Is that the joke? That's not the joke is it?
[00:01:55] Cool, so we pushed that up.
>> Steve Kinney: And neat, all right. So, we still don't have any functionality in place here. Cool, you turned on user files. It's when we turned on that database before and then didn't implement any API end points. The cool thing is we don't need an API gateway for this.
[00:02:23] All we basically in this case is the storage bucket. So let's go ahead and try that out. What we'll do first is we'll list all the files currently in the bucket. If you remember when we did the database before that was kinda boring it's like, here's an empty array.
[00:02:41] There's a surprise waiting for us in the AWS bucket that we just made so. We'll go into application and before we did component did mount and what we'll do is we'll import storage from 'aws-amplify'. Remember it's not React specific, we're just using React to keep some of the tedium of us writing vanilla JavaScript all over the place.
[00:03:15] And so we pull in the storage API and so we'll start out with.
>> Steve Kinney: Storage.list. And I told you before, if you did photo slash, it would get you all the things under the photo directory. Albums will get you all the things in the albums directory. Well let's just cheat.
[00:03:30] We'll give it an empty string, which is all the things, right? Just start at the very base and tell me everything that's in this bucket.
>> Steve Kinney: Cool and then, we'll say files or we could call it things, but let's.
>> Steve Kinney: And let's just console.log these files. So when the component mounts, go ahead and tell me everything is in the bucket in the console.
[00:04:00] So for that two of these apps running.
>> Steve Kinney: You can see files array as one and you can see that Amazon was nice enough to put an example image in there, right. It's like exampleimage.png, last modified Wednesday May 30th around now. The size of it and an in tag.
[00:04:24] Cool, here's the thing. It's slightly problematic because I can't do anything with Ikea. I can't like okay, let's put a new image on the page and give it the source of example image.png cuz that will look for something that Logo Host 3001, example image png. That's just the key It's not the actual image itself.
[00:04:45] Once I have the keys from Amazon, I can then go ask the storage API, hey, can you give me a URL for the file of that key, right? So it's a little bit of a first ask Amazon for all the keys and then go ask the storage API For the URL that points to the file that it gave.
[00:05:06] But the nice things is like if you put something in there and got a key back, means that you could go store it in a database, you could go store it in local storage, you could go store it anywhere you want and then you say like, I have this key of this file, can you please go get me a URL?
[00:05:19] So while it seems in a contrived example, that we're doing slightly onerous. It's actually got some unique advantages to it as well.