From 75627242fe79dce1ac4fde5e22a6428f5e14d08e Mon Sep 17 00:00:00 2001
From: luciano <info@zappacosta.eu>
Date: Tue, 30 Jun 2026 10:35:38 +0200
Subject: [PATCH] Upload: fix mp3 greyed-out in mobile file picker + error
 feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Android/iOS Chrome grey out audio files when the document provider reports
a generic MIME (e.g. application/octet-stream for mp3 in Downloads), so
accept="audio/*,video/*" alone hid them. Add explicit extension tokens
(.mp3, .m4a, …) which mobile pickers honour by filename, un-greying them.
Also surface upload success/failure on the button instead of silently
resetting.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 public/index.html    |  4 +++-
 public/js/control.js | 13 ++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index 1d50dc9..13f08a0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -35,7 +35,9 @@
       <div class="row">
         <button id="media-refresh">↻ Aggiorna</button>
         <button id="media-upload-btn">⬆️ Carica file</button>
-        <input id="media-upload" type="file" accept="audio/*,video/*" multiple hidden />
+        <!-- Explicit extensions first: mobile pickers (Android/iOS Chrome) grey out
+             mp3 etc. when the provider reports a generic MIME; extension tokens fix it. -->
+        <input id="media-upload" type="file" accept=".mp3,.m4a,.aac,.wav,.flac,.ogg,.opus,.aif,.aiff,.mp4,.mov,.m4v,.webm,.mkv,audio/*,video/*" multiple hidden />
       </div>
       <div id="nowbar" class="nowbar hidden">
         <div class="np-top"><span id="np-name">—</span><span id="np-time">0:00 / 0:00</span></div>
diff --git a/public/js/control.js b/public/js/control.js
index 8d1d36e..bd01b3e 100644
--- a/public/js/control.js
+++ b/public/js/control.js
@@ -223,9 +223,16 @@ $('#seek').addEventListener('input', (e) => { if (curDur > 0) send({ type: 'seek
 $('#media-refresh').addEventListener('click', loadLibrary);
 $('#media-upload-btn').addEventListener('click', () => $('#media-upload').click());
 $('#media-upload').addEventListener('change', (e) => {
-  const fd = new FormData(); [...e.target.files].forEach((f) => fd.append('files', f));
-  $('#media-upload-btn').textContent = '⏳ Carico…';
-  fetch('/api/upload', { method: 'POST', body: fd }).then(() => { e.target.value = ''; $('#media-upload-btn').textContent = '⬆️ Carica file'; loadLibrary(); });
+  const files = [...e.target.files];
+  if (!files.length) return;
+  const fd = new FormData(); files.forEach((f) => fd.append('files', f));
+  const btn = $('#media-upload-btn');
+  btn.textContent = '⏳ Carico ' + files.length + '…';
+  const reset = (txt) => { e.target.value = ''; btn.textContent = txt; setTimeout(() => { btn.textContent = '⬆️ Carica file'; }, 2500); };
+  fetch('/api/upload', { method: 'POST', body: fd })
+    .then((r) => r.ok ? r.json() : Promise.reject(new Error('HTTP ' + r.status)))
+    .then((res) => { reset('✅ ' + (res && res.count || files.length) + ' caricati'); loadLibrary(); })
+    .catch((err) => { reset('❌ Errore: ' + err.message); });
 });
 loadLibrary();