Check out a free preview of the full Rapid Development on AWS: React, Node.js & GraphQL course:
The "Display Storage API Files in React" Lesson is part of the full, Rapid Development on AWS: React, Node.js & GraphQL course featured in this preview video. Here's what you'd learn in this lesson:

Steve walks through how to display images from an S3 bucket with the Storage API.

Get Unlimited Access Now

Transcript from the "Display Storage API Files in React" Lesson

>> Steve Kinney: We've got the file in place there. Now it'd be nice to put it on the screen. The problem is that one of the things that makes JavaScript hard sometimes is asynchrony. Asynchronous code makes everything more difficult. You'll be like, go get me the thing, and then go do this next thing with it.

[00:00:18] But JavaScript's like, yeah, but I don't know when I'm gonna have that thing. So here's a promise, and I'll get it back to you later. And then you give that promise to the queue, and then what do you need to do? You need to go ask S3 for the actual URL, which is again, well, I don't have the URL yet.

[00:00:36] So give me the key, and I'll give you another promise. So it does create a little bit of difficulty around this. And so in the AWS Amplify React Library there actually is an S3 image component that will take care of this all for you. But we're actually gonna write it from scratch just to better understand how the mechanics work here.

[00:00:54] Cool, so we have the files. So here we have files, and I'm gonna change this code a little bit. I'm gonna use the async-await syntax to just to kind of make it a little clearer what's happening. So we just call this an async function and we'll say,
>> Steve Kinney: Say const keys, await, Storage.list.

[00:01:20] So remember I had files before? I can even call this files if it makes it clearer. This is really, under the hood, the same code as we had before, but my font is very big. And if I keep putting promises, chaining promises, it's gonna be very difficult. So, I'm gonna use the syntax mostly so we can all read it.

[00:01:39] So this will turn into an array of all of the keys that are currently in this S3 bucket, which we saw before I logged to my console. So the next thing we need to do is we want to go ahead and take all of the keys and get the URLs for each one of them.

[00:01:56] So we can just basically. You know what was really regretful? Is I started this sentence with, so we just basically. Anything involving asynchronous code, if someone starts with the words, basically or obviously in other words, then easily, you just do this. They're a liar. Nothing is easy about asynchronous code.

[00:02:15] So we'll go ahead, cuz I know every line of code that I'm about to write. We're not gonna keep this code, so if if makes you hurt Inside, if it makes your stomach turn a little bit, that's fine. I'm going to eventually call it out as bad code, and then I'm going to delete it.

[00:02:28] So let the feeling of disgust wash over you. It's fine.
>> Steve Kinney: We're gonna need to go ahead and wait for a promise of all of the keys in that that array to be turned into real URLs. So we'll go ahead and say Promise.all. And we'll take those files.

>> Steve Kinney: Again, I apologize for what I'm about to do here.
>> Steve Kinney: Just don't even ask. Like I'm embarrassed of what I'm doing right now.
>> Steve Kinney: I'm proving that there's a problem here. Cool, so here, we're gonna ahead and asynchronously fetch the actual URL. Say, storage, go get the file by a given key.

[00:03:18] So this will get me the array of all of them.
>> Steve Kinney: Next time someone tells you that JavaScript is easy and front-end development is easy, you just show them this line of code and tell them to tell you what it means. That'll show them. Cool, so now I have an array of URLs.

[00:03:44] And you can see it's my S3 bucket with a unique URL that is going to be an example image that we will see eventually. Now it's just a URL. It's not necessarily the image just yet. I need to make an image tag or something along those lines. Cool,

>> Steve Kinney: So what we'll do real quick is we'll actually just set them in states. So I have this files array. So I'll say, this.setState.
>> Steve Kinney: Maybe I could have named that better, but here we are.
>> Steve Kinney: So, we'll actually put them all in state in this array. Once we finally get them, after we do the initial handshake, with storage.list, to go get the array of keys.

[00:04:33] And then we go and for every key in that array go ahead and get the URL for it. When all of that asynchronous stuff is done, then we'll actually have an array full of the URLs, and we can go ahead,
>> Steve Kinney: And just show them on the page.

>> Steve Kinney: Again the word just when doing asynchronous code, suspicious. This.state.files.
>> Steve Kinney: So go through all of the files, and we're gonna show each one.
>> Steve Kinney: Cool, so this is gonna put it on the page, he says.
>> Steve Kinney: Actually I have to return out of that or else it's not gonna work.

[00:05:35] Luckily that was actually a very helpful error message. Say, hey, you forgot a return, and I'm like, thank you.
>> Steve Kinney: Cool, and that was all the wait to see, what was the example image that Amazon put in the bucket for me? It's this right here. Fun little bonus for me is that when I chose the purple color scheme, I didn't know that there was an image in that bucket yet when I was starting this, so that's nice.