Build a Livewire Drag & Drop Uploader
This episode is for members only

Sign up to access "Build a Livewire Drag & Drop Uploader" right now.

Get started
Already a member? Sign in to continue
Playing
08. Listing and refreshing uploaded files

Episodes

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

Transcript

00:00
So for our list of files, we're going to go ahead and grab this wrapper here and just copy and paste it down. This is going to be the list of files that we want to show. That just appears at the bottom here.
00:10
Now we want a similar design for this. So if we just head over to our uploader, we could just grab, let's grab the entire structure of this just to be lazy, and we'll go ahead and create a component in here for our list of uploaded files, and then we will add in that markup.
00:26
So again, we're going to create another Livewire component for this, and there's a good reason for that, and if we say make Livewire uploaded files, that should just about do. We know that this is going to have created an uploaded files.blade.php file. Let's just paste this in and then just get rid of sort of everything in between here
00:44
just so we have the same markup for this. So we'll get rid of all of that, and we will get rid of everything inside of these two divs here. So this is our list of uploaded files.
00:58
Let's go over, and if we actually apply this component to our dashboard, Livewire uploaded files, and just fix that up, we should see the following. Great. So what we can do with this is just set a space on the y-axis of, say, six just to space
01:17
these two things out a little bit. Okay, so the first goal is just to grab all of the files that exist in the database and just list them here. That's pretty straightforward.
01:27
Pretty much what we would always do in an app. So over in the uploaded files component, in here we can do this one of two ways. We could pass these down into here, or what I prefer to do usually just in case I want to reference them more than once or want to apply anything else or do something slightly
01:46
differently is create out a files property. So what this is going to do is it's going to create a cached property where when we return this data, no matter how many times we reference files, this is always going to be cached.
02:00
So we're just going to say file latest get, just like we normally would with Eloquent. Pull the model in for this, and now we can access this files from within our template. So let's just try this out really quickly and just really roughly before we style anything up.
02:15
We're going to go ahead and say for each this files as file. We're going to go ahead and end the for each just here, and we will just dump out, say, the file file name in there. Let's have a look.
02:29
And there we go. It's pretty much what we wanted, but we can slightly tidy this up. So for these, what we're going to do is still keep this for each loop, obviously still keep this div.
02:39
But inside of here, we're going to make this an anchor because we want to be able to click on it to eventually download the file, which we'll get to in the next episode. So we're going to add a class in here of text small. Let's set the font to medium, and we'll just set the text to Indigo 600.
02:55
I think that will pretty much match what we've already got. Great. So we've got them files in there. Now what we want to figure out before we look at downloading these files is when we click
03:05
and upload a new file. So if I upload this one, that's going to, of course, go ahead and upload. We can switch throttling off as well here, but we don't see it here until we refresh the page.
03:16
That's not great. We want this to automatically update once the upload has finished. So what we can do, and the reason we've created out a separate LiveWire component for this uploaded files list is we can add in a listener in here, and we can emit to this component
03:34
to technically just refresh the list of files. So we're going to go ahead and add in a listeners property to this component, and we're going to add in a refresh listener, which calls the refresh method of this component to just refresh it.
03:49
So it will just show the latest data. So what we can now do is we can emit an event to this component called refresh, and that's just going to refresh the list. So we want to do that from our uploader.
04:00
So the actual uploader component itself, and just underneath where we collect up the files and go through these, we can go ahead and say emit to. We could just globally emit this, but if we had any other component with the same listener, we would end up with lots of different components being refreshed.
04:17
So we're going to say emit to uploaded files. That's the LiveWire component, and we're going to emit the refresh event. That is pretty much all we need to do. So let's go over and just try this out and see what happens.
04:30
So let's upload a new file here, and there we go. We get a new file added in there once this is finished. So pretty straightforward to create that list and then go ahead and refresh it once our files have been uploaded.

Episode summary

In this episode, we work on displaying a list of the files that have been uploaded. We start by copying some of the markup structure from our uploader to keep things looking consistent and quickly set up a new Livewire component specifically for showing the list of uploaded files. After wiring up the new component and pasting in the markup, we clean it up so it's ready to display data from the database.

Next, we fetch all the uploaded files from the database using a Livewire property and loop through them, displaying each filename right in the UI. Then we update the list items to be clickable links (even though the actual downloading will be handled in the next episode) and tweak the styling to match our app.

One big issue we notice is that after uploading a new file, the list doesn't automatically update—instead, we have to refresh the whole page. To fix this, we set up a Livewire event system: the uploader emits a refresh event to the file list component after a successful upload, causing it to re-fetch and display the latest files instantly.

By the end of this episode, we've got a fully dynamic list of uploaded files that updates automatically as new files are added, laying the groundwork for adding download functionality next.

Episode discussion

No comments, yet. Be the first!