Downloading files with Livewire works very similarly to downloading files with Laravel, because it's Laravel. And you can typically use whatever Laravel download utilities that you want inside of your component, and things should work as expected. But this is Livewire. There are some differences behind the scenes as to how downloads are handled, because downloads are actually handled with JavaScript. And if you've tried to download a file with just JavaScript, you know where this is going. The file has to be Base64 encoded and then downloaded to the browser, where then it can be decoded back into binary, so that then it can actually be downloaded and saved on

The file has to be Base64 encoded and then downloaded to the browser, where then it can be decoded back into binary, so that then it can actually be downloaded and saved on the computer, or whatever device the user is using. So from a behind-the-scenes standpoint, yes, it's very different. But code-wise, well, let's take a look at that. So I am inside of the EditArticle component. I'm not inside of the ArticleForm class, because here I want to download the image, or let's use the same terminology, download photo, because it only makes sense to download the photo from the Edit form, not the Create form. So we're doing this here directly inside of the Edit component, and we are simply going

photo from the Edit form, not the Create form. So we're doing this here directly inside of the Edit component, and we are simply going to return response()->download(). And then we just need to supply the path, which in our case we can use the Storage facade. We saved it using the public disk, and then the path is the photoPath from the form. Then we can give it a particular name. Let's just call it article.png, and that's it. That is going to download our file. But of course, we need something to initiate this download process. So inside of the EditArticleView, here where we check if we have a photoPath, we're going

But of course, we need something to initiate this download process. So inside of the EditArticleView, here where we check if we have a photoPath, we're going to change this. First of all, let's add the class of text-center to this div, and then we are going to make the images inline, because Tailwind, I believe, makes them block by default. And then here we will have this image. After we will have a div that has some margin at the top. Then we will have a button, and let's set some attributes here. So the type is going to be simply button. The class is going to essentially have everything that our other buttons have.

So the type is going to be simply button. The class is going to essentially have everything that our other buttons have. So text-gray-200. This is going to be a little smaller, so we're just going to have a little bit of padding. The background will be blue-700, rounded, small. And then hover, bg-blue-900. But then of course, we need the wire:click attribute, and we want to call downloadPhoto. And then the text, simply download. And so now inside of the browser, we see our image, our download button. If we click on the button, we should see that it is downloaded.

And so now inside of the browser, we see our image, our download button. If we click on the button, we should see that it is downloaded. We can open that file, and sure enough, we downloaded the image that we uploaded. And that's really all there is to it. It's very simple. Now Livewire also makes it possible to stream, but it's not a true stream, simply because of the nature of how content is downloaded with Livewire. The download isn't triggered until the file's contents are collected and delivered to the browser. So inside of your closure, you would then echo out the downloaded contents and

delivered to the browser. So inside of your closure, you would then echo out the downloaded contents and specify the file name. So let's keep this here, but let's comment it out. Let's uncomment the code that actually works. So again, downloading files with Livewire is very simple. You can typically use whatever Laravel download utility that you want inside of your component, and it should work as expected. Just be aware it's a little bit different behind the scenes. So that's it.

Just be aware it's a little bit different behind the scenes. So that's it. Thanks for watching. I hope you enjoyed this video. If you did, please leave a like and subscribe. And if you want to see more videos like this, please subscribe to my channel. And I'll see you in the next video.