skeleton of drag and drop

audio-service/metadata.json

@@ -19,7 +19,7 @@
                 "name": "Pee pee poo poo",
                 "playbackType": "playStop",
                 "startTime": 27.587412587412587,
-                "volume": 0.69
+                "volume": 1
             },
             {
                 "endTime": 27.516843118383072,
@@ -27,7 +27,7 @@
                 "name": "Clip 20260220_200442",
                 "playbackType": "playOverlap",
                 "startTime": 25.120307988450435,
-                "volume": 0.41
+                "volume": 1
             }
         ]
     }

electron-ui/src/renderer/components/ClipList.tsx

@@ -31,6 +31,33 @@ export default function ClipList({ collection }: ClipListProps) {
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
   );
 
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    console.log('Files dropped:', event.dataTransfer.files);
+    const files = Array.from(event.dataTransfer.files).filter((file) =>
+      file.type.startsWith('audio/'),
+    );
+    if (files.length > 0) {
+      const formData = new FormData();
+      files.forEach((file) => formData.append('files', file));
+
+      // todo send the file to the backend and add to the collection
+
+      // fetch('http://localhost:5010/file/upload', {
+      //   method: 'POST',
+      //   body: formData,
+      // })
+      //   .then((res) => res.json())
+      //   .catch((err) => console.error('Error uploading files:', err));
+      // Implement your onDrop logic here
+      // onDrop(files, selectedCollection);
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+  };
+
   async function handleDragEnd(event: any) {
     const { active, over } = event;
     if (active.id !== over?.id) {
@@ -145,7 +172,11 @@ export default function ClipList({ collection }: ClipListProps) {
   }
 
   return (
-    <div className="min-h-full flex flex-col justify-start bg-midnight text-offwhite">
+    <div
+      className="min-h-full flex flex-col justify-start bg-midnight text-offwhite"
+      onDrop={handleDrop}
+      onDragOver={handleDragOver}
+    >
       <DndContext
         sensors={sensors}
         collisionDetection={closestCenter}