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>

Advanced htmx: hx-encoding 05:32 Share

hx-pod

Shownotes Transcript

Advanced htmx: hx-encoding