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 onDrop = useCallback(async (acceptedFiles: File[]) => {
console.log('onDrop called with files:', acceptedFiles);
console.log('Current targetFolder:', targetFolder);
console.log('Current markForScan:', markForScan);
setIsUploading(true);
const newProgress: UploadProgress[] = acceptedFiles.map(file => ({
fileName: file.name,
@ -113,15 +117,21 @@ export const MusicUpload: React.FC<MusicUploadProps> = ({ onUploadComplete }) =>
onUploadComplete?.(results);
}
}, [onUploadComplete, toast]);
}, [onUploadComplete, toast, targetFolder, markForScan]);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
onDrop,
accept: {
'audio/*': ['.mp3', '.wav', '.flac', '.aac', '.m4a', '.ogg', '.wma', '.opus'],
},
maxSize: 100 * 1024 * 1024, // 100MB
multiple: true,
onDropRejected: (rejectedFiles) => {
console.log('Files rejected:', rejectedFiles);
rejectedFiles.forEach(({ file, errors }) => {
console.error(`File ${file.name} rejected:`, errors);
});
},
});
// Load folders for dropdown
@ -197,6 +207,22 @@ export const MusicUpload: React.FC<MusicUploadProps> = ({ onUploadComplete }) =>
Add to "To Be Scanned"
</Checkbox>
</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
{...getRootProps()}
border="2px dashed"