Advanced htmx: hx-encoding

An amazingly simple file uploading form *with a progress bar* using htmx:

<form id='form'
      hx-encoding='multipart/form-data'
      hx-post='/[where-you-want-post-it]'
      hx-target='#target-div'>
    <input type="hidden" name="_token" value="" />
    <input type='file' name='file'>
    <button>
        Upload
    </button>
    <progress id='progress' value='0' max='100'></progress>
</form>
<script>
    htmx.on('#form', 'htmx:xhr:progress', function(evt) {
      htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100)
    });
</script>

What is hx-pod?

Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs

Speaker 1: 00:05

So HX encoding is an easy one in that it only has one option and you just put it on a form. So it doesn't, like, go anywhere but it it sets the the form encoding, to basically just just to support file uploads, which sounds small but it's kind it's kind of amazing because file uploads, if you've ever dealt with them, eventually you get it to work, it's fine, but they are a pain in the ass. If you've submitted forms before you may recognize the like multipart/formdashdata. You need to set that in the in the form encoding. But for h t m x, you do h x encoding equals, and then you set multi part slash form data.

Speaker 1: 00:52

And that's really all you need to do. HTML handles file uploading pretty well. Right? Just the original web 1 point o, it doesn't do anything really complicated. The problem with it the problem the reason just doing like a standard post and setting your your file upload stuff, this web 1.0, the reason it stinks for it is that you submit your form and then, you know, it's doing the the free the full page refresh and stuff, and it takes you to this like white screen and it's kind of spinning up at the top, very unclear what's happening.

Speaker 1: 01:33

If you navigate away, if you if something happens, if you press the stop, you know, there's just all kinds of things. This is not a good user experience. People think it's broken, sometimes it is broken, you just have this like sitting on a white screen spinning, no idea if it's going to work. So web 1.0 bad. That's why there's so many these variations and, you know, this is something that people want to do is when you submit something like a file upload you want to see that it's, you know, loading or something like that but you don't want to navigate away from your page, you don't want everything to kind of disappear.

Speaker 1: 02:07

So it's just a bad user experience in web 1.0. And I was so I'll just, you know, because this episode is so short because really it's just ajax encoding equals one thing and that's what you all you have to do and you set that on your form so that you can use ajax. I'll just give a quick quick story. I was recently building a simple form uploader with another tool that's meant to do this, you know, kind of to provide that front end AJAX type experience. And even with that other tool which is meant to simplify the process, submitting upload was a huge pain.

Speaker 1: 02:42

You have to worry about, you know, it does something like it sets up its own version of the temporary file and then it where it sets that file you have to have the permissions right. It's supposed to make things smoother and you have these other options. It's supposed to make things smoother but it doesn't. It was I was I spent about 2 hours working on this trying to get it to write and I finally got it working in local and all of a sudden I, you know, upload it, test it on production, it doesn't work on production. Probably some permissions issue for temp files, it could have issues on the local, you know, between those two things, you might not have something set up on your local server that you do have in production or vice versa.

Speaker 1: 03:25

So that's the kind of thing that, you know, because that had a special implementation of how it handles the file uploads to make things easier, you know, it deviated from sort of the HTML way to do it, and it sort of set up its own thing. They had its own problems. And so I spent hours working on this before I just decided, okay, you know, I'm learning HTMLX. Let's see what HTMLX has here. Like, let's see if it can solve these issues.

Speaker 1: 03:50

And it does. It solved the issue. It did. It solved the issue by using It doesn't do anything beyond the the basic HTML 1 point o setup except that it adds this AJAX support. So now you can show a little loading spinner if you want to.

Speaker 1: 04:05

Or even better, which is what I did, and this is literally 15 minutes. I went from I rebuilt the entire uploading area, which I'd spent hours working on, and made it much better. I added a progress bar. It was very easy. And I tweeted about it at the time.

Speaker 1: 04:23

I'm actually going to include the full code for that form which includes, you know, the h x encoding equals multi part form data. I'll include that in the episode notes just because this is just like a solved problem in h t m x. It was fantastic. It was so easy. You know, you can style it, make it fancy if you want to, but I just used the built in browser stuff.

Speaker 1: 04:44

You know, you have a progress bar. You have, you know, some other things. There's plenty you can do afterwards to to make the user experience exactly the way you want, but the core thing of being able to select a file and then update it using AJAX, submit it and have it show up. It was just so straightforward. So that's what AJAX encoding, you know, kind of empowers you to do here is is submit these forms through AJAX.

Speaker 1: 05:11

It's great. Yeah. So check out that code. It's basically all you need for the basics. You know, HX encoding and everything is all you need to get the basics of full file upload support using HTMLX.