Build a Webcam and Screen Sharing Site With Inertia
This episode is for members only

Sign up to access "Build a Webcam and Screen Sharing Site With Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
08. Attaching everything to a form

Episodes

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

Transcript

00:00
OK, so the goal of this episode is to, once we see our video preview, have an overall form that we can attach the video, the title and the description to, hit save and send this through to our back end.
00:11
And then we'll look at processing the video, storing this in the database in the next couple of episodes. OK, so we've got our div out here. I'm going to change this over to a form because this whole thing is a form.
00:22
We want the video at the top, but then we want the title here and we want the description here and then we want a button just below that. So let's just scaffold this out really roughly. Unfortunately, with the URL and having this state show,
00:38
we can't really toggle this very easily unless we have a recording and we want to see the video preview at the same time. So it's a little bit annoying and that will delay us, but it's fine. So we're going to set a space on the Y axis here to six just to space out the
00:51
video from the title description and the button. And let's just have a look at this just to make sure everything's spaced out properly and we'll be good to go. OK, so start recording, stop recording and there will be our form.
01:04
Great. So for our title description button, we can pretty much steal these from something like the login page that's already in here. They're just the components that we have already seen inside of our Breeze starter kit.
01:16
So I'm actually just going to grab the entire section here from the email address from when we log in. I'm going to paste it in, tidy up a little bit and then we can just duplicate these down.
01:27
So let's go ahead and just re-indent everything we've got here. We've got an input label. We've got a text input. I'm going to bring each of these things up just to make it a little bit easier
01:37
to see what we're doing and we can get rid of a lot of these attributes as well. So let's pull this up. Just make sure that's all good. We could set this to required because it is a required field,
01:48
but I'm not going to do that on the client side just so we can test our validation and I'm going to get rid of these things as well. We don't have a form yet, but we will be creating one in just a second once we've got this all added.
02:00
And that's pretty much it. So let's just start to change these over. So we've got a title here. Let's change that to title.
02:08
We've got a ID of title, type of text, and we've got that hooked up to form title, which we'll create in a second. Same with the errors as well. All these components will just show out like the errors that we have in the form
02:21
and you can dive into them as well if you want to have a look. So let's import each of these. So we'll import these with my editor. But obviously, if you haven't done that,
02:32
you want to go up and pull them in manually. Let's go back down to our form and let's just duplicate this down for the description. So let's create a description out here and change over each of these
02:47
to description, change this to description and ID. Yeah, we should be good. OK, so for the button, again, we can come over to our login page and just look for the primary button.
02:59
Go ahead and pull that in. And we should be good. So let's pull this in and we'll say save video or just save whatever you want to say. Now for the class here, this sets an opacity when this form is
03:11
processing, which we don't have at the moment, but we'll be setting up in a second. I'm just going to get rid of the margin here because we don't need that in there. OK, so now that we have got all of the elements on the page, let's create our form, because if we preview this in the browser, it's going to break.
03:25
So I'm going to create that just underneath here. And to do that with an inertia, we use the use form composable. We set all of the things in here that we want to send down. So we want to send the title down, which by default is going to be an empty string.
03:39
We want to send the description down. Again, that's going to be an empty string. And we want to send the video down as well, which is going to be that blob data so we can pick this up as an uploaded file.
03:49
We're going to have to do a little bit of tweaking to actually get this video into this form in a correct file upload format. We'll do that in a second, but that should be good. So we shouldn't see any errors now.
04:01
OK, let's capture our screen, check it out and get this form showing. So let's start recording. Stop. And there we go. We've got a title, a description and a button to save this video out.
04:13
So I'm going to go ahead and do the same thing as I did with the state. And I'm going to dump the form at the top just so we can see what data we have inside of our form. At the moment, it's just going to be the default values.
04:23
So let's dump the form inside of the actual form itself. So let's look for that form and let's just dump the form that we're using inside of here. So at the moment, that's just going to have an empty title, an empty description and a null video.
04:40
Now, in this episode, we're going to focus on getting the video into here. This is really important. We need this video in a format that is actually usable to send down as an uploaded file. If you think about uploading normally, we choose a file, we attach it to our form.
04:55
That is technically a file object, which can then be interpreted properly in the back end. Now, at the moment, we can't just send down a blob. We can't send down a blob URL because they're specifically stored within the browser.
05:07
So again, what we're going to do is we're going to watch for that blob changing and we're going to set this as a custom file that we build up. So let's go ahead and create another watcher down here to do this. So we want to watch that blob and we'll get that blob back in here.
05:24
Now, what we can't do is something like form dot video and assign that to blob. That's not going to work. This won't be interpreted when we send it down to our back end and we submit this form as a uploaded file or a file.
05:38
So what we want to do is set the form video to a new file. So that is now going to be an actual file that looks like it's been uploaded by a user. And then into here, we pass an array of all of the data that is part of this file.
05:52
Now, that's just going to be our blob. So we just pass the blob in here. Now we need to give it as the second argument a file name. It doesn't matter what we call this
06:00
because we're going to be choosing custom file names on the back end. What could we need generating our UUID for each of these? So I'm just going to call this video MP4. And then again, similar to when we built our blob up, we need to choose the type
06:12
of file that we're sending down so we can validate this properly on the back end. So, again, that's just going to be video and MP4. OK, so now that we've done that, we should now have a what looks like a file inside of our form that when we submit this form with inertia, it's going to look
06:28
like a file that's been uploaded. So, again, I'm going to go through the whole process of just recording. Let's hit start. And there we go.
06:36
So now we have a file in there. When we submit this down to our back end, we can actually pick this up as an uploaded file class in Laravel. And then we can move this to our file storage really conveniently.
06:50
So that is pretty much pulling together our form. Of course, all of this stuff is hooked up now. So we're ready to send this down. Let's go over to the next episode.
07:00
And just before we send this data down, let's look at generating out a title and a description, a default title and a description, and we'll also move over this description to be a text area component as well.

Episode summary

In this episode, we're focusing on taking all the pieces from our video recording feature — the video itself, as well as its title and description — and attaching them to a proper form. The goal is to let you preview your recorded video, enter a title and description, and then save everything by submitting the form, sending all the data to the backend for storage.

We start by replacing our existing DIV container with an actual form element, organizing it so the video preview sits at the top with fields for the title and description underneath, and finally a save button at the bottom. We're borrowing components for the input fields and button from our login page to speed things up, just renaming and reusing them for our needs here.

You'll see how we wire up the form using Inertia's useForm composable, initializing the state for title, description, and — importantly — the video itself. We talk about the trick with getting the video blob into the right format. Instead of just sending the blob, we convert it into a genuine File object (like what you'd get from an <input type="file">), so the backend can treat it as a regular file upload.

By the end, the form is all set up: it gathers the video, title, and description, and after a test run recording a video, you can see the file show up in the form data. The stage is set for the next step, where we'll generate default values for title and description, tweak the form a bit more, and then get ready to handle everything on the backend!

Episode discussion

No comments, yet. Be the first!