Purchase access to watch this video.

Unlock course for £159

Already purchased access? Login

Converting the video uploader to an Alpine component

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


Connect GitHub