This episode is for members only
Sign up to access "Build a File Marketplace with Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
17. Showing and modifying existing files
Episodes
01. Introduction and setting up
02. Onboarding with Stripe
03. Creating products
08. Setting up and listing products
10m 54s
0%
09. Installing Livewire
2m 49s
0%
10. Building the product creation form
15m 1s
0%
11. Automatically generating the slug from the product title
1m 28s
0%
12. Validating and creating a product
6m 23s
0%
13. Handling product file uploads
8m 14s
0%
14. Attaching files to a product
6m 45s
0%
04. Editing products
05. User subdomains
06. Product checkout
07. Storing sales
08. Accessing purchased files
Transcript
00:00
The trickiest part of this form is the files, what we need to do is pull in the existing files,
00:05
allow them to be removed, but also allow new files to be added and allow them to be removed as well. Now the easiest way I've found to deal with this is maintain two different lists or in this case arrays of files, the existing files and any new files that we upload and then when we go to save this to the database we can figure out a way to sort of combine them and update everything that
00:31
we need. So the first thing that we're going to do just to keep things simple is implement the functionality that we did on the create product form to upload list of files. So we're going to go ahead and grab the files and uploads properties from here and move them directly over to edit product much like we had before. We're also then going to implement the hook in here for updated
00:57
uploads and do exactly the same thing in here. So let's bring this down underneath mount. So because everything is pretty much the same here what we should be able to do is still choose files and see them. Now at the moment we don't have with file uploads on here and I think we got rid of that within the template. So the first thing to do would be to use the with file uploads trait on here
01:20
and then if we head over to edit product we should be able to just bring that back like so. So we should see exactly the same thing. Now we don't have the ability to remove a file yet but we'll add that back in. So if we click choose files, let's choose a file in here that works nicely and we can choose multiple files. So at least we know now for adding new files to an
01:41
existing product this should pretty much work. So we can bring over from create product remove file. So let's go ahead and pull this back into here because that's now going to work as we expect. So let's pull this just underneath our updated uploads and make sure that we pull in the array helper. Okay so let's give this a refresh and just make sure all of this works and then we will deal
02:08
with the existing files on here. Okay so I should now be able to remove each of them and that works really nicely. So like I said for existing files we're going to track these separately. So I'm going to go ahead and create a new property up here called existing files and again that's going to be an array of files. What we can then do is when we mount this we can set the existing files to
02:33
the product files that we have inside of our component. So let's go and just iterate over them just to make sure that we've got them or we could just dump them out in here. Let's do that very quickly. So we'll do a var dump on existing files and we should see them in there and sure enough we get a collection of all of these files and we've got two files remember added to this product.
03:02
So what we can do is alongside these files we can output a list of existing files. So let's go ahead and just grab the for each loop here we can do this within the same unordered list and instead we're going to go over the existing files as file and then output all of the details. So at the moment you can see that we get an error here get client original name doesn't exist. That is the
03:27
problem here. These files that we are dealing with here are file uploads so they have things like get client original name but the files here don't have these because these exist as models. Now what we could do is try a clever way to combine these and create some kind of method on our file model to actually grab the file name but it's going to be a lot easier to just deal with these as models
03:53
and then combine them when we save this out. So all we're going to do here is just change this over to file file name and let's get rid of this button just for now because we're going to need to make a couple of changes there as well. So as you can see the existing files are there and then what we can do is choose new files and they will just be added onto the list and we'll bring back
04:14
the remove button for these files and then just keep track of any files that have been removed so we can remove them from our relationship. So what we're going to do is change this method over to remove existing file and then of course what we're going to do is switch over this get file name method maybe just to the id. So now we can implement this remove existing file method over
04:38
on edit product. So let's create our a new method inside of here remove existing file we know we get the id through into here and then what are we going to do with this? Well what we can actually do is just create a property on here to keep track of the files that we want to detach from this existing model. So what I'm going to do is create out a removed files array in here and then we'll
05:02
just keep track of the ids. What we can then do is just detach them when we save this. So let's go down to here and all we want to do in this case is just say this removed files and we're going to go ahead and add on the id to that array. So what that's going to do now is keep track of a list of ids that we want to remove and we can detach them. But the only problem here is when we go ahead and
05:29
remove an existing file that adds it to that array but it still shows this to us in the ui. Now to get around this we're actually going to create an accessor within Livewire that's going to give us a filtered list of the current files we have that don't include the removed files. So just bear with me and we'll go over this in a second. So I'm going to go ahead and create a getter here or an accessor
05:52
and this is get x property that's how we define this out in Livewire. X is going to be the name of the property that we want this to be. So I'm going to call this filtered existing files. Now from here if we just go ahead and return this existing files and we head over to our template we can switch this out for filtered existing files and it's going to work in exactly the same way.
06:21
Now it doesn't quite work at the moment because we need to reference that as this but we're going to get the same thing back so you can see we still get this list of files. What we can now do though is modify this list of existing files by filtering through and removing anything that we have removed. So technically all these files are still going to be there in the background until we get to the
06:41
point where we save the product and then we can detach them. So this existing files is actually a collection so we can just directly use filter on here and let's create our closure here. You can use a shorthand closure if you want to and for each of these we're going to get in a file. Now we can filter this by saying well we don't want anything that is in this array just here this
07:05
removed files array. So we're going to say file id and this removed files. So basically filter out anything that is added to this list of removed files by its id. So we can try this out now by just clicking remove and you can see that sure enough they look like they're gone. We're keeping track of the ones we want to remove we're not actually getting rid of them out of that array
07:30
but now we can add new files if we want to and it kind of just looks like we are removing and adding files within one collection of files. So we're now at the point then when I can start to manage this really nicely and it just looks like it's working. The next step of course is to actually save everything that we have in this form including the new and old files that we've deleted.
34 episodes•3 hrs 32 mins•2 years ago
Overview
Build a marketplace where sellers can list and sell files, while we take a cut of each sale using Stripe Connect.
We'll cover onboarding users with Stripe Connect, creating products and uploading files, payments, and delivering purchased files to your customers.
Here's everything we'll cover:
- The Stripe Connect onboarding flow
- Effortlessly creating products (and uploading files) with Livewire forms
- Subdomains for your user's marketplace
- Stripe Checkout for a beautiful, secure payment flow
- Securely delivering files with Signed URLs in Laravel
- Showing sales stats on a dashboard
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!