Build a Livewire Drag & Drop Uploader
Save 50% in the Black Friday sale
Ends inJoin here
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
09. Downloading uploaded files

Episodes

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

Transcript

00:00
Luckily for us, downloading these files is actually pretty straightforward. And since we've already created a live wire component for uploaded files, we can just create a simple method in here that allows us to download a file by its ID. So we'll just pass the ID of the file model in here and then return the download.
00:18
For now, let's just die dump on the ID just to make sure we hook it up properly. And we're going to come over to the uploaded files component just here. And we're going to set up this anchor to go through and download this. Now to do this, we can get rid of the href or we could keep it in there.
00:34
We're going to say wire click, we're going to prevent the default behavior. And we're going to call that download method on this component, passing through the file ID that we're currently iterating through. So in here, we're just going to output the file ID.
00:47
And that's as easy as it is to hook that in to a method here. So if I click on one of these, sure enough, you see the ID for each of these. Now at the moment, the cursor looks a little bit odd. So I'm actually going to go ahead and add in the href here, not the jref, to a hash.
01:03
And there we go. It works in exactly the same way. So now what we need to do is figure out how to download this file. Well, we know that over in the database, we're storing the file path.
01:11
So we just need to reference that. So if we head over to uploaded files, all we need to do is inside of here, return from using the storage facade, download, which will download a file. And we just want to find the original file path for the ID that we've passed in.
01:28
Now, of course, what you could do to kind of get around this is you could pass the file path directly into here to then do it. But I preferred in the ID. So then we can relook it up just to make sure it does exist,
01:40
just so we're not allowing any path to be downloaded. So we're going to go ahead and say find or fail. Because of course, if that file doesn't exist by that ID, we don't want to do anything. Pass the ID in, grab the file path, and we are done.
01:55
So let's just try this out. Click here and just wait a couple of seconds. There we go. Our file has downloaded.
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!