Last active
January 17, 2024 19:38
-
-
Save Shimilbi/b4fc1a075ab5a7aa05e64c517ce7d6bd to your computer and use it in GitHub Desktop.
Uses: https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.4.0/js/canvas-to-blob.min.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>File to text data (blob)</title> | |
| </head> | |
| <body center style="text-align:left;"> | |
| <h2>File to text data <code>(blob)</code></h2> | |
| <div id="local" style="display:inline; white-space:nowrap;"> | |
| <input type="file" id="loadFile" /> | |
| </div> | |
| <div id="distant" style="display:none; white-space:nowrap;"> | |
| <input type="url" id="loadUrl" placeholder="url" style="width:245px;" /> | |
| </div> | |
| <hr> | |
| <input hidden id="blob" /> | |
| <button id="changeMethod">Choisir un URL</button> | |
| <span id="copy" style="cursor:default; position;relative; float:right;" onmouseover="cue.innerHTML='<br>Copier'; this.style.margin='-3px -2px'; this.style.fontSize='1.2em'; this.style.textShadow='1px -1px 0 #767676, -1px 2px 1px #737272, -40px -40px 0px rgba(206,89,55,0)';" onmouseout="cue.innerHTML=''; this.style.margin='0 0'; this.style.fontSize='1em'; this.style.textShadow='none';" title="copy blob">📋</span> | |
| <cue style="position:absolute; right:-12px; bottom:-34px;"></cue> | |
| </body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.4.0/js/canvas-to-blob.min.js"></script> | |
| <script> | |
| const filePathContainer = document.querySelector("#filePath") | |
| const urlContainer = document.querySelector("input[type='url']") | |
| const blobContainer = document.querySelector("input#blob") | |
| const cue = document.body.querySelector('cue') | |
| document.querySelector("#loadUrl").ondrop = e => { | |
| e.target.value = e.target.value.trim() | |
| const isUrlInvalid = e.target.value === '' | |
| if (isUrlInvalid) return false | |
| let url = e.target.value | |
| var reader = new FileReader() | |
| reader.onload = function() { | |
| blobContainer.value = reader.result | |
| } | |
| reader.readAsDataURL(url) | |
| } | |
| document.querySelector("#loadUrl").onkeyup = e => { | |
| e.target.value = e.target.value.trim() | |
| const isUrlInvalid = e.target.value === '' | |
| if (isUrlInvalid) return false | |
| let url = e.target.value | |
| var request = new XMLHttpRequest() | |
| request.open('GET', url, true) | |
| request.responseType = 'blob' | |
| request.onload =()=> { | |
| var reader = new FileReader() | |
| reader.readAsDataURL(request.response) | |
| reader.onload =e2=> { | |
| blobContainer.value = e2.target.result | |
| } | |
| } | |
| request.send() | |
| } | |
| document.querySelector("#loadUrl").oninput = e => { | |
| e.target.value = e.target.value.trim() | |
| const isUrlInvalid = e.target.value === '' | |
| if (isUrlInvalid) return false | |
| let url = e.target.value | |
| var reader = new FileReader() | |
| reader.onload =()=> { | |
| blobContainer.value = reader.result | |
| } | |
| reader.readAsDataURL(url) | |
| } | |
| document.querySelector("#loadFile").onchange = e => { | |
| const isUrlInvalid = e.target.files < 1 | |
| if (isUrlInvalid) return false | |
| const file = e.target.files[0] | |
| let reader = new FileReader() | |
| reader.onload =()=> { | |
| blobContainer.value = reader.result | |
| } | |
| reader.readAsDataURL(file) | |
| return true | |
| } | |
| document.querySelector("#changeMethod").onclick =()=> { | |
| changeMethod.innerHTML = changeMethod.innerHTML.toUpperCase().includes("URL") ? "Choisir un fichier" : "Choisir un URL" | |
| const tmp = document.querySelector("#local").style.display | |
| document.querySelector("#local").style.display = document.querySelector("#distant").style.display | |
| document.querySelector("#distant").style.display = tmp | |
| } | |
| document.querySelector("#copy").onclick = () => { | |
| navigator.clipboard.writeText(blobContainer.value) | |
| cue.innerHTML = "Copied!" | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Unfinished: conversion from online URL doesn't work yet.