Converting the video uploader to an Alpine component
-
–
We left off with the video uploads working but not really given as much -
–
feedback. -
–
In fact it will get any feedback in the user interface. -
–
We've got to fix up by converting the uploader to an Alpine component. -
–
Open your app.js file and let's create a new Alpine component. -
–
Inside the component we're going to store two pieces of information. -
–
The component's current status and the percentage of any in-progress upload. -
–
Now let's copy the contents of this vanilla addEventListener into a -
–
onChange method in the component. -
–
At the top of the callback we're going to declare our first status change -
–
from the default of "ready" to "progressing". -
–
Next update the error callback to change its status to "errored" -
–
and the success callback to change its status to "complete". -
–
Finally let's update the progress callback. -
–
And we'll set the "percentUploaded" value. -
–
Back in our create video view, we can all make use of this component. -
–
Add an "x-data" attribute or the div that contains the form. -
–
We'll need to give it the name of the component we've just created. -
–
Which is "uploadVideo". -
–
Now on the form tag itself let's condition render it by adding "x-show" -
–
and we'll render it if the "status" equals "ready". -
–
On the input we should call the onChange function when its value changes. -
–
So to do that we add "x-on:change" and we reference our onChange function. -
–
So the form now shows when the status is ready or what about other statuses? -
–
If we pick a file, the screen goes blank. -
–
We need add views for the other statuses: "progressing", "errored", and "complete". -
–
Let's start with the "progressing" status. -
–
For this we've going to show a progress bar showing the upload progress of the -
–
current file. -
–
This will just be two divs. The progress bar container and the bar itself -
–
changes width depending on what percentage of the file has been uploaded. -
–
Next let's add views for the "errored" status and the "complete" status. -
–
These can just be simple paragraph tags showing the appropriate message. -
–
If we try uploading the file now, we should see a progress bar when the file is -
–
uploading -
–
and a success message once the upload is completed. -
–
When an upload finishes or errors we see a message, but the component is in a -
–
terminal state with no options. -
–
Let's add a reset button to allow the user to reset the component and see the -
–
file input again to pick another file. -
–
Inside the paragraph tags for the error and success messages, add a link. -
–
Instead of it going to a URL we will instead add a click handler that calls a -
–
"reset" method on the component. -
–
In our app.js file let's add that "reset" method. -
–
We will simply change the "status" back to the default of "ready". -
–
If we test this in the browser we should now be able to pick a file, see the -
–
progress as the file is uploading -
–
and reset the form once the upload finishes. -
–
And there we have it. Our upload page is in a little nicer and our data is -
–
dependent on its state.