master/rekordbox-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(upload): add debugging and fix file selection issues - add console logging for onDrop, fix dependency array, add file rejection handling and visual feedback

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-14 13:15:53 +02:00
parent 675c1f8d8f
commit cf39a3c2b1
1 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/frontend/src/components/MusicUpload.tsx
View File

@ -41,6 +41,10 @@ export const MusicUpload: React.FC<MusicUploadProps> = ({ onUploadComplete }) =>
const toast = useToast(); const toast = useToast();
const onDrop = useCallback(async (acceptedFiles: File[]) => { const onDrop = useCallback(async (acceptedFiles: File[]) => {
console.log('onDrop called with files:', acceptedFiles);
console.log('Current targetFolder:', targetFolder);
console.log('Current markForScan:', markForScan);
setIsUploading(true); setIsUploading(true);
const newProgress: UploadProgress[] = acceptedFiles.map(file => ({ const newProgress: UploadProgress[] = acceptedFiles.map(file => ({
fileName: file.name, fileName: file.name,
@ -113,15 +117,21 @@ export const MusicUpload: React.FC<MusicUploadProps> = ({ onUploadComplete }) =>
onUploadComplete?.(results); onUploadComplete?.(results);
} }
}, [onUploadComplete, toast]); }, [onUploadComplete, toast, targetFolder, markForScan]);
const { getRootProps, getInputProps, isDragActive } = useDropzone({ const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
onDrop, onDrop,
accept: { accept: {
'audio/*': ['.mp3', '.wav', '.flac', '.aac', '.m4a', '.ogg', '.wma', '.opus'], 'audio/*': ['.mp3', '.wav', '.flac', '.aac', '.m4a', '.ogg', '.wma', '.opus'],
}, },
maxSize: 100 * 1024 * 1024, // 100MB maxSize: 100 * 1024 * 1024, // 100MB
multiple: true, multiple: true,
onDropRejected: (rejectedFiles) => {
console.log('Files rejected:', rejectedFiles);
rejectedFiles.forEach(({ file, errors }) => {
console.error(`File ${file.name} rejected:`, errors);
});
},
}); });
// Load folders for dropdown // Load folders for dropdown
@ -197,6 +207,22 @@ export const MusicUpload: React.FC<MusicUploadProps> = ({ onUploadComplete }) =>
Add to "To Be Scanned" Add to "To Be Scanned"
</Checkbox> </Checkbox>
</Box> </Box>
{fileRejections.length > 0 && (
<Alert status="error" bg="red.900" borderColor="red.700" color="red.100">
<AlertIcon color="red.300" />
<Box>
<AlertTitle color="red.100">File Rejected</AlertTitle>
<AlertDescription color="red.200">
{fileRejections.map(({ file, errors }) => (
<Text key={file.name}>
{file.name}: {errors.map(e => e.message).join(', ')}
</Text>
))}
</AlertDescription>
</Box>
</Alert>
)}
<Box <Box
{...getRootProps()} {...getRootProps()}
border="2px dashed" border="2px dashed"