Handle Drag-N-Drop

nathangathright · Feb 14, 2024 · ea7da58 · ea7da58
1 parent 97359c7
commit ea7da58
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 28 deletions.
diff --git a/src/index.html b/src/index.html
@@ -9,21 +9,21 @@
 </head>
 <body
   class="font-inter text-base font-normal bg-slate-200 p-4 m-0 flex flex-col place-content-center place-items-center min-h-screen">
-    <form class="w-full max-w-3xl flex flex-col">
-      <h1 class="mt-3 text-3xl text-center font-extrabold tracking-tight text-slate-900">VTT Podcast Chapters</h1>
-      <p class="text-lg text-gray-700 text-center"><a id="home" href="/vttchapters">Upload a JSON file</a> or <a class="underline" href="/vttchapters?payload=chapters&url=https://raw.githubusercontent.com/Podcastindex-org/podcast-namespace/main/chapters/example.json">see an example</a></p>
-      <div id="uploader" class="mt-2 flex items-center justify-center w-full">
-        <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-40 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
-            <div class="flex flex-col items-center justify-center pt-5 pb-6">
-                <svg class="w-8 h-8 mb-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
-                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
-                </svg>
-                <p id="zonelabel" class="mb-2 text-sm text-gray-500"><span class="font-semibold">Click to upload</span> or drag and drop</p>
-            </div>
-            <input id="dropzone-file" type="file" class="hidden" accept=".json" />
-        </label>
+    <form class="w-full max-w-3xl flex flex-col space-y-4">
+      <div>
+        <h1 class="mt-3 text-3xl text-center font-extrabold tracking-tight text-slate-900">VTT Podcast Chapters</h1>
+        <p class="text-lg text-gray-700 text-center"><a id="home" href="/vttchapters">Upload a JSON file</a> or <a class="underline" href="/vttchapters?payload=chapters&url=https://raw.githubusercontent.com/Podcastindex-org/podcast-namespace/main/chapters/example.json">see an example</a></p>
       </div>
-      <div class="mt-6 w-full text-center">
+      <label id="dropzone" class="flex flex-col items-center justify-center w-full h-40 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
+        <div class="flex flex-col items-center justify-center pt-5 pb-6">
+            <svg class="w-8 h-8 mb-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
+            </svg>
+            <p id="zonelabel" class="mb-2 text-sm text-gray-500"><span class="font-semibold">Click to upload</span> or drag and drop</p>
+        </div>
+        <input id="dropzone-file" type="file" class="hidden" accept=".json" />
+      </label>
+      <div class="w-full text-center">
         <label class="text-sm font-medium text-gray-900">Select a payload type</a></label>
         <fieldset class="mt-2">
           <legend class="sr-only">Payload</legend>
@@ -39,7 +39,7 @@ <h1 class="mt-3 text-3xl text-center font-extrabold tracking-tight text-slate-90
           </div>
         </fieldset>
       </div>
-      <pre class="mt-6 flex overflow-auto rounded-md text-sm leading-5 text-white language-html bg-slate-900 whitespace-pre-wrap relative">
+      <pre class="flex overflow-auto rounded-md text-sm leading-5 text-white language-html bg-slate-900 whitespace-pre-wrap relative">
         <code id="output" class="p-3"></code>
         <a id="download" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm text-center font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 absolute right-3 top-3"></a>
       </pre>

diff --git a/src/script.js b/src/script.js
@@ -38,7 +38,6 @@ function generateVTT(fileContents) {
     output.textContent += 'NOTE\nThis file has been modified to remove chapters with "toc": false\n\n';
   }
 
-
   for (var i = 0; i < chapters.length; i++) {
     output.textContent += (i + 1) + '\n' + chapters[i].timestamp + '\n';
 
@@ -60,17 +59,15 @@ function generateVTT(fileContents) {
   a.textContent = `Download ${payload}.vtt`;
 }
 
-function processInput() {
-  // get value of selected payload radio button
-  var payload = document.querySelector('input[name="payload"]:checked').id;
+function processUpload() {
   if (document.getElementById('dropzone-file').files.length === 0) {
     return;
   }
 
-  var file = document.getElementById('dropzone-file').files[0];
+  var file = document.getElementById('dropzone-file').files[0] 
   var reader = new FileReader();
   reader.onload = function(progressEvent) {
-    generateVTT(this.result, payload);
+    generateVTT(this.result);
   };
   reader.readAsText(file);
 }
@@ -81,7 +78,6 @@ function requestURL(remoteURL){
   xhr.responseType = 'blob';
   xhr.onload = function() {
     if (this.status === 200) {
-      // pass filecontents to generateVTT
       var reader = new FileReader();
       reader.onload = function(progressEvent) {
         generateVTT(this.result);
@@ -101,24 +97,51 @@ if (payload) {
 }
 
 if (url) {
-  document.getElementById('uploader').style.display = 'none';
+  document.getElementById('dropzone').style.display = 'none';
   document.getElementById('home').classList.add('underline');
   requestURL(url);
 }
 
 document.getElementById('dropzone-file').onchange = function() {
-  processInput();
+  processUpload();
 };
 
-// Listen for changes to the payload radio buttons
 document.querySelectorAll('input[name="payload"]').forEach(function(radio) {
   radio.addEventListener('change', function() {
-    // check if any upload or url or nothing is selected
     if (url) {
       requestURL(url);
     }
     else if (document.getElementById('dropzone-file').files.length > 0) {
-      processInput();
+      processUpload();
     } 
   });
-});
+});
+
+let dropzone = document.getElementById('dropzone');
+
+['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+  dropzone.addEventListener(eventName, function(event){
+    event.preventDefault()
+    event.stopPropagation()
+  }, false)
+});
+
+['dragenter', 'dragover'].forEach(eventName => {
+  dropzone.addEventListener(eventName, dropzone.classList.add('highlight'), false)
+});
+
+['dragleave', 'drop'].forEach(eventName => {
+  dropzone.addEventListener(eventName, dropzone.classList.remove('highlight'), false)
+});
+
+dropzone.addEventListener('drop', function(event) {
+  document.getElementById('dropzone').style.display = 'none';
+  document.getElementById('home').classList.add('underline');
+
+  let file = event.dataTransfer.files[0]
+  let reader = new FileReader()
+  reader.onload = function(progressEvent) {
+    generateVTT(this.result);
+  }
+  reader.readAsText(file)
+}, false);