kazuya-k-ishibashi/drop_image.html

## drop_image.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>drop image</title>
    <style>
      /* dropエリアのwidth, heightを確保しておかないとdropイベントが動かない(当然ながら) */
      body {
        width: 60em;
        height: 48em;
      }
      .gallery {
        width: 32em;
        float: left;
      }
      .gallery img {
        max-width: 32em;
        margin: auto;
      }
      .properties {
        float: left;
      }
    </style>
  </head>
  <body id="drappable" class="drappable">
    <div>
      <button type="button" id="clear-button">clear</button>
    </div>
    <div id="gallery" class="gallery"></div>
    <div id="properties" class="properties"></div>
  </body>
  <script>

    const $clearButton = document.getElementById("clear-button")
    const $drappable = document.getElementById("drappable")
    const $gallery = document.getElementById("gallery")
    const $properties = document.getElementById("properties")


    // dragenterとdragoverをpreventDefaultしないとdropイベントが動かない
    $drappable.addEventListener("dragenter", event => {
        event.preventDefault()
        event.stopPropagation()
    }, false)
    $drappable.addEventListener("dragover", event => {
        event.preventDefault()
        event.stopPropagation()
    }, false)
    $drappable.addEventListener("drop", event => {
        event.preventDefault()
        event.stopPropagation()

        const files = Array.from(event.dataTransfer.files)
        files.filter(file => file.type.match(/image.*/))
            .forEach((file, index) => {
                const reader = new FileReader()
                reader.addEventListener("load", () => {
                    const binary = reader.result
                    const $img = new Image()
                    $gallery.appendChild($img)
                    $img.addEventListener("load", () => {
                        $properties.appendChild(createPropTable({
                            filename: file.name,
                            filesize: file.size,
                            binary: binary,
                            width: $img.naturalWidth,
                            height: $img.naturalHeight,
                        }))
                    })
                    $img.src = binary
                })
                reader.readAsDataURL(file)
            })
    }, false)
    function createPropTable(prop) {
        const $table = document.createElement("table")
        const $tbody = document.createElement("tbody")

        const $trFilename = document.createElement("tr")
        const $thFilename = document.createElement("th")
        $thFilename.innerText = "filename"
        const $tdFilename = document.createElement("td")
        $tdFilename.innerText = prop.filename
        $trFilename.appendChild($thFilename)
        $trFilename.appendChild($tdFilename)
        $tbody.appendChild($trFilename)

        const $trFilesize = document.createElement("tr")
        const $thFilesize = document.createElement("th")
        $thFilesize.innerText = "filesize"
        const $tdFilesize = document.createElement("td")
        $tdFilesize.innerText = prop.filesize + " byte"
        $trFilesize.appendChild($thFilesize)
        $trFilesize.appendChild($tdFilesize)
        $tbody.appendChild($trFilesize)

        const $trWidth = document.createElement("tr")
        const $thWidth = document.createElement("th")
        $thWidth.innerText = "width"
        const $tdWidth = document.createElement("td")
        $tdWidth.innerText = prop.width + " px"
        $trWidth.appendChild($thWidth)
        $trWidth.appendChild($tdWidth)
        $tbody.appendChild($trWidth)

        const $trHeight = document.createElement("tr")
        const $thHeight = document.createElement("th")
        $thHeight.innerText = "height"
        const $tdHeight = document.createElement("td")
        $tdHeight.innerText = prop.height + " px"
        $trHeight.appendChild($thHeight)
        $trHeight.appendChild($tdHeight)
        $tbody.appendChild($trHeight)

        $table.appendChild($tbody)
        return $table
    }

    $clearButton.addEventListener("click", () => {
        $gallery.innerHTML = ""
        $properties.innerHTML = ""
    })
  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>drop image</title>
	<style>
	/* dropエリアのwidth, heightを確保しておかないとdropイベントが動かない(当然ながら) */
	body {
	width: 60em;
	height: 48em;
	}
	.gallery {
	width: 32em;
	float: left;
	}
	.gallery img {
	max-width: 32em;
	margin: auto;
	}
	.properties {
	float: left;
	}
	</style>
	</head>
	<body id="drappable" class="drappable">
	<div>
	<button type="button" id="clear-button">clear</button>
	</div>
	<div id="gallery" class="gallery"></div>
	<div id="properties" class="properties"></div>
	</body>
	<script>

	const $clearButton = document.getElementById("clear-button")
	const $drappable = document.getElementById("drappable")
	const $gallery = document.getElementById("gallery")
	const $properties = document.getElementById("properties")


	// dragenterとdragoverをpreventDefaultしないとdropイベントが動かない
	$drappable.addEventListener("dragenter", event => {
	event.preventDefault()
	event.stopPropagation()
	}, false)
	$drappable.addEventListener("dragover", event => {
	event.preventDefault()
	event.stopPropagation()
	}, false)
	$drappable.addEventListener("drop", event => {
	event.preventDefault()
	event.stopPropagation()

	const files = Array.from(event.dataTransfer.files)
	files.filter(file => file.type.match(/image.*/))
	.forEach((file, index) => {
	const reader = new FileReader()
	reader.addEventListener("load", () => {
	const binary = reader.result
	const $img = new Image()
	$gallery.appendChild($img)
	$img.addEventListener("load", () => {
	$properties.appendChild(createPropTable({
	filename: file.name,
	filesize: file.size,
	binary: binary,
	width: $img.naturalWidth,
	height: $img.naturalHeight,
	}))
	})
	$img.src = binary
	})
	reader.readAsDataURL(file)
	})
	}, false)
	function createPropTable(prop) {
	const $table = document.createElement("table")
	const $tbody = document.createElement("tbody")

	const $trFilename = document.createElement("tr")
	const $thFilename = document.createElement("th")
	$thFilename.innerText = "filename"
	const $tdFilename = document.createElement("td")
	$tdFilename.innerText = prop.filename
	$trFilename.appendChild($thFilename)
	$trFilename.appendChild($tdFilename)
	$tbody.appendChild($trFilename)

	const $trFilesize = document.createElement("tr")
	const $thFilesize = document.createElement("th")
	$thFilesize.innerText = "filesize"
	const $tdFilesize = document.createElement("td")
	$tdFilesize.innerText = prop.filesize + " byte"
	$trFilesize.appendChild($thFilesize)
	$trFilesize.appendChild($tdFilesize)
	$tbody.appendChild($trFilesize)

	const $trWidth = document.createElement("tr")
	const $thWidth = document.createElement("th")
	$thWidth.innerText = "width"
	const $tdWidth = document.createElement("td")
	$tdWidth.innerText = prop.width + " px"
	$trWidth.appendChild($thWidth)
	$trWidth.appendChild($tdWidth)
	$tbody.appendChild($trWidth)

	const $trHeight = document.createElement("tr")
	const $thHeight = document.createElement("th")
	$thHeight.innerText = "height"
	const $tdHeight = document.createElement("td")
	$tdHeight.innerText = prop.height + " px"
	$trHeight.appendChild($thHeight)
	$trHeight.appendChild($tdHeight)
	$tbody.appendChild($trHeight)

	$table.appendChild($tbody)
	return $table
	}

	$clearButton.addEventListener("click", () => {
	$gallery.innerHTML = ""
	$properties.innerHTML = ""
	})
	</script>
	</html>