Sign up to access "Chunking Large Uploads in Livewire" right now.

flash a message, whatever your app needs. Okay, so we'll go ahead and create out a new component for this. So let's make out a Livewire component. And we'll call this file index, keep it super simple. And let's head over to our dashboard. And we're going to put this down here. This is now going to be our file index. So if we open up our file index Livewire component,

we just want to pass down a list of the files here. So again, let's grab the currently authenticated user. Let's grab the files, we'll scope them by latest, and we will grab them. So now over in the file index, we're just going to iterate through them. And then we're going to look at how we can refresh this list. So for this, let's go and say

for else just to keep things simple. And if we don't have any files, we can put that in empty. And then we can just end the for else here. So this will be no files yet. Otherwise, we can iterate through these. So let's say for each files as file, we'll create out a little container for each of our files here, not forgetting to use wire key to key these.

So we'll just key them by the file ID. And then let's just output the file, file name, and then in brackets, let's go and add the file location. So file path. Okay, so that should just list our files out. Let's just give that a refresh. And sure enough, that works. So I'm just going to pop this in another container. So let's grab this. And we'll grab

the background just here, pop this down here. And let's replace this over. And then just at the top here, I'm going to go ahead and add a space y of three. And there we go. So now what we want to do is once this file has been uploaded, trigger a reload of all of our files. Now there's a ton of different ways that you can do this. But depending on how simple this is, we could just

trigger a refresh on this live wire component. Or you could push to an array and have it re-render, it doesn't really matter. So let's go over to our specific upload. This is where we want to say this file has been successfully stored. And we want to dispatch. So let's say this dispatch. And we could do something like success in here, we could flash a message if we wanted to. And of course, we could

pass any information about this stored file. But what I'm going to do is I'm just going to dispatch a refresh event. And that is going to go specifically to that component. So I want to say, well, when I'm uploading specific files, maybe videos, I just want to refresh a particular component. And you can do pretty much whatever you want in here. So that is the file index. So

we're specifically targeting that component. And we're dispatching a fresh event. So over in our file index, let's go and create out a listeners array in here. And we can say, well, when we receive that refresh event in, let's call the magic refresh method to update this list. Now, this is a really basic implementation, but feel free to use this to do anything you want to do.

So I'm going to go ahead and upload a file. And sure enough, what we should now see is once that is finished, that dispatched, and our list gets updated. So there we go, a really, really basic way to just refresh a list of the files that we have. But in place of what we did over here, when we dispatch this, do anything you need to do. You could flash a message, or you could just do nothing.