Chunking Large Uploads in Inertia
This episode is for members only

Sign up to access "Chunking Large Uploads in Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
03. Setting up state and selecting a file

Episodes

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

Transcript

00:00
Okay, let's go ahead and set up our form, so when we click on the upload button, we actually grab the file out of the form field.
00:07
There's a few ways that we can do this, but what we're gonna be dealing with in this course is an overall state of everything that is happening with this upload. So what we're gonna do is when we submit this form,
00:19
we're gonna use a ref to grab the file out of this input. So let's go up to the top and just talk about the state just for a moment. So we're gonna go ahead and import the reactive functionality from view. And just down here, we're gonna go ahead and
00:34
create our state within a reactive object. So inside of here, we're gonna be storing the uploader itself. We're gonna be storing the file itself. And then within this, we can create stuff like computed properties to grab out
00:47
the progress and format that. So in here, we're gonna have a file that we choose. This is the file that's gonna come from this form. So if we come down here, I'm gonna go ahead and take this container,
00:59
copy it down here, and we can just get rid of everything in here. And this is where our form is gonna go. In fact, we can change this over to a form. Okay, so let's go ahead and space things out a little bit on the y-axis by,
01:12
say, six, or let's do three, and there we go. So that's where our form is gonna sit. Okay, so inside of here, let's create out our file section, and we'll set a flex box on this with item center, so
01:24
we can have these two things sit next to each other. And of course, we're gonna output an input type of file. So the name for this, we'll just keep it as file, and the ID doesn't really matter.
01:35
But we're gonna assign this a ref of file, which we can pick up within our script section. I'll show you how to do that. So let's go ahead and create a class of flex grow on here, so
01:44
that takes the full width. And then just underneath here, let's use one of the primary button components that already comes with this starter here, and this will be to upload this file. So we should have something that looks like we saw in the introduction.
01:59
Okay, so when we select this file, there's a couple of ways that we can do this, like I said. One way is to do a V on change event handler. And then with that, what we could actually do is go ahead and say state and
02:11
file, and we could set that to what we get back in here based on the event. But it's a little bit easier to use a ref here, and then just pick this value up. So we've already assigned this a ref of file.
02:23
If we go up to the top here to use a ref within the composition API with script setup, we pull in our ref here. And then we just come down here, create out a file variable. We need this the same name as the ref that we've given.
02:36
And then we just use a ref with an empty value. So now, when we submit this form, this will contain that HTML element, and then we can extract the file out of that. The first thing that we're going to do is go ahead and create out a submit method,
02:50
which is going to, of course, be invoked when we submit this form. So let's just console log out in here and say submit, just so we know that this is all working. And let's head down to our form and attach a event handler to this.
03:03
So V on submit will prevent the default behavior and will just invoke submit. So if we head over now, open up our console, and just go ahead and choose a file, and hit upload, there we go, that's working nicely. Okay, so to grab this, this ref that we've created now contains that file.
03:24
So this will now be that file. So again, if we just go over and choose something here, that's going to contain, well, the value of it at least is going to contain that input, which you can see here. So now from this, we can extract out that file and then set it into our state.
03:42
So we're just going to say file value. Now we need value because this is a ref. So when we access this within our script section, we need to use .value to actually grab the value out.
03:51
And then that input will have a files array. And we just want to grab the first one. We're just dealing with one file upload here. Now down here, we're going to go ahead and start the upload process.
04:04
But in between that, we're not looking at validation, but we at least want to make sure that a file has been chosen. So if we say if the file state is empty, so if this doesn't contain anything, then we're just going to do an early return and
04:17
not get down to the point where we start uploading. So now we should be able to click Upload, nothing happens. But when we do choose a file and hit Upload, we want to go ahead and start the upload.
04:29
And of course, the uploaded file that we're pushing through is going to be what's contained within our state now. So now that we've got this working, we're going to dive straight into chunking this and sending it through to our back end in the next episode.

Episode summary

In this episode, we get the basics of our upload form set up. First, we talk about how we want to track everything that's happening during an upload using a state object, so we import Vue's reactive and ref features. The main idea is to store the selected file in our state and set things up to track progress and future upload details as well.

We then create the form itself, with an input of type file and a nice upload button. We use Vue refs to grab the actual HTML input field for the file and discuss why using a ref is more straightforward in this context compared to handling change events.

Hooking up the form, we listen for the submit event, prevent the default form behavior, and make sure to extract the selected file properly—from the .files array on the input element. We add a quick check to make sure the user has actually selected a file before we proceed, and display a console message confirming submission is hooked up correctly.

By the end, our app can grab the file from the form and save it to our state, setting us up for the actual file upload process. Next time, we’ll get into splitting the file into chunks and sending those off to the backend!

Episode discussion

No comments, yet. Be the first!