{"type":"rich","version":"1.0","provider_name":"Transistor","provider_url":"https://transistor.fm","author_name":"hx-pod","title":"Advanced htmx: hx-encoding","html":"<iframe width=\"100%\" height=\"180\" frameborder=\"no\" scrolling=\"no\" seamless src=\"https://share.transistor.fm/e/5d7f7b73\"></iframe>","width":"100%","height":180,"duration":332,"description":"An amazingly simple file uploading form *with a progress bar* using htmx:\n<form id='form'\n      hx-encoding='multipart/form-data' \n      hx-post='/[where-you-want-post-it]'\n      hx-target='#target-div'>\n    <input type=\"hidden\" name=\"_token\" value=\"\" />\n    <input type='file' name='file'>\n    <button>\n        Upload\n    </button>\n    <progress id='progress' value='0' max='100'></progress>\n</form>\n<script>\n    htmx.on('#form', 'htmx:xhr:progress', function(evt) {\n      htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100)\n    });\n</script>","thumbnail_url":"https://img.transistorcdn.com/HDMx2j8NsKr2kaFUaB8csw69snTIab1k7QGpslBA4_0/rs:fill:0:0:1/w:400/h:400/q:60/mb:500000/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS85YzY0/NTY5OTExYjljY2Ri/MTFlZjk3NDhlZWE0/ODUxOC5qcGc.webp","thumbnail_width":300,"thumbnail_height":300}