root/jukebox-vibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Nightly: Drag & Drop Upload im Header (Admin) + Server-Upload-Endpoint (/api/upload, MP3/WAV)

Browse source
This commit is contained in:
vibe-bot 2025-08-10 01:47:17 +02:00
parent c1f4d0f3a0
commit 9e7b572feb
3 changed files with 60 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

15
web/src/App.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import { fetchChannels, fetchSounds, playSound, setVolumeLive, getVolume, adminStatus, adminLogin, adminLogout, adminDelete, adminRename, playUrl, fetchCategories, createCategory, assignCategories, clearBadges, updateCategory, deleteCategory, partyStart, partyStop, subscribeEvents } from './api';
import { fetchChannels, fetchSounds, playSound, setVolumeLive, getVolume, adminStatus, adminLogin, adminLogout, adminDelete, adminRename, playUrl, fetchCategories, createCategory, assignCategories, clearBadges, updateCategory, deleteCategory, partyStart, partyStop, subscribeEvents, uploadFile } from './api';
import type { VoiceChannelInfo, Sound, Category } from './types';
import { getCookie, setCookie } from './cookies';
@ -299,7 +299,18 @@ export default function App() {
<div className="broccoli">🥦</div>
</>
)}
<header className="flex items-center justify-between p-6">
<header className="flex items-center justify-between p-6" onDragOver={(e)=>{ e.preventDefault(); }} onDrop={async (e)=>{
try{
e.preventDefault();
if(!isAdmin){ setError('Login required for upload'); return; }
const files = Array.from(e.dataTransfer?.files || []).filter(f=>/\.(mp3|wav)$/i.test(f.name));
if(files.length===0){ setInfo('Drop MP3/WAV files to upload'); return; }
for(const f of files){ await uploadFile(f); }
setInfo(`${files.length} file(s) uploaded`);
const resp = await fetchSounds(query, activeFolder === '__favs__' ? '__all__' : activeFolder, activeCategoryId || undefined);
setSounds(resp.items); setTotal(resp.total); setFolders(resp.folders);
}catch(err:any){ setError(err?.message||'Upload failed'); setInfo(null); }
}}>
<div className="flex items-center">
<div>
<h1 className="text-4xl font-bold">

16
web/src/api.ts
View file

@ -184,6 +184,22 @@ export async function playUrl(url: string, guildId: string, channelId: string, v
}
}
export async function uploadFile(file: File, folder?: string) {
const form = new FormData();
form.append('file', file);
if (folder) form.append('folder', folder);
const res = await fetch(`${API_BASE}/upload`, {
method: 'POST',
credentials: 'include',
body: form
});
if (!res.ok) {
const data = await res.json().catch(()=>({}));
throw new Error(data?.error || 'Upload failed');
}
return res.json();
}