Livewire Multi Step Forms
This episode is for members only

Sign up to access "Livewire Multi Step Forms" right now.

Get started
Already a member? Sign in to continue
Playing
10. Uploading a product image

Episodes

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

Transcript

00:00
OK, so let's go ahead and just add in the ability to upload an image and store it on this product, which
00:06
we can now get via our state. Now, this is going to work beautifully, but then a little bit later when we look at navigating back and then back to our image step, everything's going to break.
00:16
So we'll see how we deal with that later. But for now, let's just get this added. OK, so we're going to start out on the image step component, the blade template.
00:25
And let's just scaffold out what we want to see here. So we're going to have a label in here, which will hook up to a file input. So let's go and create an input type of file.
00:36
This file input, let's get rid of the name because we're not going to need this. And the ID is just going to be image. So we can hook this up, but then we can hide this
00:46
so we get a nice label. OK, so for this label, let's say choose an image. And then we'll just style this up to look like something that we can click.
00:55
So we'll set a height of 44, a width of 44. Let's set the background to gray. We'll give this a border. We'll set the border to dashed.
01:04
And we'll say flex items center and justify center as well. So this text sits in the middle. And again, it's really annoying because we have to fill out all of this data to get to the next step.
01:18
But let's go and have a look. OK, there we go. So when we click on that, we get the ability to choose a file. OK, so next to this is pretty much
01:27
going to be down here the preview of the image. So this is just going to be an image with a source in here. So we can get rid of this. And we can pretty much keep the, well, let's just
01:38
keep the height and width. And that will be our preview image with a source when we actually see something. So I'm going to go ahead and wrap all of this stuff
01:48
here in a div. And then I'm going to wrap this in a div just so we can space these two things out. So not super important, but I basically
02:01
want to say space x of 3. And we'll say flex item center as well. So basically, when we get to this step, we'll have the image preview here when we choose an image.
02:12
OK, so let's get this preview actually output. So to do this, we're going to go over to our image step. We're going to use the with file upload trait from Livewire. And of course, we're going to store this
02:24
as a property just up here. So let's call this image. And we can validate this as well. So let's make sure we bring in our validate attribute.
02:33
We'll just say that this needs to be an image. And it needs to be a max of 1024. And we may as well add in a required in there as well. Great.
02:42
OK, so with that done, we can now hook up the input here to that image. And then here, once that gets uploaded, we can add an if statement to show this
02:55
when we have that preview. So let's end the if there. And basically, we want to say when we have an image, when this gets wired up once we've chosen an image,
03:03
the source is going to be the temporary URL for this file upload. So this is just basic Livewire upload stuff. So we're going to say temporary URL.
03:15
And now what should happen is when we choose an image and that detects that the image is there, it's just going to show that image inside of that source. So let's just try this out and see what we get.
03:26
So let's fill this in quickly. Let's choose an image. And there we go. Great.
03:31
So very basic upload functionality with a preview. So now when we submit this form, e.g. when we hit Next Step, all we need to do is take the image that is now within that property,
03:42
store it somewhere on our file system or wherever we're storing it, and then attach the path back to the model, which we know we've got an instance of.
03:51
So over in the image step now, this is going to be pretty straightforward. We've already looked the image up. Now we just need to update it.
03:57
Or we've already looked the product up. So in here, we can go ahead and say this validate. And then we can say this state product update. So we can directly update that model now.
04:09
And let's just remind ourselves we have an image path in here. And we can set that from this image, which is our temporarily uploaded file. And we can store this publicly as inside of an images
04:26
directory. And we could just use the string helper to generate out a UUID. It doesn't really matter how we store this at this point. And we'll set it in the public file system.
04:36
So basically, take the image that we've already uploaded, store it, set it back into this product, and then, of course, go to the next step. So we can say this next step, and we're done.
04:48
So let's roll through this, check it's working, and then we will have stored our product image. So let's give the page a refresh. Let's go ahead and fill in this information.
04:57
Let's choose an image. And let's hit Next Step. We're over to the next step. And what we should see in our database
05:04
is that image stored. And that will have been put on the public file system as well. So there we go.
05:09
Now that we've got our state, we can easily access that for any subsequent steps to perform updates on that thing that we've already created. Or if we're just storing all of this data in one batch,
05:21
we could use our helper methods within our state to return this in a better format to add to. So whatever you're doing, creating custom helpers on your state really helps.
05:31
And it's helped here because we can directly access this model and then go ahead and update this stuff. Now what's going to get really tricky is when we start to navigate back to the previous step.
05:43
So for example, if I go ahead and enter in a title and a description, and then I choose an image, and then I want to go back to product information, things are going to start to break.
05:55
So if I click back into here and then back into product image, first of all, that state is lost. But once we've stored that and we go back, everything is just going to break.
06:04
So let's go over to the next episode, look at our next and back buttons, first of all, just so we can easily navigate. And then we'll figure out how to solve all of these issues.

Episode summary

In this episode, we get hands-on with adding image upload functionality to our product form. We start off by working on the image step component and its Blade template. Here, we set up a simple UI: a file input that's nicely styled and hooked up to a label for a smooth user experience. We also add an area next to the input to preview the selected image before it's uploaded—super handy!

Once the UI is looking good, we bring in Livewire's file upload capabilities. We make sure that image files are validated (for type, size, and presence), and connect the input so that picking an image will instantly show a preview using Livewire's temporary URL feature.

After the UI and Livewire are doing their thing, we wire up the backend logic: when you hit the "Next Step" button, the selected file is stored publicly on the server, with its path attached to our product model.

We check that the image is being saved and the path is updated in the database. The state system we have makes it easy to update or retrieve the latest product image anytime during the form process.

But of course, there's a gotcha! When navigating back and forth between steps, we notice some issues with the image state and preview—which sets us up nicely for the next episode, where we'll tackle navigation and state management between form steps. Stay tuned!

Episode discussion

No comments, yet. Be the first!