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.

Episode summary

Welcome to the course! In this first episode, we kick things off by introducing what we're going to be building—a slick, drag-and-drop multiple file uploader using Inertia, Vue, and Laravel. The course is split into two main parts. First, we'll focus on building out the file upload feature, covering everything from uploading and tracking progress, to pausing and canceling uploads. You'll even see how to edit metadata like the title and description of files while they're still uploading!

As a sneak peek, there's also a quick demo showing the uploader in action. You'll see how files can be selected or dragged in, how uploads are tracked in real time, and how you can adjust the upload speed to test your UI. We even demonstrate how you can pause, cancel, and edit details mid-upload.

The second part of the course dives into real-time video encoding (after upload), using WebSockets to update the client as jobs are processed in the Laravel queue. If you're just looking to build out the upload experience, you can focus on the first part, but if you want to make the experience super interactive and real-time, you'll want to stick around for the encoding section too!

By the end of this episode, you'll know exactly what we’re building and why, and we'll jump right into getting started with a fresh project and the foundational upload setup.

Episode discussion

No comments, yet. Be the first!