kazuya-k-ishibashi/drop_text.html

## drop_text.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>index</title>
    <style>
      .main {
          width: 60em;
          height: 60em;
      }
      #progress {
          width: 100%;
          height: 1.5em;
          margin: .5em 0;
      }
      #progress>* {
          float: left;
      }
      #progress_bar {
          width: 25%;
          height: 100%;
      }
      #progress_message {
          height: 2em;
          margin: 0 1em;
      }
      #input {
          width: 100%;
          height: 100%;
      }
    </style>
  </head>
  <body>
    <main class="main">
      <div id="progress">
        <progress id="progress_bar" value="0"></progress>
        <div id="progress_message"></div>
      </div>
      <textarea id="input"></textarea>
    </main>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
          var progressBar = document.getElementById("progress_bar")
          var progressMessage = document.getElementById("progress_message")
          var input = document.getElementById("input")

          droppable({
              dropArea: input,
              onDrop: function(files) {
                  readFile({
                      file: files[0],
                      onLoad: function(text) {
                          input.value = text
                      },
                      onProgress(loadedSize, totalSize, rate) {
                          progressMessage.innerText = `${totalSize}/${totalSize} bytes (${rate}%)`

                          progressBar.max = totalSize
                          progressBar.value = loadedSize
                      }
                  })
              }
          })
      }, false)


      function droppable(arg) {
          var dropArea = arg.dropArea
          //  /* (Array<File>): void */) {
          var onDrop = arg.onDrop || function() {}

          if (!(dropArea instanceof HTMLElement)) {
              throw new TypeError()
          }

          dropArea.addEventListener("drop", function(event) {
              event.preventDefault()
              var files = event.dataTransfer.files
              onDrop(files)
          }, false)
      }

      function readFile(arg /* Object */) {
          var file = arg.file
          var charset = arg.charset || "utf-8"
          var onLoad = arg.onLoad || function(text) {
              // something
          }
          var onProgress = arg.onProgress || function(loadedSize, totalSize, rate) {
          }
          var onError = arg.onError || function(error) {
              if (error.code === error.NOT_READABLE_ERR) {
                  alert("ファイルの読み込みに失敗しました")
              } else {
                  var errorCode = error.code
                  alert("エラーが発生しました。  " + errorCode)
              }
          }

          var reader = new FileReader()
          reader.addEventListener("load", function(event) {
              var text = event.target.result
              onLoad(text)
          })
          reader.addEventListener("error", function(event) {
              onError(event.target.error)
          })
          reader.addEventListener("progress", function(event) {
              if (!event.lengthComputable) {
                  return
              }

              var loadedSize = event.loaded
              var totalSize = event.total
              var rate = (totalSize > 0)
                      ? (loadedSize * 100 / totalSize).toFixed(1)
                      : 100

              onProgress(loadedSize, totalSize, rate)
          })

          reader.readAsText(file, charset)
      }
    </script>
  </body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>index</title>
	<style>
	.main {
	width: 60em;
	height: 60em;
	}
	#progress {
	width: 100%;
	height: 1.5em;
	margin: .5em 0;
	}
	#progress>* {
	float: left;
	}
	#progress_bar {
	width: 25%;
	height: 100%;
	}
	#progress_message {
	height: 2em;
	margin: 0 1em;
	}
	#input {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<main class="main">
	<div id="progress">
	<progress id="progress_bar" value="0"></progress>
	<div id="progress_message"></div>
	</div>
	<textarea id="input"></textarea>
	</main>
	<script>
	document.addEventListener("DOMContentLoaded", function() {
	var progressBar = document.getElementById("progress_bar")
	var progressMessage = document.getElementById("progress_message")
	var input = document.getElementById("input")

	droppable({
	dropArea: input,
	onDrop: function(files) {
	readFile({
	file: files[0],
	onLoad: function(text) {
	input.value = text
	},
	onProgress(loadedSize, totalSize, rate) {
	progressMessage.innerText = `${totalSize}/${totalSize} bytes (${rate}%)`

	progressBar.max = totalSize
	progressBar.value = loadedSize
	}
	})
	}
	})
	}, false)


	function droppable(arg) {
	var dropArea = arg.dropArea
	// /* (Array<File>): void */) {
	var onDrop = arg.onDrop \|\| function() {}

	if (!(dropArea instanceof HTMLElement)) {
	throw new TypeError()
	}

	dropArea.addEventListener("drop", function(event) {
	event.preventDefault()
	var files = event.dataTransfer.files
	onDrop(files)
	}, false)
	}

	function readFile(arg /* Object */) {
	var file = arg.file
	var charset = arg.charset \|\| "utf-8"
	var onLoad = arg.onLoad \|\| function(text) {
	// something
	}
	var onProgress = arg.onProgress \|\| function(loadedSize, totalSize, rate) {
	}
	var onError = arg.onError \|\| function(error) {
	if (error.code === error.NOT_READABLE_ERR) {
	alert("ファイルの読み込みに失敗しました")
	} else {
	var errorCode = error.code
	alert("エラーが発生しました。 " + errorCode)
	}
	}

	var reader = new FileReader()
	reader.addEventListener("load", function(event) {
	var text = event.target.result
	onLoad(text)
	})
	reader.addEventListener("error", function(event) {
	onError(event.target.error)
	})
	reader.addEventListener("progress", function(event) {
	if (!event.lengthComputable) {
	return
	}

	var loadedSize = event.loaded
	var totalSize = event.total
	var rate = (totalSize > 0)
	? (loadedSize * 100 / totalSize).toFixed(1)
	: 100

	onProgress(loadedSize, totalSize, rate)
	})

	reader.readAsText(file, charset)
	}
	</script>
	</body>
	</html>