Chunking Large Uploads in Livewire
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
09. Refreshing a list of uploads

Episodes

0%
Your progress
  • Total: 53m
  • Played: 0m
  • Remaining: 53m
Join or sign in to track your progress

Transcript

00:00
Okay, so let's add in a little list of our files that gets refreshed after they're uploaded. And of course, using what we're doing here, you can just do whatever you want to do after this,
00:08
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,
00:31
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
00:49
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.
01:10
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
01:32
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
01:56
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
02:20
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
02:42
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.
03:06
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.

Episode summary

In this episode, we're focusing on how to display a list of uploaded files in your app, and—most importantly—keep that list up to date whenever someone uploads a new file. We'll start by creating a new Livewire component (called FileIndex for simplicity), hook it up to the dashboard, and make sure it gets all the current user's files ordered by the latest upload.

You'll see how we loop through each file, show its name and location, and deal with the case where there are no files yet. We use some basic Blade features like @forelse to handle this smoothly and make sure each file is keyed properly so Livewire can keep track.

Once the display is sorted, we go over how to auto-refresh the list whenever a file is uploaded. The main trick here is to use Livewire events: after a successful upload, we dispatch a custom refresh event targeting the file list component. The component listens for this event and calls Livewire's built-in refresh method, which reloads the data and updates the UI instantly.

The result is a handy, real-time file list that updates without any page reloads. Plus, you get some ideas for customizing further—maybe to flash messages, or perform other actions instead of or in addition to just refreshing the file list.

Episode discussion

No comments, yet. Be the first!