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!