Uploading videos
-
–
We're now ready to upload files to Mux. The Mux documentation is great -
–
that it covers topics like this in depth -
–
and also includes a lot of helpful code snippets. -
–
If we go to the Mux docs on "Upload files directly", we'll see that the -
–
first step is to create an authenticated Mux URL. -
–
If we click the "php" tab, we'll see that there are various classes and methods -
–
we can use, but to use these we need to install the Mux PHP SDK. -
–
In your terminal, install the Mux SDK using Composer. -
–
Remember to prepend the command with "sail". -
–
Now, we could just instantiate these classes each and every time we need them, -
–
but a better approach is to use Laravel's fantastic service container to bind -
–
them to that. -
–
To do this, we'll need a service provider. -
–
Create a Mux service provider class. -
–
Again, remember to use "sail" instead of "php". -
–
[typing] -
–
And add the new service provider to the "providers" array in your config.php -
–
file. -
–
[typing] -
–
First, let's bind an instance of Mux configuration class to the container. -
–
Let's grab this. -
–
[typing] -
–
And we'll create a new singleton binding. -
–
[typing] -
–
Update these, to reference configuration variables. -
–
[typing] -
–
Now, let's bind an instance of the direct uploads API class to the container. -
–
Copy this. -
–
[typing] -
–
And create a new singleton binding for that. -
–
[typing] -
–
When instantiate in the direct uploads API, we can resolve the configuration -
–
from the container as well. -
–
Now, any time we need an instance of the direct uploads API class, we can -
–
resolve it via the service container, which will in a turn properly configure -
–
with the SDK. -
–
Before we actually start uploading files to Mux, we want to store a -
–
representation of them in our own application. -
–
So we're going to create our very first model, a Video model. -
–
Create the model via the command line. -
–
[typing] -
–
Now, we can specify the "-f" and the "-m" flags to create a factory and -
–
migration respectively. -
–
[typing] -
–
Open the migration. -
–
[typing] -
–
And let's define its columns. -
–
[typing] -
–
We want a name for our videos. -
–
[typing] -
–
We want a description for our videos. -
–
[typing] -
–
We also want to store the duration of the video. -
–
[typing] -
–
And let's add a couple of status columns. -
–
[typing] -
–
One for upload status. -
–
[typing] -
–
And one for the Mux status. -
–
[typing] -
–
Finally, add two columns to hold the Mux asset ID -
–
[typing] -
–
and the Mux playback ID. -
–
[typing] -
–
Let's now define which columns should be fillable in our Video model. -
–
[typing] -
–
I personally like to explicitly define which columns can be filled rather than -
–
blindly unguarding all columns. -
–
[typing] -
–
And finally, let's flesh out the factory we generated so we can quickly create -
–
video models and tests. -
–
[typing] -
–
Now that we have our Mux key set up and a model representing videos, we can -
–
get back to actually working on uploads. -
–
[typing] -
–
Back in the Mux docs, if we jump to the "Handling large file" section, -
–
as we may be uploading long-form video such as episodes or movies, -
–
we see that Mux has its own JavaScript library for dealing with large uploads -
–
called UpChunk. -
–
So the first step is to install the UpChunk module. -
–
[typing] -
–
Copy this. -
–
[typing] -
–
Paste in your terminal, and we want to save it to our devDependencies. -
–
[typing] -
–
Next, we can copy this block, and paste into our resources/js/app.js file. -
–
This will then be built by Laravel's Vite-based asset bundler. -
–
[typing] -
–
We need a route and a view to show the upload form. -
–
Create a new video controller using Artisan. -
–
[typing] -
–
We're going to place it in "Admin" namespace since this is for administrators -
–
only, -
–
and it will also separate from any controllers that will create that's -
–
concerned with the front-end of the website. -
–
[typing] -
–
Next, register a resource route in your web/routes.php file. -
–
[typing] -
–
We'll place it in a route group with the "auth" middleware applied, -
–
and we'll also set the "prefix" to "admin". -
–
This will prefix any URLs generated for the controller. -
–
Next, open your dashboard view, copy its contents, -
–
create a new file called admin/videos/create.blade.php -
–
and paste the contents. -
–
Replace the text with a form tag, and inside the form tag, -
–
create an input with type "file". -
–
We also need to give it a name -
–
and an "id" of "picker", as that's what our JavaScript is expecting. -
–
In your video controller, return this view from the "create" action. -
–
[typing] -
–
We should now see a file input if we go to admin/videos/create in the browser. -
–
We're not quite done yet. -
–
If we go to the snippet we copied earlier, we'll see it makes a request through -
–
this "/the-backend-endpoint" URL. -
–
We need to create another route that will both create a Video model instance and -
–
return the upload URL to this script. -
–
Create a new resource controller called "UploadUrlController". -
–
[typing] -
–
Open this up and remove all methods except the "store" method. -
–
[typing] -
–
In your routes file, register this resource controller. -
–
Then we can use the "only" method to say that this resource controller only has a -
–
"store" method. -
–
Inside the "store" method, let's create a new video. -
–
Let's also inject an instance of the direct uploads API that we registered in -
–
container. -
–
We can tweak the example from the Mux docs. -
–
[typing] -
–
I've tidied up to code, and we can also specify a "passthrough" parameter. -
–
This is an arbitrary string that we can send with requests, and it'll be passed -
–
back to us in webhook events related to this upload. -
–
Here, we're just passing the ID of the newly-created video so that in any -
–
webhook event sent to us, we'll know which video it relates to. -
–
We can also specify "test" to be "true". -
–
This will only upload videos with a maximum of 10 seconds in duration, and will -
–
also be deleted after 24 hours so that we're not charged by Mux for storing in -
–
these. -
–
When you go into production, you'll need to set "test" to "false". -
–
Back in our app.js file, we can update this example that we copied from the -
–
Mux docs. -
–
First, I'm going to change it to an event listener. -
–
I'm going to update the events. -
–
[typing] -
–
I'm going to update this "getUploadUrl" function to use Axios instead of fetch. -
–
[typing] -
–
If we head back in the browser and refresh, we should now see that when we pick -
–
a video, -
–
messages appear in the console with the progress, and when the upload completes. -
–
In the next video, we'll make this page more dynamic by converting it to an -
–
Alpine component, ensuring the progress bar alerts when the upload either -
–
errors or completes.