Multiple Drag And Drop File Uploading and Processing with Inertia
Playing
01. Introduction and demo

Episodes

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

Transcript

00:00
In this course we're going to be building a multiple drag-and-drop file uploader with Inertia, Vue and Laravel, but we're going to split this course into two parts. The first part is going to be what you see here when we actually drag files in or select files, and then they go ahead and upload, we show progress, we can pause these, we can cancel them,
00:20
we can even edit metadata alongside them, so we can edit the title and the description while they are being uploaded. So that's going to be the first section. In the second section of the course we are going to show real-time encoding of the videos that we're uploading. So that's going to be a really rough example, but it's going to give you everything that you need
00:39
to be able to show any kind of file progress after something has been uploaded and reflect that on the client. So hopefully that makes sense, but let's dive in and take a look at a demo just to see exactly what we're talking about. Okay, so let's go and just click here, pretty straightforward, this brings up a list of files that we can upload, but we can also drag and drop into here, so I could grab all of these files and I can move them over as well.
01:03
Now we're just going to start with one file just so we can see what's happening, and then check out the real-time updates that we get on the client here. So I'm just going to go ahead and select a file here rather than drag and drop it, and I'm just going to choose one of these smaller files.
01:15
So as you can see it's already started and finished uploading, and the encoding process is coming through, now that was a little bit quick. So throughout the course we're going to go ahead and just change our network to be a little bit slower, so let's just pull this down and let's just catch what happens while we're uploading a larger file.
01:33
So I'm going to go ahead and choose a slightly larger one here, and that's already being uploaded, I can pause this which will of course pause the upload, we're going to ignore this for now because we're going to format that a little bit later, but we can cancel this as well.
01:46
Now while this is being uploaded, so at the same time this is uploading, I can also change around the title and the description, so I can put a description in here, I can save that out even while this is uploading, and you can see that the video details get saved here.
02:01
So we can do all of that while this is uploading, and then we get to the point where these get encoded. So the encoding process is happening on the back end via a job, so all of these are jobs that are being put into a queue,
02:13
we'll look at the basics of queues if you're not familiar with them, and then we are broadcasting the status of this encoding in real time to our client using WebSockets. So that's going to be the second half of this, if you just need the ability to upload multiple files with drag and drop,
02:29
the ability to pause and cancel and edit the data alongside of these, then you're just going to want to follow the first section of the course, otherwise in the second section we'll cover this encoding stuff, and that will give you everything you need to then go on and do anything else you need with
02:43
any type of file or whatever you're doing in your apps. So that is pretty much what we are building, let's just dive in, get a fresh project set up, and just start first of all with the upload functionality.
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.