JSFiddle - React, Tailwind, and code Playground

by nathan

HTML

<nav>
  
</nav>
<section id="tile-container">
  <div id="drag-message">
    Drop files here.
  </div>
</section>
<template id="tile">
  <article class="editing">
    <div class="tile-name editable" contenteditable>
      
    </div>
    <audio volume="1.0" src=""></audio>
  </article>
</template>

JavaScript

(function () {

	const tileTemplate = document.querySelector("#tile");
  const tileContainer = document.querySelector("#tile-container");
  const supportedMime = [
  	"audio/webm",
    "audio/ogg",
    "audio/ogg; codecs=opus",
    "audio/mpeg",
    "audio/wave",
		"audio/wav",
		"audio/x-wav",
		"audio/x-pn-wav",
    "audio/flac",
    "audio/x-flac"
  ];
  
  document.addEventListener("dragover", (event) => {
  	console.log("dragging");
  	tileContainer.classList.add("dragging");
  });
  document.addEventListener("dragend", (event) => {
  	tileContainer.classList.remove("dragging");
  });
  document.addEventListener("drop", (event) => {
  	console.log("drop");
    event.preventDefault();
    if (event.dataTransfer.items) {
    	Array.prototype.forEach.call(event.dataTransfer.items, (item) => {
      	if (item.kind !== "file") {
        	return;
        }
        const file = item.getAsFile();
        if (!supportedMime.contains(file.type)) {
        	return;
        }
        const newTile = document.importNode(articleTemplate.content, true);
        tileContainer.appendChild(newTile);
        const nameElement = newTile.querySelector(".tile-name");
        nameElement.textContent = file.name;
        nameElement.focus();
        newTile.querySelector("audio").file = file;
      });
    }
  });

}());