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

An amazingly simple file uploading form *with a progress bar* using htmx: hx-encoding='multipart/form-data' hx-post='/[where-you-want-post-it]' hx-target='#target-div'> Upload htmx.on('#form', 'htmx:xhr:progress', function(evt) { htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100) });

<p>An amazingly simple file uploading form *with a progress bar* using htmx:</p><p></p>&nbsp; &nbsp; &nbsp; <strong>hx-encoding='multipart/form-data' </strong><br>&nbsp; &nbsp; &nbsp; hx-post='/[where-you-want-post-it]'<br>&nbsp; &nbsp; &nbsp; hx-target='#target-div'&gt;<br>&nbsp; &nbsp; <br>&nbsp; &nbsp; <br>&nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; Upload<br>&nbsp; &nbsp; <br>&nbsp; &nbsp; <br><br><p></p>

Advanced htmx: hx-encoding

Join me while I learn about web fundamentals and talk at you about it
Twitter: @all__hype

Technology

Education

Join me while I learn about web fundamentals and talk at you about it Twitter: @all__hype

Share Advanced htmx: hx-encoding

Sign up to save your podcasts

Advanced htmx: hx-encoding

Advanced htmx: hx-encoding