Chunking Large Uploads in Livewire
This episode is for members only

Sign up to access "Chunking Large Uploads in Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
04. Showing progress and handling success

Episodes

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

Transcript

00:00
just before we go ahead and piece these chunks together let's actually build out a progress bar and that's going to give us a really good visual representation as well as while we're developing for the progress of this file so we just don't have to keep our network tab open so let's head over to our sort of area
00:15
down here and i'm going to create out another section just underneath here and this is where our progress bar is going to go so i'm going to space things out here by just adding a space y of six on here just to spread that out and then down
00:32
here we'll just start to build out a really basic progress bar so let's create a wrapper out for this first of all and then we're going to have an inner bar so the wrapper itself is going to have like a gray background so let's say gray 100
00:44
we'll set an inner shadow to this and we'll give it a specific height we'll set this to rounded and we'll make sure overflow is hidden so when our bar gets to the end we have that rounded at the end and the start okay so for the inner bar let's just take a look at what
01:00
we've got so far it just looks like that for the inner bar we'll just go ahead and set a background color of our choosing so let's choose blue 500 we'll set a full height on this so that will be a height of three and we'll add some transitions to this as well and we'll set a duration that just
01:15
means that as this increments we're going to see a nice smooth bar so for this the way that we're going to get this to work is we're going to add in a style just so we can easily go ahead and pop in the amount of progress to this and obviously
01:29
we're not going to use a class so for the style let's go ahead and set a width of this to something like 50% just to see what we've got so that's our basic progress bar okay so we only want to show this entire section our cancel resume links and all that
01:43
kind of stuff is going to go in here as well we want to go ahead and say x if and this needs to be a template with an alpine uploader so we only want to show progress if we have an uploader instance in there otherwise there's not much point
01:56
showing any of this stuff so this outer thing is actually going to have to be a template and i'm going to wrap this in a template here so let's wrap that in this template and then we'll add the x if on here so if we give that refresh of course sure enough we don't have an
02:12
uploader but when we choose a file and we hit upload sure enough our progress bar shows so now what we want to do is work out how we grab the progress for this and then how we override this style that we've got inside of here so
02:25
let's go up and add in a progress property to our alpine form here and then we're going to attach an event handler to the uploader and that will give us back the progress so all we need to do for that is just say this uploader on
02:41
progress that's one of the events that fired from this library we'll get a progress object inside of here and let's just console log on that progress object just to see what we get so this will give us the progress as of course the file is progressing so
02:56
let's choose one of these hit upload and there we go great so if we just take a look at one of these we've got this detail property here which will give us the actual progress of the upload which is great we can just say this progress and set this to progress detail
03:11
so now this progress here is always going to be up to date with the latest progress and because that is part of our alpine component we can now bind this in directly inside of here so to bind this in we can say x bind style or we could just use the style
03:26
shorthand and then in here we're going to pass in an object and that is going to have the width and that's going to be the progress and then we're going to add a percentage sign on the end of there so that style kicks in properly
03:39
so now we should have a working progress bar let's go ahead and choose one of these files hit upload and as you can see that is working all the way up to the end i'm just going to wait for this to finish because we're going to handle what happens when this does finish
03:53
and let's just wait for this and we're nearly there there we go great so that is 100% uploaded okay so when this whole process finishes when the entire file is finished we want to handle something as well so we kind of
04:06
want to reset the entire state of this so we're going to go ahead and say on success we don't have progress as part of this but this is where we can just do a little bit of clear up so really the only thing that we need to do here is just set the uploader
04:20
back to null and we can even even reset the progress as well so from the introduction we saw that when we uploaded another file the progress was already at 100% so it sort of flickered back and forth but if we just reset the progress here it's always going to go back to zero
04:35
when this finishes and we can do this when we cancel and upload as well and anything else that we need to do okay so now that's done let's choose a slightly smaller file so we don't need to wait around i'm going to hit upload once that's finished the uploader goes
04:48
of course that updates within alpine and the progress bar disappears and our progress is set back to zero so we can just keep uploading this same file over and over again okay that's pretty much it our progress bar is done let's move on to handle these chunks on our server
13 episodes• 53 mins

Overview

Effortlessly handle large file uploads in your Livewire apps with chunked, resumable uploading.

We’ll cover the entire upload process, display a progress bar, then add the ability to pause, resume and cancel uploads.

From there, you’ll be able to handle huge file uploads anywhere in your applications.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!