Purchase access to watch this video.

Unlock course for £159

Already purchased access? Login

Converting the video uploader to an Alpine component

Connect GitHub

Transcript was automatically generated and may be inaccurate.

  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.

Resources