collin/anvil · 2bae5463
feat: "Attach image" button for uploads (mobile-friendly)
Collin Richards · 2026-06-10 13:59 UTC · 2bae54634a7d67e02b4fe03d13fa3bb3eadf49c0 · parent cebfb363 · browse files
modifiedcrates/anvil-web/src/ui.rs+27 −2
| ⋯ 1338 unchanged lines | |||
| 1339 | 1339 | textarea.editor name="content" rows="24" spellcheck="false" autofocus | |
| 1340 | 1340 | data-upload-url=(upload_url) data-csrf=(csrf) { (content) } | |
| 1341 | 1341 | } | |
| 1342 | - | p.muted.upload-hint { "Paste or drop an image to upload it — a Markdown link is inserted and the file is stored outside git." } | |
| 1342 | + | p.upload-hint { | |
| 1343 | + | label.btn.btn-secondary.attach-btn { | |
| 1344 | + | "Attach image" | |
| 1345 | + | input.attach-input type="file" accept="image/*" multiple hidden; | |
| 1346 | + | } | |
| 1347 | + | " " | |
| 1348 | + | span.muted { "or paste/drop one — it's stored outside git and a Markdown link is inserted." } | |
| 1349 | + | } | |
| 1343 | 1350 | p { label { "Commit message" br; input type="text" name="message" value=(message); } } | |
| 1344 | 1351 | p { | |
| 1345 | 1352 | button.btn type="submit" { "Commit changes" } | |
| ⋯ 59 unchanged lines | |||
| 1405 | 1412 | } | |
| 1406 | 1413 | if (imgs.length){ ev.preventDefault(); imgs.forEach(upload); } | |
| 1407 | 1414 | }); | |
| 1415 | + | // The "Attach image" button (works where paste/drop don't, e.g. mobile): | |
| 1416 | + | // a file picker that uploads each chosen image. | |
| 1417 | + | var picker = document.querySelector('input.attach-input'); | |
| 1418 | + | if (picker) picker.addEventListener('change', function(){ | |
| 1419 | + | var files = picker.files || []; | |
| 1420 | + | for (var i = 0; i < files.length; i++){ | |
| 1421 | + | if (files[i].type.indexOf('image/') === 0) upload(files[i]); | |
| 1422 | + | } | |
| 1423 | + | picker.value = ''; // let the same file be re-picked | |
| 1424 | + | }); | |
| 1408 | 1425 | })(); | |
| 1409 | 1426 | "#; | |
| 1410 | 1427 | ||
| ⋯ 159 unchanged lines | |||
| 1570 | 1587 | } } | |
| 1571 | 1588 | p { label { "Description" br; | |
| 1572 | 1589 | textarea.editor name="body" rows="10" spellcheck="false" | |
| 1573 | - | placeholder="Markdown — paste or drop an image to attach it" | |
| 1590 | + | placeholder="Markdown — attach an image with the button below, or paste/drop one" | |
| 1574 | 1591 | data-upload-url=(upload_url) data-csrf=(csrf) { (body) } | |
| 1575 | 1592 | } } | |
| 1593 | + | p.upload-hint { | |
| 1594 | + | label.btn.btn-secondary.attach-btn { | |
| 1595 | + | "Attach image" | |
| 1596 | + | input.attach-input type="file" accept="image/*" multiple hidden; | |
| 1597 | + | } | |
| 1598 | + | " " | |
| 1599 | + | span.muted { "stored outside git; a Markdown link is inserted into the description." } | |
| 1600 | + | } | |
| 1576 | 1601 | p { | |
| 1577 | 1602 | button.btn type="submit" { "Add task" } | |
| 1578 | 1603 | " " | |
| ⋯ 765 unchanged lines | |||