Media progressive enhancement: drag and drop to fill regular file inp…

…ut (fixed as prettier targets es5)
vincent-peugnet · Oct 16, 2024 · a0e055d · a0e055d
1 parent 69a3f84
commit a0e055d
Showing 1 changed file with 34 additions and 21 deletions.
diff --git a/src/media.js b/src/media.js
@@ -11,27 +11,40 @@ window.addEventListener('load', () => {
 const fileInput = document.getElementById('file');
 const fileMenu = fileInput.closest('details');
 
-'drag dragstart dragend dragover dragenter dragleave drop'.split(' ').forEach(function(listener){
-    document.body.addEventListener(listener,function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-    },false);
-});
+'drag dragstart dragend dragover dragenter dragleave drop'
+    .split(' ')
+    .forEach(function(listener) {
+        document.body.addEventListener(
+            listener,
+            function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+            },
+            false
+        );
+    });
 
-'dragover dragenter'.split(' ').forEach(function(listener){      
-    document.body.addEventListener(listener,function(e) {
-        fileMenu.setAttribute("open", true);
-    },false);
+'dragover dragenter'.split(' ').forEach(function(listener) {
+    document.body.addEventListener(
+        listener,
+        function(e) {
+            fileMenu.setAttribute('open', true);
+        },
+        false
+    );
 });
 
-document.body.addEventListener('drop',function(e) {
-    const files = e.dataTransfer.files;
-    const info = document.createElement("p");
-    info.className = "dropped-files-info";
-    for(const f of files){ 
-        info.innerHTML += `<span>${f.name }</span> `; 
-    } 
-    fileInput.insertAdjacentElement("afterend", info);
-    fileInput.files = files;  
-}, false);
-
+document.body.addEventListener(
+    'drop',
+    function(e) {
+        const files = e.dataTransfer.files;
+        const info = document.createElement('p');
+        info.className = 'dropped-files-info';
+        for (const f of files) {
+            info.innerHTML += `<span>${f.name}</span> `;
+        }
+        fileInput.insertAdjacentElement('afterend', info);
+        fileInput.files = files;
+    },
+    false
+);