Shimilbi/File to text data (blob) Converter.html

## File to text data (blob) Converter.html
<!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>
	<!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>