Handling product file uploads: Build a File Marketplace with Laravel

00:13

So if we head over to our create product template here where we've got add files, we want to in here add in an input type of file. And this is basically just going to be empty in terms of the name and ID. We don't necessarily need them.

00:28

Of course, we could attach a label to this and we're going to go ahead and hook this up. Livewire is going to handle the temporary upload of all of these files for us. It will give us back all the information that we need and then it will effortlessly store them as well.

00:41

Now, we can go ahead and select that we would like multiple files, which is absolutely fine. We can do that as well. So let's go ahead and do that for now.

00:48

We'll test it out, but otherwise we can reverse it or make some tweaks. OK, so let's just check out how this looks. There's a little bit of a spacing issue here, so we could do the same thing for the section just up here and add in a space Y of six.

01:02

So let's find the other section and we should be good. Great. So now we can choose any of the files that we want to upload here, which is great. Now, before we do go ahead and choose any of these files, so let's just grab the readme.

01:16

You'll notice that Livewire gives us this really handy error message. We need this with file uploads trait on the create product Livewire component. So let's go ahead and pull that in. That comes directly from Livewire.

01:31

We just index our workspace real quick. And there we go. So we pull that in and that now gives us the ability to upload these files. Now, really importantly, at the moment, this is hooked up to if we head over

01:43

to our input, this uploads property, which we don't actually have over on create product. So let's go ahead and add that in uploads and we should be good. So now behind the scenes, what's going to happen is when we click on this, it's going to upload this file to a temporary location.

02:01

And only when we hit create product can we actually do something with them files. So we're not just putting these anywhere. These are temporary files which we can grab the information from. And really, we want to show these in a list up here as they're uploaded.

02:15

Now, because we want more control over this, what I'm also going to do is add in a files property to this. So any time an upload is added, we're going to add it to this list of files. That means that we can very easily delete it and then we can just clear out the uploads

02:33

and just have this as the ultimate list of all the files that we want to include. So what we're going to do is start by just iterating over these files. We don't have any in there yet, but let's just create an unordered list in here. And we'll have a list item in here if we can get this to actually

02:50

output properly for each of the files that we have. So let's go ahead and say for each files as file. And we'll end that for each there. And we're going to have a file in there.

03:04

We'll look at how to extract the actual information for this in a second. So of course, there are going to be no files in there at the moment. And of course, we get a null given in here anyway. So that's not quite working.

03:15

Let's go ahead and just set this to a default of an array. Same with this as well. That error should go. But of course, we're not iterating over any files that we've created.

03:25

So how are we going to do this? Well, we want to watch for when uploads roll in and then add them to the files array. And then we can remove them from that files array as well really easily. So we can add another hook in here.

03:37

So we're going to say updated uploads. And that's going to give us in here the uploads that have been chosen. And then what we can do is go ahead and add them to the files or rather merge them into the files.

03:51

So we can just use a simple array merge here on this files. And we're going to merge in them uploads. And then what we're going to do is reset the uploads that we have in here back to an empty array to sort of start again.

04:05

And now we can iterate over the files. We can remove them. And then when we get to the point where we actually create the product, we can take all of these files and then, of course, store them.

04:14

So let's just try this out. We're going to go ahead and choose a file from here. And there we go. We've got our first file and a second one.

04:21

And there we go. We've got our second file. Now, the question is, what are each of these files that we actually have in here? Well, if we just die dump on this files, let's take a look.

04:32

So let's give the page a refresh, choose a file. And you can see here we get an uploaded file, a temporary uploaded file. This gives us information about the original name of the file that we're uploading. All of the stuff that we would expect.

04:46

This extends the symphony uploaded file class where you can find all of the methods that you can use. But for now, we just want to do this really simply. And for each of the files, we just want to output the original name that this was uploaded as. So to do this, we're going to access the file.

05:05

And we're going to use get client original name. That's pretty much all we need to do. So let's go over and just try this out. Let's choose read me.

05:13

And there we go. So it gives us all of the files that we're attaching. So adding files is working really nicely. But what about removing files that we potentially don't want?

05:23

Well, what we can do in here, if we just pull this down a little bit, so we've got a little bit of space, is add in a button that when we click on this, it goes ahead and removes a file based on the file name that we have, the temporary file name that we've stored.

05:37

So we're going to go ahead and set a class of this to text indigo 500 maybe. And let's just call this remove. So that's going to look like that. So we can click on that to remove it.

05:50

Of course, you can style it up a little bit better if you want to. And we're going to go ahead and say when we click on this button, we want to call a method over on our live wire component called remove file. And into this, we want to pass in the file name of the file.

06:06

So let's do that now. And then let's just see what happens when we click on this. So file get file name. And let's check this out.

06:14

So we need to implement this remove file method. Let's just do this down here. Remove file. And let's grab the file name.

06:24

And let's die dump on the file name. And we should be good. So let's come over. Let's choose a file here.

06:32

And let's click remove. And there we go. So that is the temporary file name that we have for this file. So now what we can do is go through this list of files that we have chosen,

06:43

files not uploads. And we can remove that from here. So to do this, we're going to overwrite the entire files array. We're going to use Laravel's array helper here.

06:55

And we're going to say where in this files. And the closure here, you could do a short closure here if you wanted to, is going to take in the file itself. And we're going to return on the condition that we only want to return files

07:11

where the file name doesn't equal the file name that we've just given. And we just need to bring that file name into scope there. Effectively, what this is doing is it's filtering out the file that we have just chosen to remove and only giving us back the files that we didn't choose to remove.

07:30

That's pretty much all this is doing. So now that we've done that, let's go ahead and check this out. So let's choose two files in here. And let's choose another one.

07:39

And let's go ahead and remove that original readme. And you can see, sure enough, that disappears. Now, we've got a slight issue here where you've noticed that this has actually submitted the entire form.

07:48

That's just because over in here, quite rightly, we created a button for this, which it should be. But we didn't set a type on here to button. So the form here is assuming that this is the submit button for the entire form.

08:01

So that's the only change we need to make to get this working. Let's just try that again, just to demo it out from here. And we'll choose two files, remove this one, and it's gone. And we can do that all the way down, so we have no more files.

Sign up to access "Build a File Marketplace with Laravel" right now.

Episodes

Transcript

Episode summary

Episode discussion