From 7ebb5ce8ef276e6d23d818c216be6ef2974369cc Mon Sep 17 00:00:00 2001 From: erdgeist Date: Thu, 23 Jul 2026 19:46:59 +0200 Subject: Turn the asset upload forms into file drop targets Dropped files land in the existing file input and submit through the unchanged form. An empty name field is prefilled from the basename. --- public/javascripts/admin_interface.js | 38 +++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) (limited to 'public/javascripts') diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js index 5514f3b3..284d2b72 100644 --- a/public/javascripts/admin_interface.js +++ b/public/javascripts/admin_interface.js @@ -85,6 +85,44 @@ $(document).ready(function () { desktop_mq.addEventListener('change', sync_metadata); } + var dropzone = document.getElementById('asset_dropzone'); + if (dropzone) { + var input = dropzone.querySelector('input[type=file]'); + + // Without these, a drop that misses the zone navigates the browser + // to the file, losing the half-filled form. + ['dragover', 'drop'].forEach(function(ev) { + window.addEventListener(ev, function(e) { e.preventDefault(); }); + }); + + ['dragenter', 'dragover'].forEach(function(ev) { + dropzone.addEventListener(ev, function(e) { + e.preventDefault(); dropzone.classList.add('dragging'); + }); + }); + ['dragleave', 'drop'].forEach(function(ev) { + dropzone.addEventListener(ev, function(e) { + e.preventDefault(); dropzone.classList.remove('dragging'); + }); + }); + + dropzone.addEventListener('drop', function(e) { + if (!e.dataTransfer.files.length) return; + var dt = new DataTransfer(); + dt.items.add(e.dataTransfer.files[0]); + input.files = dt.files; + input.dispatchEvent(new Event('change', { bubbles: true })); + }); + + input.addEventListener('change', function() { + var name_field = document.getElementById('asset_name'); + if (input.files.length && name_field && name_field.value === '') { + name_field.value = input.files[0].name.replace(/\.[^.]+$/, ''); + } + }); + } + + jQuery.ajaxSetup({ 'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript");} }); -- cgit v1.3