Upload: fix mp3 greyed-out in mobile file picker + error feedback

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>
This commit is contained in:
lucianoandClaude Opus 4.8 committed 2026-06-30 10:35:38 +02:00
1 parent c8d12d789f
commit 75627242fe
2 files changed
+13 -4

No files matched your search

+3 -1
View File
@@ -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>
+10 -3
View File
@@ -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();