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
13. Using nextTick to fix a rendering issue

Transcript

00:00
Luckily, we spotted a little issue when we canceled off an upload, and we
00:04
saw an error in the console. Let's go ahead and fix that now. OK, so let's choose a file and try and recreate this. And let's hit Cancel.
00:11
And yeah, so this is due to our expression here with Uploader. We're trying to reference something that has now been set back to null. So we can't access the paused property,
00:22
or we can't pause or resume it, because Uploader is now null. Now, Uploader is null, because over in our upload just here, when we cancel this, let's find that function, we set Uploader back to null just here.
00:36
So an easy way to get around this and a perfectly acceptable way to get around this is going ahead and waiting to the next tick of Alpine when it refreshes what's on the page.
00:45
So we can just wrap this in Next Tick. And then once the next tick or the next sort of render rolls in, then we can set the Uploader back to null. And then that means that down here, this will be picked up
00:58
and none of this will be shown. And therefore, the Uploader here won't be available. So let's go and just try this out again. And let's upload a large file.
01:07
Make sure we can pause this and resume it, cancel it. And there we go. No more issue. So there we go, a little fix, and we're all good.

Episode summary

In this episode, we ran into a pesky little error when canceling an upload—it turns out that our code was trying to work with the Uploader object after it had already been set to null. Oops! This caused some issues because properties like paused couldn't be accessed anymore, throwing errors in the console.

To fix it, we walked through the process of using Alpine's nextTick function. Basically, instead of immediately setting Uploader to null when canceling, we wait for the next DOM update with nextTick. This ensures all relevant bits of the UI update properly before Uploader disappears, so nothing tries to use it after it's gone.

We tested the fix out—uploading, pausing, resuming, and then canceling again—and saw that everything now works smoothly without any console errors. So that little bug is squashed, and you're now set with a handy trick using nextTick!

Episode discussion

No comments, yet. Be the first!