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
14. Privately broadcasting

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 we're going to go ahead and create out an encode video job which we are then going to
00:05
dispatch and that will be responsible for firing an event to tell our client side that the encoding process has started. We're not going to look at actually encoding the video just yet, we're going to focus on something really important which is broadcasting all of this stuff to a private channel. So we don't really want this public so anyone can listen into it, we want these to be
00:26
private for that specific user. Now if you've not worked with broadcasting before, if you head over to your routes and you go over to channels, this contains already for you a private user channel which we can take advantage of. You can create another channel with a specific name for encoding events for that user, but most of the time you can just broadcast on this user's channel. Now
00:50
this kind of works similar to what we saw earlier when we created a video policy where it's just checking if the id that we give into this broadcast channel equals the user that's currently authenticated. So that is the channel that we are going to be using. So let's go and just create out a useful event here or a useful job. We're going to make a new job in here called
01:11
encode video and that will be fired once the video has been fully uploaded. So that is in our video file store controller and we can do that just after here. So we can say encode video and we can dispatch this and then we can pass any data down to it that we need. So what do we need to encode a video? Well we just need the video model really that we're that we're updating and giving
01:38
the video path for. So if we head over to encode video, let's accept that video into here directly so we can do it and then down here and within a job we have a handle method. So this is where we're going to encode the video but the first thing we want to do is broadcast that encoding has started so we can swap over the state within each of our uploads. So we're going to create out
01:59
an event in here. So let's make out an event and let's call this encode video start. Okay great. So let's go and do event new encode video start. Now at this point we need to know which video has started encoding so we do need to pass something into this event and that's just going to be the video. So let's roll over this one more time just really quickly before we continue. Once our video
02:28
has been uploaded we create a job which we can add to our queue. We'll get to that a little bit later. Then inside of this job before we go ahead and encode the video we're going to tell our front end that encoding has started. So over in code video start we need to make sure that this broadcasts so we're going to go ahead and implement should broadcast but we're going to use should broadcast
02:48
now because we don't want these to be put onto our queue and then down here we can accept the video in. So let's go ahead and accept that video into here. We want to broadcast this on a private channel and that private channel is the one that we just looked at in our root. Now it's a little bit fiddly to use the names that have already been given for this like app.models.user so I'm
03:10
just going to call this users.id and then it's a little bit more easy to reference. So the channel name the private channel that we are broadcasting on is going to be users. and then the user's id. So this comes directly from the video so we can just say this video user id. I don't think we have a relationship here just yet so let's set that up really quickly. So this belongs to a user
03:36
so we can just very easily say this belongs to and user and then we'll be able to access that information. Okay so we are broadcasting on a private channel which we'll look at how to pick up in a moment but inside of here we want to choose the data that we're actually sending down with this by default the whole video the json encoded video will be sent down as an object. What we want to do
04:00
is go ahead and add in the broadcasts with or broadcast with method and that will allow us to customize what data actually gets broadcast. So really all we need is just the video id. We don't need to send down any other information about this video when we're telling the client side that the encoding has started. Okay again let's run over this really quickly so we know that we throw this
04:26
event to let our client know that's now going to be broadcast on a private channel which we'll have to specifically pick up on and it's just broadcasting the video id. We don't want to broadcast the whole public video model. Okay so if we go over to the client side now this isn't going to work. Now I'm going to keep open my network tab here because we're going to see a slight change when we swap over
04:49
to a private channel and to do this we say echo dot private and then we choose the name of the channel and that's going to be users and then the user's name. Now how do we get the user's id in here? Well let's go up and make sure we're using use page in here and let's go ahead and now we can make this one string so let's use back ticks here for interpolation and let's go ahead and say use
05:13
page props auth user id and if you're new to inertia if we head over to handle inertia requests that's just this data here which is being sent down to a prop to every single component. So we're now listening on that private user's channel when we invoke this private method on varvel echo it's going to go ahead and look at our channels list it's going to see if we're allowed based on that
05:40
id and the currently authenticated user's id whether we're allowed to connect and then we can just broadcast on that channel. So the event now is going to be different so that's encode video start and then we're going to get the payload through in here which we'll just log out. Okay so if we've done everything correctly we should now be connected to that private channel and we should
06:01
see this data roll in so let's head over to our console and have a look and see if this works. So let's go ahead and choose any video we're going to wait for it to upload that job is then dispatched it's not being put onto our queue just yet but now we get that event roll in so now it's at the point where we can take this look the video up and set the status of this video to be encoding
06:23
nothing is happening at the moment but we're using these events to control the state of what's happening on our back end. Okay so let's go ahead and finally fill in the ability to change over the state of our upload and we're going to do that in the place where we pushed all of this data. So we're going to say encoding and we're going to set this to false so by default encoding will be
06:44
false but then what we can do is up here we can grab the video by its id so in here we can say get video by id and we can say e video id and then we can set encoding to true and there we go. Now a really important part about this is we might not be able to demonstrate it but if for example you are on this page and your back end is broadcasting events this is always
07:12
going to be broadcast it's not like something that we're doing within the code directly within this component so these broadcasts will always happen regardless of whether we actually have this video on the page or not so what I'm actually going to do is swap this over and I'm going to create a variable called upload here and then I'm going to do a little check in here just to check
07:31
if this upload is actually defined and if it's not I'm going to do an early return in here so we'll just check if we don't have an upload and if we do we can just set the upload encoding to true so it's just a little check here to make sure that we have that data on the client side when we get this event through. Okay so now that we've got encoding set to true we're going to go over to
07:53
our upload item and just here maybe above this we're going to create out a new progress bar at the moment we don't know what the progress is because we're not firing that progress but I'm just going to set a temporary width to 50% I'm going to change this over to green so we can see the difference between uploading and encoding change the text over here and then we want to
08:17
show this if we are encoding which is that value we're now changing based on the event we get through to our back end all right let's go over this and just see if it works and then we'll run through it just in case anything didn't make sense okay so I'm going to go ahead and upload a video and what we should now see is once this finishes we should switch to that encoding state and we
08:36
don't great so let's go ahead and try this out okay so get video by the id isn't defined that's pretty obvious it's just because we are doing this well get upload by id did we yeah we just called the wrong method okay so that should be good one more time and it should be good so let's go and upload a video once that is finished we should switch to encoding great so that event is
08:59
being fired to tell our front end that encoding has started because remember there can be a slight delay here and then we have encoding okay so let's run over this really really quickly just in case anything didn't make any sense and then we can move on to actually encode the video okay so we will start out at our video fast or controller where we dispatch this job now the job's purpose
09:21
is to encode the video but just before we do that we're going to tell the client side that the encoding has started with this event which we've already seen so this event takes in the video because we need that information now and that broadcasts just the video id on a private channel just for that user so no one else can connect to this channel unless it's the authenticated user
09:44
kind of like what we did with our authorization earlier now when this does get broadcast we're picking this up on the client side by using the private method this time plucking out the private channel that we want to listen on finding that event or listening to that event and then changing around the status of the encoding to true now obviously by default the encoding process is
10:06
going to be zero but in the next episode what we're going to do is actually look at encoding the video really encoding the video on the back end and then forwarding off the progress to the client side pretty much using the same method that we've used here let's jump over and encode this video and show the progress on the client side
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!

Episode discussion

No comments, yet. Be the first!