Multiple Drag And Drop File Uploading and Processing with Inertia
This episode is for members only

Sign up to access "Multiple Drag And Drop File Uploading and Processing with Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
05. Updating upload details

Episodes

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

Transcript

00:00
Okay so we haven't even started the upload process yet but first of all let's tackle
00:03
the form on each of the uploads where we can update the title and the description, so for this we're going to head over to our upload item and we're going to go ahead and just roughly style this out adding our inputs and then we'll hook everything up so we can actually submit this, now of course what we're not doing at the moment is actually uploading
00:22
a file all of this is going to happen separately so the upload process will just happen at the same time as showing this form and then we can just send additional requests down and we can do this directly with inertia we're not going to need to use Axios for this, so let's go ahead and create out a div within here and let's go ahead and separate this stuff
00:42
out so we'll say flex and space x of 6 and then we're going to have a left hand side here which is going to show the progress and then we're going to have our form on this side so we can change this directly over to a form so let's go and just trigger an upload here just so we can see this and there we go so we've got the left hand side of the progress the right hand side for the
01:03
form we'll fill this in later let's just focus on the form for now, now Laravel Breeze comes with a bunch of input components that we can just directly use in here so it kind of makes sense to copy what's already been done and we can just grab that kind of stuff from the login page so if we just look for email for example we'll see that we've got an input label a text input all that
01:25
kind of stuff so I'm just going to grab this entire thing here copy over and then we can change this over and create our text area component so let's go ahead and just indent all of this stuff and then I'm just going to tidy this up by bringing each of these items up line by line we'll tidy everything up and then we can just copy and paste everything else down, okay great so let's pull this
01:47
up as well pull these together and there we go now we're not going to need the required or auto focus or auto complete so we can get rid of them we'll get rid of the v model for now because we're not really sure what we're doing there and we'll also comment out the input error because we're not really sure where this data is coming from just yet let's hook this up to be a title so
02:08
that's going to be a video title and we can change this over to title as well great so we need to import these so let's pull these in at the top my editor can do that but if not just pull these in directly okay so I have a feeling yeah this is going to error just because we don't have a model hooked up so let's go ahead and create our form at the top now this comes from our use form composable
02:29
from inertia view 3 if you've worked with inertia before you'll know about this so let's go ahead and create out our form here using use form and the only two things that we need to update here are the title and the description now the description remember we don't initially create that's just empty it's nullable but the title needs to come from somewhere we know that exists
02:50
within this upload object so let's go ahead and define out this is a variable and then we can just reference props upload and title directly from there so we should now see that value directly inside of our input once we hook this up with our model so we'll just say form title okay we should be good let's go over and just try this out again so I'm going to go ahead and choose a file here
03:12
and there we go we have got our actual input with the title inside of there so this isn't looking great at the moment and yeah the type needs to be text that's probably why that looked a bit odd and let's just try this again with an upload and there we go got something that looks a little bit better, okay so now that we've done that let's just copy this down to another input here and
03:35
this is going to be a text area so let's call this text area we don't have a component for this just yet we'll create that out and this will hook up to the description okay so let's change over this to description of course change the value here as well and change the id not the type because we're not going to need that for a text area okay let's go and create this text area component out
04:00
I always do this when I'm working within breeze because it doesn't exist by default I just grab the text input here go over to our component section create out a text area component paste in and just swap this over to a text area most of the functionality is exactly the same so that is just going to look like a text area now okay so now that we've done that let's make sure we pull
04:21
that text area in and we should have a description there as well great okay so this is looking a little bit odd at the moment so for our form which is our second component here next to what we have on the left we're going to go ahead and add a flex grow on this and while we're here let's add a space y of six just to separate out our inputs just here great so again we're going to ignore the left and
04:46
all we need to do now is just put in a button so again we can grab in a primary button so let's pull this down to here and let's just say save we'll keep in the opacity here for when this is processing and we'll disable it when it's processing as well but we can get rid of this ms4 class so let's go and make sure we pull the primary button in and there we go we're good so let's go
05:11
and just focus on sending this request down now so when we click save we want the details to update for that particular record so we need a controller for this so let's go ahead and create out a controller and let's call this video update controller and again just go ahead and register that in here next to this one so let's say videos then the video we're just going to use the id here
05:37
but you can change this over later and we're going to send a patch request down to our video update controller and we'll call this videos update so in the update controller let's just go and create out our invoke in here and let's go and just return back for now and just not do anything just yet okay so now we can hook up this form so when it gets submitted we post that form down so we're
06:02
going to go and say v on submit prevent and we're going to say form we are going to patch this through to the videos update we need the video id within our root helper here if you're building this up manually you don't need to do that you can just pass it in but here we're just going to say let's just check what this is is upload id so let's just say upload id and we should be good let's just see
06:31
what this looks like so let's go and choose a file let's go over to our network hit save and yeah there we go that gets posted down and of course we can use that to actually update the details now you'll notice that when we did save that jumps to the top of the page if you've used inertia before what you'll know is that you can say preserve scroll and set that to true but really
06:55
importantly here we also want to preserve the state of the page so we're going to say preserve state true that's going to be really important when we start our upload process we don't want anything to change about this page while stuff is uploading so we're kind of treating this like an axios request that we're just sending down and not updating anything else on the page so we want to
07:16
make sure we use preserve state there so that's going to work in exactly the same way we just don't scroll the state of the page eg our uploads will be kept and there we go now we can just fill in our video update controller to actually update this so let's bring in our request in here let's bring in the video that we are actually updating we'll go ahead and validate so let's say this
07:38
validate and again we'll just keep this super basic but you can change it over so the title is required and we'll set the description in here to have a max of let's say a thousand and of course you can change that then we just want to update the video details so video update and from the request we're just gonna pass in the title and the description and that should be it then we return
08:05
back and they'll be updated so let's go over and just try this out so let's go and update this to a new title and a description let's hit save and that should be updated so if we head over to the database there we go successfully updated the meta data for that so let's bring in our input errors because we need to see them that's going to be form errors title and form errors and description
08:33
and if we get rid of the title we should see that in there we don't so let's just have a look here probably didn't pull that in and let's get rid of that and there we go great so we've got our validation errors now the last thing i want to do just before we go is show a little message just so we can see that this has been updated so to do that it's actually very straightforward
08:55
next to our primary button so we're going to wrap this within a div and set a class of flex item center and a space x of say three we can have a little message in here saying that the video has been updated so let's just check this out that's what it looks like let's go ahead and set a text small on that and that's what we want to see so there's a really helpful method or property
09:21
within our forms within inertia which is was recently successful so we can show this if that was the case so let's say form was and it might just be recent yeah recently successful then we show that so when i hit save now obviously we get errors back that's not successful i'm going to say a title a description i'm going to hit save that it was recently successful but then it disappears
09:46
because there's a timeout on this so at least now we've got something that shows that these are being updated so if we head over sure enough these are updated that is pretty much updating our items in this list finally let's just try this with a bunch of files just to see how this behaves so i'm going to go ahead and select all of these and you can see we've got them all in the list now
10:07
let's go ahead and say a title a description just to make sure it doesn't affect anything else on the page which you shouldn't that one's been updated of course the rest are unaffected so there we go i'm going to go ahead and clear everything out of the database here just so we can start fresh and let's go on to look at actually uploading these files

Episode summary

In this episode, we focus on letting users update the title and description for each upload—basically setting up an editing form for every video that’s about to be uploaded. We start by building out the form interface right next to where we’ll show the upload progress, splitting the UI into two columns for clarity.

We make use of Laravel Breeze’s existing input components to speed things along, and create a custom textarea component for the description since Breeze doesn’t come with one out of the box. Inputs are wired up to a useForm instance from Inertia to keep everything reactive and easy to manage, and we make sure to pull in any validation errors nicely so users see instant feedback when there’s a problem with what they type.

Saving these details is done with an Inertia PATCH request, and we make sure the page state is preserved so nothing jumps around while you’re editing upload details. The episode also covers adding a confirmation message that pops up when the update is successful and then disappears after a couple of seconds (using the recentlySuccessful helper).

We finish up by testing everything with multiple uploads to make sure the update process works nicely and doesn’t interfere with uploading or the rest of the UI. The actual file upload process comes next, but now we’ve got a solid, user-friendly way to update video details in place!

Episode discussion

No comments, yet. Be the first!