PLAY PODCASTS
Advanced htmx: hx-encoding
Season 2 · Episode 9

Advanced htmx: hx-encoding

hx-pod

April 2, 20245m 32s

Audio is streamed directly from the publisher (media.transistor.fm) as published in their RSS feed. Play Podcasts does not host this file. Rights-holders can request removal through the copyright & takedown page.

Show Notes

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>

Topics

htmx javascript programming laravel livewire minimalism coding html simplicity