Fossil SCM
Added a Cancel button to the drag/drop file/image field to clear the pending blob. Still need to hook it up to interact with the file input field, but that will have to wait a bit.
Commit
018084c50ed42659c7276eef388c6cb38576c1284a5ac0ef0bdae0beb79ff134
Parent
3e956a2354c2003…
1 file changed
+4
+4
| --- src/chat.js | ||
| +++ src/chat.js | ||
| @@ -14,19 +14,23 @@ | ||
| 14 | 14 | data. */ |
| 15 | 15 | const updateDropZoneContent = function(blob){ |
| 16 | 16 | const bx = BlobXferState, dd = bx.dropDetails; |
| 17 | 17 | bx.blob = blob; |
| 18 | 18 | D.clearElement(dd); |
| 19 | + if(!blob) return; | |
| 19 | 20 | D.append(dd, D.br(), "Name: ", blob.name, |
| 20 | 21 | D.br(), "Size: ",blob.size); |
| 21 | 22 | if(blob.type && blob.type.startsWith("image/")){ |
| 22 | 23 | const img = D.img(); |
| 23 | 24 | D.append(dd, D.br(), img); |
| 24 | 25 | const reader = new FileReader(); |
| 25 | 26 | reader.onload = (e)=>img.setAttribute('src', e.target.result); |
| 26 | 27 | reader.readAsDataURL(blob); |
| 27 | 28 | } |
| 29 | + const btn = D.button("Cancel"); | |
| 30 | + D.append(dd, D.br(), btn); | |
| 31 | + btn.addEventListener('click', ()=>updateDropZoneContent(), false); | |
| 28 | 32 | }; |
| 29 | 33 | //////////////////////////////////////////////////////////// |
| 30 | 34 | // File drag/drop. |
| 31 | 35 | // Adapted from: https://stackoverflow.com/a/58677161 |
| 32 | 36 | const dropHighlight = BlobXferState.dropZone /* target zone */; |
| 33 | 37 |
| --- src/chat.js | |
| +++ src/chat.js | |
| @@ -14,19 +14,23 @@ | |
| 14 | data. */ |
| 15 | const updateDropZoneContent = function(blob){ |
| 16 | const bx = BlobXferState, dd = bx.dropDetails; |
| 17 | bx.blob = blob; |
| 18 | D.clearElement(dd); |
| 19 | D.append(dd, D.br(), "Name: ", blob.name, |
| 20 | D.br(), "Size: ",blob.size); |
| 21 | if(blob.type && blob.type.startsWith("image/")){ |
| 22 | const img = D.img(); |
| 23 | D.append(dd, D.br(), img); |
| 24 | const reader = new FileReader(); |
| 25 | reader.onload = (e)=>img.setAttribute('src', e.target.result); |
| 26 | reader.readAsDataURL(blob); |
| 27 | } |
| 28 | }; |
| 29 | //////////////////////////////////////////////////////////// |
| 30 | // File drag/drop. |
| 31 | // Adapted from: https://stackoverflow.com/a/58677161 |
| 32 | const dropHighlight = BlobXferState.dropZone /* target zone */; |
| 33 |
| --- src/chat.js | |
| +++ src/chat.js | |
| @@ -14,19 +14,23 @@ | |
| 14 | data. */ |
| 15 | const updateDropZoneContent = function(blob){ |
| 16 | const bx = BlobXferState, dd = bx.dropDetails; |
| 17 | bx.blob = blob; |
| 18 | D.clearElement(dd); |
| 19 | if(!blob) return; |
| 20 | D.append(dd, D.br(), "Name: ", blob.name, |
| 21 | D.br(), "Size: ",blob.size); |
| 22 | if(blob.type && blob.type.startsWith("image/")){ |
| 23 | const img = D.img(); |
| 24 | D.append(dd, D.br(), img); |
| 25 | const reader = new FileReader(); |
| 26 | reader.onload = (e)=>img.setAttribute('src', e.target.result); |
| 27 | reader.readAsDataURL(blob); |
| 28 | } |
| 29 | const btn = D.button("Cancel"); |
| 30 | D.append(dd, D.br(), btn); |
| 31 | btn.addEventListener('click', ()=>updateDropZoneContent(), false); |
| 32 | }; |
| 33 | //////////////////////////////////////////////////////////// |
| 34 | // File drag/drop. |
| 35 | // Adapted from: https://stackoverflow.com/a/58677161 |
| 36 | const dropHighlight = BlobXferState.dropZone /* target zone */; |
| 37 |