{"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:<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>","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}