Our images are getting saved in the application, but I'd like to have somewhere to display all of the ones that we've uploaded. When the page loads up, it should show all of our pictures, somewhere like down here. And whenever a new one is uploaded, it should be added in the gallery automatically. Let's dive back into our source code and see what it'll take to make that possible. Pretty much all of this functionality will be contained in the app.vue file, so let's open that up. So whenever anybody visits the app, we should show the images that have already been uploaded. So in our component, at the bottom, we're going to add an attribute to our data return called images, and it's an array.

So in our component, at the bottom, we're going to add an attribute to our data return called images, and it's an array. And as you might have guessed, this will store the images to be displayed in our gallery. Now first we need to get them. So we'll add in a mounted method to our component. This is part of the Vue's lifecycle methods, and we'll fire whenever the component is mounted and ready. So we're going to use axios and say get('/images'), and on the return of that, we're going to replace our images data object with the response.data property that we get back. And if it errors out, we'll just log that in the console.

to replace our images data object with the response data property that we get back. And if it errors out, we'll just log that in the console. Okay this image's route I'm pretty sure we already set up. So if we go to routes/web.php, yeah we have an image's route here, and it's going to the ImageController's show method, which right now is empty, but we'll need it to return some data back to us. So if we wanted to return all of the images, we could just say return Image::all(); But there's a lot of data that we don't necessarily need in that right now. All we're going to do is show the images on the front end, so we only really need the name out of each of them.

All we're going to do is show the images on the front end, so we only really need the name out of each of them. So instead of all, we can say image::pluck and pass in a column that we want to take out, in our case name, and to array. And we can test this out by going to that image's route in our browser. And we can see we have our two image names here that we uploaded in the previous video. Something I do want to make sure of though, is that these are coming back in the order that they were uploaded, with the newest being the first one, and the oldest being the last. We can ensure that happens by using this handy latest method, which will order them descending from the created_at date.

We can ensure that happens by using this handy latest method, which will order them descending from the created_at date. And that changed it, which means that this top one is the one that we uploaded most recently, and the bottom one is the one that we uploaded first. Okay let's go back to our initial front page. And we can leave this, and this. And now we need to do something with this images array. Like display them in the front end. So let's add something underneath our FilePond element here. So let's wrap this in a div.

So let's add something underneath our FilePond element here. So let's wrap this in a div. And we'll add in another div here, with a margin-top of 8, margin-bottom of 24. And we'll give it a header, text to Excel, font-medium, and text-center. Image gallery. And now we'll use Tailwind's grid classes to create a grid that we can add these images into. So grid, 3 columns, a gap of 2, justify evenly, and a margin-top of 4. Okay, now we just have to add each image in. So we'll use a div to wrap that in, v-for, image, index, in images.

Okay, now we just have to add each image in. So we'll use a div to wrap that in, v4, image, index, in images. We have to specify a key here, because Vue complains if we don't. And for that we'll just use the index. All that's left to do is create the img element. And we bind the source using v-bind's shortcode, :src. And it's not just image, because that's just the name of the image. We have to specify the full relative path to it from our URL. You might remember in the last video, that's /storage/images. And then plus the image name.

You might remember in the last video, that's storage, images. And then plus the image name. Alright let's save this and compile our assets. And head to our browser and see how this looks. Alright perfect, right after the app loaded up, our images were pulled in and displayed in the gallery below. What I would also like to have happen though, is when we upload a new image here, I'd want it to display in the gallery below without having to refresh the page again. And we should be able to hook into the FilePond component to make that happen. So back in our source code, let's scroll down a bit.

And we should be able to hook into the FilePond component to make that happen. So back in our source code, let's scroll down a bit. And in our Methods section, we'll create a new method called handleProcessedFile, which will fire each time that FilePond uploads and processes a file. This comes with two arguments, error and file. And error is only valid if there was an error when uploading. So if there's an error, we want to display that in the console. And return early, so the method execution doesn't continue. But if there are no errors, then we want to add the file to our images array. The problem though is that I really don't know what we're getting out of that file.

But if there are no errors, then we want to add the file to our images array. The problem though is that I really don't know what we're getting out of that file. I don't know if it's a proprietary object from FilePond, or if it's the response that we're getting back from the server, which would be the ImageModel object. Let's figure this out by just logging it to the console. And to actually ensure that this method fires, we have to add it into our FilePond element up here. There's an event that we can hook onto in this View component, at ProcessFile equals HandleProcessedFile. So the FilePond component emits a ProcessFile event, and our HandleProcessedFile is the

HandleProcessedFile. So the FilePond component emits a ProcessFile event, and our HandleProcessedFile is the one to handle that. Okay let's open up our browser. Actually let's compile this first. And then open up our browser and take a look at what's coming back from FilePond. So let's open up our console window here. And upload a new image. Let's go with this one. Okay so this is what we're getting back from FilePond in our HandleProcessedFile method.

Let's go with this one. Okay so this is what we're getting back from FilePond in our handleProcessedFile method. And it's an object that does look like it's a proprietary one from FilePond. So let's see if we can find any useful data in one of these properties. So this is the file that was uploaded, id, origin. Okay so it looks like serverId is the JSON that we're getting back from the server. Yeah nothing else comes close. So serverId is what we want. Now there's two ways we could go about this. We could parse out this JSON and then pull the name from it to add into the gallery.

Now there's two ways we could go about this. We could parse out this JSON and then pull the name from it to add into the gallery. But since this is called serverId, I'd rather it just return a simple string that we can use instead. So I'm actually going to modify our ImageController. Let's close out of this. And open up our source code again. And let's go to our ImageController. Okay so in our store method, instead of returning the image, we're going to return just the name from it.

Okay so in our store method, instead of returning the image, we're going to return just the name from it. So now back in our App\View component, in the handleProcessFile method, we can get rid of this, and instead say this.images.push.file.serverId. So this serverId should just contain the name of the image, and it'll push it to the files array, which is an array of names. If all goes well, after we upload an image successfully, we should see it in our gallery. So let's recompile this and take a look at that. Okay refreshing, we see the image that we just uploaded previously. And it is the first one, which is what we expected with that latest method.

Okay refreshing, we see the image that we just uploaded previously. And it is the first one, which is what we expected with that latest method. But let's add a new one. Alright it uploaded successfully, and if we scroll down, it's the last image here. Unfortunately though, I don't want it to be the last, because if we refresh, it ends up being the first. Because we have this gallery organized from the latest one uploaded to the oldest. So let's actually swap out that push method, and instead we can use something called unshift. What this will do is push this element to the front of the array instead of at the end of it.

Let's see what happens if we try multiple at the same time. Alright each of these were uploaded, and they appeared in the gallery at the exact place they should be. So if we refresh, the order stayed the same, which is exactly what we expected. Now what if we wanted to add more harsh restrictions to the images being uploaded? Things like size or extensions? Well I'll show you how to do that in the next video.