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
07. Showing upload progress

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 did say that we were going to go ahead and piece these chunks together on the server, but I think it's really helpful to look at the progress on the client side first so we can just visually see what's happening. So what we're going to do is head over to this section where we are
00:13
pushing to this object or pushing to this list of our uploads and we're going to go ahead and add in some sort of status flags in here. So the first one is going to be whether or not this is uploading, that's going to be true by default because as soon as we push this the upload is going to start, so we can set that by default to true. The second is going to be the upload progress,
00:34
so of course by default that is going to be zero. So we're going to use this upload progress which I'm just temporarily going to set to 33 or any other random value and build out our progress bar within our upload item just so we can see this and then what we can do is hook into the events with up chunk and we can update the progress and then we'll see that progress bar move.
00:56
So let's go up to the section just up here on the left and let's go ahead and build out our progress bar. Okay just before we do that for the container on the left hand side let's go ahead and set max width on here to a specific amount just so we've got a nice width to this and we'll go ahead and set the width to full and space all these items out by three.
01:16
So let's go ahead and just have a look at that just so we know it's the right size and great there we go so that's where you can show something like a video preview or anything that you want once you finish the course and you know how to relay this stuff to the client. Okay so for the actual progress bar itself let's go ahead and create out a container for this,
01:38
so I'm going to set a space y of one because we're going to have a progress bar here and then we're going to have some sort of uploading state just here so that's going to look like this, so for the progress bar itself let's go and create a background of gray 100, we'll set a shadow inner to this, we'll set a specific height for the wrapper and we'll make
02:02
this rounded and we're going to set overflow to hidden because this is just the wrapper for the bar and then inside of here is going to be the green or blue bar whatever it's going to be to show that actual progress so we want that to still be rounded. So in here we're going to set out a div this can just all be on one line and we're going to set a
02:21
background of a color of our choosing so we're going to say blue and we'll set a height to full, now with this what we can now do is set a style in here we're going to be changing this around so we bind it in with view but this width can be something like 33% so the bar inside of the wrapper will show that progress and you basically end up with something that looks like this,
02:41
so we've got that nice inner shadow and I think that looks good, okay so I'm just going to set the text to small on this uploading flag and we should be good, so now what we can do is we can replace this width out with the width that comes through for each of our uploads, let's just remind ourselves so I'm going to go ahead and dump out the upload prop here and we know that we've got that file
03:02
with all of that data in but we've got this uploading true and uploading progress set to 33, so what we can do is only show the progress bar here or this entire uploading section if this is actually uploading there's no point showing it otherwise so we can say upload, uploading and then in here we can bind in this style width so let's say v bind style and in here
03:26
we can pass in an object with the width that we get back from this so that is going to be the upload progress or whatever we called it upload progress and then just add a percent sign on the end and let's just double check that name upload progress, yeah that should be good, so now that should show at 33 because that is what we set here within that object,
03:49
let's go back over to our dashboard and just bump this up to 90 just to make sure that this comes through and we can then look at hooking into these events, there we go, so that's looking good, we're getting the progress through from this specific upload, now we just need to hook in and update this value because of course we don't want it to be a hard-coded value,
04:08
okay so over in upload item let's just get rid of the upload prop and let's go and figure out how we hook into this event, okay so what we want to do is when we start this upload off inside of here we want to attach some event handlers, now the first one is going to be the progress, so let's take a look at this, inside of this we will get a progress object in
04:32
and let's go ahead and console log this out just to see what this looks like as we go, so a very simple event handler attached to the actual chunk to upload here, so let's go over to our console and I'm going to go ahead and choose a file and we should see all of this dumped out, great, okay so if we just take a look at one of these
04:50
you can see that we've got this detail in here which contains the exact progress that we need, so we can just grab that, find the upload within the list and then update the progress, now we need a way to actually get an upload by its id, so let's go up here and create get upload by id, so this will go ahead and take in the id of the id we've stored in our database because
05:13
we know that's a unique thing and it will look in uploads and return that back to us, this is pretty straightforward, so we're going to return uploads value and then find and then inside of here we will get each of them uploads and we just want to compare the upload id to the id we've passed in and that's going to return us back each of them uploads in there, okay so now
05:34
we can use this down here to go ahead and find this by its id, we know its id because we passed it through when we invoked this and then we're going to set the upload progress to p.detail, that's the thing that we console logged out earlier and that should be it, so let's go over and just try this out, now because we are sending that down to our upload item component and reading
05:59
that in and setting the width within css we should see this update, so let's choose a file here and there we go, as you can see this is going ahead and showing the progress of the upload, so let's go ahead and choose another file and you can see that we get a slight flick up when we first start this and it sets it to a hundred percent, so let's go and check out why that might
06:21
be, you guessed it we didn't remove the 90, there we go, okay so we've switched that back to zero and sure enough now it's starting from actual zero and there we go, now the one thing we do need to work out is when we get to the end of this what is going to happen, so let's just wait for this to get to a hundred percent and of course it just kind of stops, so what we want to do at this
06:43
point is kind of reset this back so we show that it's not uploading because eventually we're going to switch that out to the next thing, you can just leave it like this if you just want to show that the entire file has been uploaded, but we kind of want to set uploading back to false, so again we can hook into another handler here and that is going to be on success, so we can get rid of this
07:03
p because we're not going to need anything in here, we'll get rid of this console log as well and we just want to do the same thing, grab the upload by the id and we're going to set uploading back to false and that should then hide that progress bar, so let's just try this one more time and I think we're done here, so let's go ahead and choose a file, wait for this to upload and then
07:22
see what we get, probably could have chosen a smaller file here but let's go through and wait till this gets to the end and sure enough there we go, so that is our progress bar complete, now let's go on and look at how we piece these files together in the back end and then actually store the file in our file system.

Episode summary

In this episode, we're focusing on the client-side experience for file uploads—specifically, how to show upload progress so users know what's happening while their files are being sent to the server. Before we move on to handling chunk assembly on the server, we want to make the upload progress super clear and visually appealing for users.

We start by adding some new flags and properties to each upload: uploading (to track if the file is actively uploading) and uploadProgress (to show how far along the upload is). We hardcode this progress value at first so we can build a nice progress bar UI in our upload item list. This includes a visual bar that grows as the progress updates—a simple but effective touch for user feedback!

Once the progress bar looks good, we connect it to real data by hooking into upload events. As the upload proceeds, we update the progress value and see the progress bar animate in real time. We also tidy things up: when the upload completes, we hide the progress UI by flipping the uploading flag.

By the end of this video, you’ll have a working file upload progress indicator in the frontend. Next up, we'll dive into how to actually piece together those uploaded chunks on the backend and save the completed file!

Episode discussion

No comments, yet. Be the first!