Learn Alpine.js
Playing
18. Refs

Episodes

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

Transcript

00:00
So we're now going to cover refs, which are a way to pinpoint an element within a component
00:05
so you can reference it, basically. A ref stands for reference. It's an incredibly simple concept, but to make this a little bit more fun, we're going to go ahead and create a file chooser, which is just a native HTML element.
00:18
And then when we choose an image, this renders a preview of the image. So this is really great for things like previewing an image before you upload it, specifically for avatars in this case. So over to the code, let's look at the basics of refs before we dive into that example.
00:35
Let's create out a simple component in here. And let's just create any element inside of here. It doesn't matter. It can be a div, an input.
00:44
Really, really doesn't matter. So I'm just going to put some text in here just so we can see something on the page. And inside of our xinit method or a method inside of xdata, we're going to go ahead and access this element and console log it out.
00:58
So let's go ahead and say console log. Now, we want to reference this item. Regardless of what it is, it doesn't matter. Now, to do that, we could say document.getElementById.
01:09
We could attach an ID to this if we wanted to. If you did want to do that and say greeting, you could easily do that by getElementById and greeting. And that would actually give you that out.
01:21
Let's give that a refresh. And there we go. We get the element. But this is a little bit cumbersome.
01:25
So instead what we can do, instead of assigning this an ID, we can say xref. Now, that's going to reference that by its name that you've given here. So now what we can do is instead say refs greeting like so. Let's go over, give that a refresh.
01:42
We get exactly the same thing. Now, refs contain any of the refs that you've created in here. So let's just go ahead and create another one in here and just change that to another. And if we console.log out refs, we get an object with each of them in there.
01:58
So we can have as many of these as we need. This can be really useful for not only the example that we're about to look at, but for an example, if you had an input that you wanted to be auto selected within a modal where the user doesn't interact with the modal before it's opened.
02:14
We looked at the example of modals earlier. You could assign a ref to this and just say input. And then when that modal gets opened, you could say refs input. And then focus, for example.
02:24
So when that modal gets opened, this automatically gets focused like so. I've just refreshed the page again. So you can use this for pretty much anything. But let's go ahead and look at that example of the image preview,
02:36
which I think is a really cool example to look at with Alpine. So we're going to go and create out a form here. And let's go ahead and add some data to this to initialize this component. Let's pull this down.
02:48
And inside of here, we want to store the image preview for whichever image we select. By default, that's just going to be null. We can create an input type of file inside of here. And that's going to be where we select that.
03:00
So we're going to need to watch for that changing. So we need to watch for this having a new image being selected or file in general being selected. And then do something with it. So for this, what we're going to do is attach an event handler.
03:12
We've not looked at this specific event yet. But again, it works in exactly the same as any JavaScript event. On change, which we use for files. And we're going to go ahead and call a preview image method.
03:24
Let's grab that and create that method just up in here. And let's just console log out changed just so we know that this is working. Let's go ahead and choose that file that we had before. And there we go.
03:34
We get changed. So what we can do now is take this image from here. And we can create a preview for it. To do that, we're going to use xref.
03:43
And we're going to define that as image. So we can easily access it directly from inside of here. We could, of course, use the event that we get through. We actually get an event through in here.
03:53
Let's just log on that event just so we can see what we mean. And if we just select that image again, we get the event through here. And we do have the target. You could do that.
04:02
But we're going to go ahead and roll with the xref in this example. In fact, let's bring that event back in. Because I think it's going to be a bit easier to do it in this way. Let's go ahead and create out a reader, which is a new file reader instance within JavaScript.
04:18
And we're going to go ahead and set an onload event for when that gets loaded or something gets loaded into it. So we have an event through inside of here. And we're going to say image preview.
04:30
And we're going to assign that to the result from that event. In fact, we don't need this event just here. We can use the one that we get back from onload. So now that we have our event listener, let's go ahead and say reader read as data URL.
04:44
I think it's capital RL. We'll find out in a minute. And then we're going to go ahead and from our refs, grab the image ref, which is this input. And then go ahead and grab from the files the first file.
04:58
Because we're just allowing one file to be uploaded. So if we just go ahead and console log this. And I'll run through this in a moment if it doesn't make sense. And get rid of all of this stuff.
05:10
Let's just see what that gives us. Let's choose a file here. And there we go. So we've got that file inside of there, which we can render out as a preview using the file reader.
05:20
If you're not familiar, what this will do is it will create a file reader. Ignore onload for now. It will go ahead and read that file as a data URL. And when that happens, this is our callback.
05:31
So this callback here will be run. It will set the image preview that we have up here to the result from that image preview. So what we should now have, if we just output a span with just x text for now as the image preview, we should get that result back in there.
05:46
It's not going to look great at the moment, but we can figure that out. There we go. So we get the image here as a string, which we can put directly into an image tag. So with this, what we can now do is use a template.
05:59
We can use an xif. Remember, we don't want to actually render anything out yet, if that's the case. So we're going to use xif rather than xshow, and we're going to say image preview. So if the image preview exists, then inside of here, we can just create out some kind
06:13
of wrapper, have an image in here, and we can bind in the source. So we can use xbind, bind that in to the image preview, which is that data URL that we got back. And of course, you'd probably want an alt tag in there for accessibility.
06:28
Let's just add a inline style to this, since we're not using much CSS here, and just set that to a width of 200 pixels, and we should be good. So now let's go over and preview this. Choose a file.
06:39
That's going to go ahead and read that data in, and I'm just going to give that a hard refresh and try again. Let's choose that file. And there we go.
06:47
So we get a preview of our image, which we can then go ahead and submit through and do whatever else we need to. So this could technically exist as a normal form that you're not sending through necessarily as an API request, but you're sending through on a normal page.
07:03
So all we're doing is sprinkling in this functionality to preview the image before the user goes ahead and submits the form in the normal way. For example, you would probably have a method in here of post, and you might have an action going through to some kind of profile information URL.
07:20
So that would actually submit that file through as normal because you have the input in there, but we've just sprinkled Alpine in to preview the image before that gets sent over. So there we go. A quick example of how we can use refs to reference any element.
07:34
That's pretty much it for refs. That's all it does. Pinpoint what you want this to be called, and you can access it using this refs object anywhere inside of your Alpine component.

Episode summary

In this episode, we're taking a look at refs in Alpine.js. Refs are simply a way to directly reference (or "pinpoint") any element in your component, making it super easy to interact with specific pieces of your template from your JavaScript.

To make things practical—and a bit more fun—we walk through building a simple image file chooser. We'll set up a form with a native HTML file input, and when a user selects an image, we'll show a live preview before anything gets uploaded. This is especially handy for things like updating avatars or profile pictures.

First, we show how you could use a plain old document.getElementById, but that's a bit clunky. Instead, Alpine's x-ref directive lets you give any element a custom name, and access it through Alpine's refs object. You can have as many refs as you want, making your component much more organized and flexible.

We also cover scenarios like auto-focusing an input field in a modal, which is just one of countless real-life uses for refs. Then, in our file input, we watch for the change event, grab the selected file, use the FileReader API to read it as a data URL, and render out a preview image on the page. It's a nice demonstration of how Alpine can sprinkle interactive features over a normal HTML form without completely taking over.

By the end of the lesson, you'll see how easy it is to add interactivity like image previews using refs, without a bunch of messy IDs or global DOM queries. So, that's Alpine refs in action—simple, powerful, and a great addition to your toolkit!

Episode discussion

No comments, yet. Be the first!