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.
9 episodes• 43 mins

Overview

Build a multiple file drag-and-drop uploader with Livewire and Alpine.js.

Using Alpine and Livewire’s JavaScript API, we’ll directly hook into the JavaScript drop event and kick off the upload progress, validating files and showing a progress bar along the way.

So, if you need drag-and-drop uploading in your Laravel project, this course has you covered!

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!