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
04. Initially creating a record

Episodes

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

Transcript

00:00
So because we need the ability to update the data alongside of these uploads while they're uploading,
00:05
we need to create the file in the database first, get back the ID, assign it to the object that we're pushing to this uploads ref, and then we can further edit it from there. Now with this, we're not going to use inertia specific functionality.
00:20
So usually with inertia, what we would do, let's say we were doing this for each of the files in this, we would probably either use a form or say something like router post, and then we would post through to a route like files and store.
00:35
And then once we've done that, so we could then bring on an on success in here. And then we could go ahead and push this to our uploads. So that is what we would normally do. If we were iterating through something like this, we would store this and then get this data back.
00:54
Now the only problem with doing this with inertia, which is possible, is that with an inertia, we expect a inertia response back so it can update our page component. Now with that, what that means is we can't just send back, say,
01:08
the ID of this directly within like a JSON string or JSON object. So what we're going to need to do is use Axios to send this down to a controller to get this data back. So let's go ahead and pull this out. And if you're interested, the way that we could do this,
01:24
if we did want to use inertia, is always sending down the last created ID in the database as a kind of global prop within handle inertia requests. But when I have tried this, it tends to just get a little bit messy. With inertia, there's nothing wrong with using Axios.
01:42
So let's pull this back to how it was here. And we'll go ahead and first of all, create out the controller that we actually need to store this. So let's go ahead and make a controller. We are going to call this video store controller.
01:55
Of course, we're working with videos, but anything works. And let's go over to our web routes and create this out. So I'm just going to do this directly within this middleware group. Let's go ahead and post down to slash videos.
02:07
And we'll say video store controller. And of course, let's give this a name. So let's say videos and store. Okay, great.
02:14
So let's open up our video store controller, create out an invoke magic method. We'll do nothing in there just for now. We'll just make sure we can send this request down first. And then we'll fill that in to actually create this.
02:25
So let's grab our uploads value on shift. And in here, let's go ahead and put in Axios so we can make this request. So let's import Axios from Axios, which is already installed within Laravel and hooked up for you. And let's say Axios post.
02:40
We can still use our Ziggy route helper to grab the route for this. So videos and store. And then what are we posting down here? So we need to choose some data that we want to post down.
02:51
Well, that's just going to be the title. So we just really want to pass the title down here, which we know is the file name. So let's go ahead and just add that as an empty string just for now. Now, once that request successfully finishes, then we want to go ahead and push to here.
03:07
So this title is going to be the file name. We could return that back from the back end or just push it directly onto our object here. But what we want to do is get the response here, get the ID from the response and fill that in here. So let's just make sure this works first of all, and then we'll go ahead and fill in the rest.
03:23
Okay, so I'm going to bring up the network tab here just so we can make sure that everything is working nicely. I do have a kind of slow performance throttling on here, which you don't need just at the moment. And let's go ahead and just choose one file for now just to see what happens. Okay, so let's open up our network tab again, pull this up.
03:41
And there we go. That looks like it made a request through to here. And of course, we're not getting a response back at the moment. So that is working nicely.
03:48
And I'm just going to pull this over here so it's a little bit easier for us to see. Okay, so now that we've done this, let's talk about the actual response that we need to send down. So of course, we grab a request in here so we can grab any data we need as part of this. And from here, we're going to go ahead and say request user because we need to store these in the context of a user, videos, create.
04:10
And then from the request, we only need the title. That's pretty much all we need. And we are going to add some validation in a little bit, but we'll just kind of leave that for now. So this is the video that we've uploaded.
04:23
So now what we can do, because we're not doing this with inertia, we can return a standard JSON response. So let's just do return response JSON. And then in here, we'll go ahead and pass through the video ID, which means we can pick it up on the client side and attach it here.
04:41
So I'm going to go ahead and just console log on our response that we get back here. And let's see what we get. Okay, so I'm going to open up my console. I'm going to choose just one of these files.
04:50
And there we go. We've got this data back with the ID, which we can then push to that. So let's go and swap that over, response data ID. And that is pretty much it.
05:02
So let's go over and just try a bunch of files here. And what we should see is now each of these have their own ID, which, of course, maps up to what we have in our database. So let's check this out. And there we go.
05:14
There are all our files. So that is the initial file created. Once that request finishes, we then push our uploads because we've got the data that we need. And now inside of here, we can kick off the upload process and attach that into some sort of uploader.
05:31
But now each of them uploads. We can grab the upload progress. We can update the title and the description. We can do pretty much whatever we need inside of here.
05:40
So there we go. Let's finally just go ahead and validate this. That's really important. We just need a title in here.
05:45
So I'm just going to do some really basic validation in here. And we're going to say that we require a title. So let's just set that to required. And, of course, you can change any other of the validation that you need.

Episode summary

In this episode, we dive into how to initially create a record in the database for each file upload before the actual file data is sent. The goal here is to support more dynamic features like updating file info (such as title or description) while uploads are still processing.

Instead of relying on typical Inertia.js form submissions, we switch to using Axios for a bit more flexibility. We build an endpoint that allows us to create a video record (or whatever model you're working with), get its unique ID, and immediately push it into your app's UI so that you can display progress or let users modify details mid-upload.

Throughout the video, we:

  • Set up a new controller and route for storing video records.
  • Trigger an Axios POST request with just the title (the file name), receive the database ID in the response, and attach it to the upload object in the front end.
  • Ensure we're returning a plain JSON response (rather than an Inertia response) for this specific workflow.
  • Test things out in the browser to confirm that each file gets created and assigned a unique ID, letting us handle multiple files at once.

We also add some basic validation, like making sure a title is always provided. By the end, you'll have a setup where you can create and track uploads more robustly, opening the door to showing progress, inline editing, and more sophisticated UI interactions during uploads.

Episode discussion

No comments, yet. Be the first!