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:
1 parent
c8d12d789f
commit
75627242fe
2 files changed
+13
-4
No files matched your search
+3
-1
@@ -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
@@ -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();
|
||||
|
||||
|
||||
Reference in new issue
Block a user