Build a File Marketplace with Laravel

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

17. Showing and modifying existing files

Episodes

0%

Your progress

Total: 3h 32m
Played: 0m
Remaining: 3h 32m

Join or sign in to track your progress

01. Introduction and setting up

01. Introduction and demo

02. A fresh project with Laravel Breeze

02. Onboarding with Stripe

03. The onboarding screen

04. Registering the Stripe PHP library

05. Automatically creating Stripe accounts for your users

06. Forwarding users to Stripe Connect

07. Verifying if payouts are enabled

03. Creating products

08. Setting up and listing products

09. Installing Livewire

10. Building the product creation form

11. Automatically generating the slug from the product title

12. Validating and creating a product

13. Handling product file uploads

14. Attaching files to a product

04. Editing products

15. Creating the product edit form

16. Reviving product state

17. Showing and modifying existing files

18. Pulling together the product update process

19. Flashing an update message

05. User subdomains

20. Adding a user subdomain on registration

21. Subdomain routing basics

22. Adding a string macro to properly display the user's name

23. Listing the user's live products

06. Product checkout

24. Showing the product page

25. Creating the checkout success page

26. Starting the checkout flow

07. Storing sales

27. Handling Stripe webhooks

28. Storing product sales

29. Sending a confirmation email to customers

30. Securing Stripe webhooks

08. Accessing purchased files

31. Creating and validating the product download page

32. Displaying and downloading files

09. Sales dashboard

33. Calculating and displaying download stats

34. Listing through sales

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.

Episode summary

In this episode, we dive into handling file uploads and edits on a form that's used to update existing records (in this case, products). Dealing with files can be a bit tricky because we need to show both files that already exist for the product and any new files the user wants to upload—plus give users the ability to remove either while editing.

First, you'll see how we re-use the file upload setup from the product creation form to allow new uploads when editing a product. We bring over the logic to manage that, including the ability to add or remove new files before submitting.

Next, we set up a system to manage existing files separately from new uploads. For existing files, we introduce a new property to keep track of them, and show how to display them properly—even though the data structures differ from new uploads. We also build a removal mechanism for existing files, which involves keeping a list of files marked for removal (but not actually deleting them until the form is saved).

A cool part shown here is how to use Livewire's accessors to filter out files that have been "removed" from the UI instantly, making it feel seamless for the user. All of the actual add and remove work happens in-memory until the user hits save, after which everything gets properly synchronized with the database.

By the end of this episode, we've got a form that lets users add, preview, and remove both new and existing files—setting us up perfectly for persisting those changes in the next step.

Episode discussion

No comments, yet. Be the first!