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
02. Fresh app, videos and upload page

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 i've gone ahead and created a fresh app with the laravel installer and i've used the breeze starter kit of course with inertia and view so we're going to go ahead and just take this episode to get a few things set up including our area where we're going to upload and also of
00:16
course create our models so we can actually store these a little bit later you could pretty much skip this if you've already got the functionality you need to store stuff but let's go ahead and do okay so i've already migrated the database here i'm signed in and i'm on my dashboard the first thing i'm going to do is just head over to the dashboard template and just swap this around so
00:37
it's an upload page so let's change this to upload and we're going to reduce the width of the container just here let's say 4xl so that should be good maybe bump that down even further so this will be our upload area just inside of here and then underneath there we'll iterate through each of the uploads that we have and show them in their own container so this is going to be our
01:00
upload form great okay let's go ahead and work on the model now this is probably going to be completely different for you because you're going to have different things that you're uploading but i'm going to go ahead and create out a video model in here and of course generate a migration alongside that as well so let's open up the migration and let's fill in the basics that we
01:18
need for this now we know that this needs to be attached to a user so i'm going to go ahead and add in a user id for the foreign id here and we're going to have a title and a description so they're pretty straightforward that's just going to be a string with the title and then we're going to have a string or a text type for the description now we want a file path in here that's really
01:41
important when we upload this of course we're chunking these uploads when we send these through when these get pieced together in the back end we want to take the whole chunks all put together store them in laravel's file system using laravel's file system functionality and then when we do that we'll get back the path that we've stored these two now you can store these pretty much anywhere
02:01
but usually when you store an uploaded file in laravel you get the path back very conveniently so we can just add this directly to the model so this is just going to be a string and it's going to be the video path or the file path whatever you want to call it and really importantly we're going to set this to be nullable first because when we first create the upload we're going to
02:22
create all this with a title description should probably be nullable here as well because we're not initially going to create a description but we're going to attach this to the user generate a title send that down but then the description and the video path are not going to be available until this upload is finished or until the user's into description so really important to keep them
02:42
nullable we just need to think about what we're initially creating and then what can be added so the last thing is just going to be a boolean and that's just going to be whether this is encoded or not now of course that's going to depend on what you're building but this is just going to be a flag that we can set to say that this has been encoded or not and we don't really
03:00
need a boolean for whether this has been uploaded because we'll know that with the video path so we're going to set a default here of zero or false and i think we're pretty much done now with this model so let's go ahead and run our migrations and i'm going to head straight over to that video model and i'm going to go ahead and set our fillable fields in here and that's going to be
03:23
let's just check title description and our video path and encoded so let's add these in here and that's it for our model we can add anything we need here later but our user now has multiple videos so let's go and create our videos relationship in here really really basic has many relationship for that video and that should be just about it so we can now store any of these files with a title
03:52
description of course we can update them as well via that form okay so let's go ahead and just really quickly scaffold out our upload form and then we can go ahead and handle file uploads and clicking this to actually attach a file in the next episode so let's go over to our dashboard and we could just pretty much make all of this a form it doesn't really matter
04:12
and inside of here we're going to have an input type of you guessed it file that's going to be the file that we store this in we don't need a name for this but we'll set the id of this to either file or files we can change that later now this is going to be hidden because we don't really want this to be shown on the page we want that nice section where we can drag and drop stuff
04:32
into so i'm going to go ahead and set this as a class of screen reader only really importantly we're going to set this to multiple because we want to allow multiple files to be dragged in so we'll change that over to multiple and there are various things that you can pass through to here like which file types you can accept so i'd recommend you go ahead and tweak this how you
04:50
need it now the most important part of this is the label so that gets attached to the file and this is where we get to drag and drop these files onto which of course hook up to our input so for this label let's just say drop or click here to upload files and we're pretty much done so now when i click on this input you'll see that we get a list of files in here which is great so
05:13
we can select these and they will all be attached into that file input which is hidden but of course we can read that with view so now let's just very quickly style this up and we should be good so i'm going to set this to a flex of item center and justify center because we're having everything sort of sit in the middle of this all the content sit in the middle we're going to set a width to
05:35
full we'll set a manual height in here and of course you can adjust that and we'll go ahead and set a background of say gray 100, let's set a border on this we'll set the border to dash to get that kind of standard effect of dragging and dropping and we'll set the border color here as well we're going to be changing over the background and the border color when we hover over
05:56
we're not going to get to that point just yet, okay so let's go ahead and set the text color in here to say gray 500 font medium and i think we should just be about done that's just going to give us something like this where now this entire label we can just click on and that's going to present to us a list of the files and of course later we'll get to handling the on drag and leave
06:16
and drop event to handle dragging and dropping we'll do that last, okay there we go we're pretty much set up now we can head straight over to the next episode and look at when we select either one file or multiple files how do we handle these and sort of trigger the fact that we've selected these let's jump over and see how we do that next.
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!