Multiple Drag And Drop File Uploading and Processing with Inertia
This episode is for members only

Sign up to access "Multiple Drag And Drop File Uploading and Processing with Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
16. Broadcasting the encoding progress

Episodes

0%
Your progress
  • Total: 1h 56m
  • Played: 0m
  • Remaining: 1h 56m
Join or sign in to track your progress

Transcript

00:00
Okay, so what we really need to do now is figure out how to get the progress of our encoding and then just broadcast this to the client. So let's first of all look at how we grab the process and then the rest of this we've pretty much already done.
00:12
So we're going to head over to our encode video job and if we come down to the actual FFmpeg encoding, what we can do in here is just before we save this, we can use an on progress event handler in here to as you'd imagine grab the process.
00:28
So we have a closure in here which gives us the percentage as that progresses and then in here we can just broadcast that. So let's create an event to broadcast the encode video progress. So I'm just going to cancel off the worker here and we'll go ahead and make out an event
00:46
and let's call this encode video progress and let's go ahead and just immediately fire this event off in here. So encode video progress. Now what do we need to pass through to here?
01:01
Well we need to pass through the video itself so we know what we're targeting and then we need the percentage that comes from this closure and that's pretty much all we need. So over in encode video progress again we're going to implement should broadcast now
01:18
because we don't want this event to be put onto our queue. If we just double check our encode video start that should also be now as well. And let's go ahead and just accept in what we need in here. So we've got our video and then this comes through I think as a string.
01:34
So let's just go ahead and add in the percentage in here and again we'll make that public and let's put in our video here and then again what we can do is just from the encode video start take broadcast with put this directly into here. We want the video id but we also want the percentage as well.
01:58
So we'll pass that through with the object that we'll get on the client side. Okay so now down here the private channel is going to be exactly the same as what we already have. So let's just grab this paste this in here and we should be done. So now within this job which is being run in our queue so it's being run asynchronously
02:18
we're now firing an event off every time this percentage changes. So let's go over to our dashboard where we are listening for our events and we'll just listen in here to a new event. So that event is encode video progress and again we will get the payload in here
02:39
and we can pretty much do exactly the same thing. So let's just grab all of this code and paste it in. We could change this around so it's a little bit neater but I think this is fine and we don't want to change encoding.
02:50
We want to change the encoding process. So let's say progress in here and set that to e.percentage. Okay so encoding process let's go down and add this to our state for each of our uploads and that will go in there.
03:08
Obviously it will be zero to start with and now we can just come over to our upload item and do exactly the same thing as we did here with our upload progress but we can do it with our encoding process. So encoding progress and we should be good.
03:25
So as soon as that first event fires encoding will be true. So we will show this progress and then we'll bind in the progress that we're now firing through. So let's just try this out and then if it doesn't work we'll fix it up. Okay so let's just make sure first of all that we are running our QWorker
03:43
and we've got Sockety up and running so our web sockets should be coming through. Let's try this out. So we'll go ahead and choose a small video file here. That upload is finished.
03:52
Now it's encoding and as you can see as this is now being encoded in the back end within our queue that's firing off that progress. We're picking it up and we're updating that individual upload and you can see sure enough the percentage is being reflected on the client side.
04:08
So really nothing we haven't already touched. Let's just run through once again what we did just so we're clear. Okay so over in our encode video this gives us the percentage as FFmpeg is encoding this. We fire an event and that event takes the percentage in within the payload so we can
04:27
pick it up on the client side on that channel which we've already looked at and then over on the client side we just pick up that new event, find the upload that this relates to by the video id, update the progress and of course our child component gets updated with this value.
17 episodes•1 hr 56 mins

Overview

Build a multiple file chunked uploader in Inertia with the ability to pause, resume and cancel uploads. We’ll also be able to edit metadata (like the title and description) for each upload — even while they’re uploading and processing.

In the second half of the course, we’ll learn how to queue and process uploaded files on the backend (like encoding videos), and in realtime, report back to the client with progress updates using WebSockets.

It’s everything you need to know to upload and process large files in Inertia.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.