Purchase access to watch this video.

Unlock course for £159

Already purchased access? Login

Uploading videos

  1. We're now ready to upload files to Mux. The Mux documentation is great
  2. that it covers topics like this in depth
  3. and also includes a lot of helpful code snippets.
  4. If we go to the Mux docs on "Upload files directly", we'll see that the
  5. first step is to create an authenticated Mux URL.
  6. If we click the "php" tab, we'll see that there are various classes and methods
  7. we can use, but to use these we need to install the Mux PHP SDK.
  8. In your terminal, install the Mux SDK using Composer.
  9. Remember to prepend the command with "sail".
  10. Now, we could just instantiate these classes each and every time we need them,
  11. but a better approach is to use Laravel's fantastic service container to bind
  12. them to that.
  13. To do this, we'll need a service provider.
  14. Create a Mux service provider class.
  15. Again, remember to use "sail" instead of "php".
  16. [typing]
  17. And add the new service provider to the "providers" array in your config.php
  18. file.
  19. [typing]
  20. First, let's bind an instance of Mux configuration class to the container.
  21. Let's grab this.
  22. [typing]
  23. And we'll create a new singleton binding.
  24. [typing]
  25. Update these, to reference configuration variables.
  26. [typing]
  27. Now, let's bind an instance of the direct uploads API class to the container.
  28. Copy this.
  29. [typing]
  30. And create a new singleton binding for that.
  31. [typing]
  32. When instantiate in the direct uploads API, we can resolve the configuration
  33. from the container as well.
  34. Now, any time we need an instance of the direct uploads API class, we can
  35. resolve it via the service container, which will in a turn properly configure
  36. with the SDK.
  37. Before we actually start uploading files to Mux, we want to store a
  38. representation of them in our own application.
  39. So we're going to create our very first model, a Video model.
  40. Create the model via the command line.
  41. [typing]
  42. Now, we can specify the "-f" and the "-m" flags to create a factory and
  43. migration respectively.
  44. [typing]
  45. Open the migration.
  46. [typing]
  47. And let's define its columns.
  48. [typing]
  49. We want a name for our videos.
  50. [typing]
  51. We want a description for our videos.
  52. [typing]
  53. We also want to store the duration of the video.
  54. [typing]
  55. And let's add a couple of status columns.
  56. [typing]
  57. One for upload status.
  58. [typing]
  59. And one for the Mux status.
  60. [typing]
  61. Finally, add two columns to hold the Mux asset ID
  62. [typing]
  63. and the Mux playback ID.
  64. [typing]
  65. Let's now define which columns should be fillable in our Video model.
  66. [typing]
  67. I personally like to explicitly define which columns can be filled rather than
  68. blindly unguarding all columns.
  69. [typing]
  70. And finally, let's flesh out the factory we generated so we can quickly create
  71. video models and tests.
  72. [typing]
  73. Now that we have our Mux key set up and a model representing videos, we can
  74. get back to actually working on uploads.
  75. [typing]
  76. Back in the Mux docs, if we jump to the "Handling large file" section,
  77. as we may be uploading long-form video such as episodes or movies,
  78. we see that Mux has its own JavaScript library for dealing with large uploads
  79. called UpChunk.
  80. So the first step is to install the UpChunk module.
  81. [typing]
  82. Copy this.
  83. [typing]
  84. Paste in your terminal, and we want to save it to our devDependencies.
  85. [typing]
  86. Next, we can copy this block, and paste into our resources/js/app.js file.
  87. This will then be built by Laravel's Vite-based asset bundler.
  88. [typing]
  89. We need a route and a view to show the upload form.
  90. Create a new video controller using Artisan.
  91. [typing]
  92. We're going to place it in "Admin" namespace since this is for administrators
  93. only,
  94. and it will also separate from any controllers that will create that's
  95. concerned with the front-end of the website.
  96. [typing]
  97. Next, register a resource route in your web/routes.php file.
  98. [typing]
  99. We'll place it in a route group with the "auth" middleware applied,
  100. and we'll also set the "prefix" to "admin".
  101. This will prefix any URLs generated for the controller.
  102. Next, open your dashboard view, copy its contents,
  103. create a new file called admin/videos/create.blade.php
  104. and paste the contents.
  105. Replace the text with a form tag, and inside the form tag,
  106. create an input with type "file".
  107. We also need to give it a name
  108. and an "id" of "picker", as that's what our JavaScript is expecting.
  109. In your video controller, return this view from the "create" action.
  110. [typing]
  111. We should now see a file input if we go to admin/videos/create in the browser.
  112. We're not quite done yet.
  113. If we go to the snippet we copied earlier, we'll see it makes a request through
  114. this "/the-backend-endpoint" URL.
  115. We need to create another route that will both create a Video model instance and
  116. return the upload URL to this script.
  117. Create a new resource controller called "UploadUrlController".
  118. [typing]
  119. Open this up and remove all methods except the "store" method.
  120. [typing]
  121. In your routes file, register this resource controller.
  122. Then we can use the "only" method to say that this resource controller only has a
  123. "store" method.
  124. Inside the "store" method, let's create a new video.
  125. Let's also inject an instance of the direct uploads API that we registered in
  126. container.
  127. We can tweak the example from the Mux docs.
  128. [typing]
  129. I've tidied up to code, and we can also specify a "passthrough" parameter.
  130. This is an arbitrary string that we can send with requests, and it'll be passed
  131. back to us in webhook events related to this upload.
  132. Here, we're just passing the ID of the newly-created video so that in any
  133. webhook event sent to us, we'll know which video it relates to.
  134. We can also specify "test" to be "true".
  135. This will only upload videos with a maximum of 10 seconds in duration, and will
  136. also be deleted after 24 hours so that we're not charged by Mux for storing in
  137. these.
  138. When you go into production, you'll need to set "test" to "false".
  139. Back in our app.js file, we can update this example that we copied from the
  140. Mux docs.
  141. First, I'm going to change it to an event listener.
  142. I'm going to update the events.
  143. [typing]
  144. I'm going to update this "getUploadUrl" function to use Axios instead of fetch.
  145. [typing]
  146. If we head back in the browser and refresh, we should now see that when we pick
  147. a video,
  148. messages appear in the console with the progress, and when the upload completes.
  149. In the next video, we'll make this page more dynamic by converting it to an
  150. Alpine component, ensuring the progress bar alerts when the upload either
  151. errors or completes.
Connect GitHub