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>