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
17. Clearing up after encoding

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 from here we've pretty much covered the entire process of uploading files, going ahead and broadcasting any kind of back-end jobs that are happening, so really it's up to you what you
00:11
do next depending on what you're building, but what I'm going to do is just finish off by doing a little bit of tidying up, deleting the original file that was uploaded and updating the original record that we have in the database with the new encoded video and also setting the encoded flag to true. So if you wanted to you could go ahead and add in another event to broadcast that the
00:32
encoding process had finished and I'll leave that up to you to do because we've pretty much covered all of that. Okay so let's go over to our encode video job and what we want to do is when this finished, so after saving is the event that we want in here, we want to do a couple of things. We want to delete the original upload and then we want to set the encoded video
00:59
in the model. Okay so what I've done just before I started recording was I deleted out all of the old videos that have been uploaded, I've also cleared up the videos table in here as well just so we can start fresh. So to delete the original upload after this is finished encoding we're going to go ahead and use the storage facade, we're specifically going to choose that
01:20
public disk and then we're just going to go ahead and delete the old file, so this video, video path. Now once that's been deleted we can then go ahead and set the new video inside the video path inside of here and we can set encoded to true. So we're just going to go ahead and say this video and update and the first thing that we're going to do is say that this was successfully encoded and
01:48
it's at this point here that you could broadcast another event if you wanted to, to your client side to show that progress and then we're going to go ahead and change the video path around. Now after this is saved how do we get the new encoded video, the new thing for this? Well we can just go ahead and pull in the first thing in here which is the exporter which we don't need
02:10
and the second thing is the media that has just been created and we can just say media get path and we're pretty much done. So just to recap once this the whole thing has finished encoding we delete the original file because we're not going to need that then we update the video to have the new video path of the thing that has been encoded and we set encoded to true. So let's just go over
02:34
to our model just to double check that we've got all of these in here and we have and let's try this out. So we're going to go over to the client side of course make sure that we pull in our QWorker, make sure our web sockets are working and let's go through the whole process. Okay so let's go ahead and upload a file and let's wait for that to finish uploading, wait for the encoding to start
02:54
and I'm going to sit here for a second and once this has finished encoding we should see that new video file in our storage and that should be attached to our model as well. Okay so this is just about finished encoding let's hop over to our editor and keeping on these files remember the original file should get deleted and the new one will remain and then that should be updated
03:15
within our model. So let's just wait a couple of seconds and make sure that this gets deleted and there we go it's disappeared, this is the encoded video which of course works and plays and if we head over to our database this video path has now been updated to that new encoded file and encoded has been set to one. So like I said on the client side now it's entirely up to you, you could fire
03:38
another event to change around this state and show a message or do anything else and it's really up to you, you know how to fire these events off now and you know how to pick them up on the client side and modify any of the state. So there we go we've successfully encoded a video and we have tidied everything up.
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!