feat: drag and drop

package.json

@@ -11,6 +11,8 @@
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",

src/components/FileUpload.tsx

@@ -5,15 +5,15 @@ import { Track } from '../../types/types';
 interface FileUploadProps {
     onUploadSuccess: () => void;
 }
-
-    const FileUpload: React.FC<FileUploadProps> = ({ onUploadSuccess }) => {
-        const [uploading, setUploading] = useState(false);
+export const extractTitleFromFileName = (fileName: string) => {
+    // Remove file extension and replace underscores/dashes with spaces
+    return fileName.replace(/\.[^/.]+$/, '').replace(/[_-]/g, ' ');
+};
+const FileUpload: React.FC<FileUploadProps> = ({ onUploadSuccess }) => {
+    const [uploading, setUploading] = useState(false);
     const { uploadTrack } = useTracks(); // Use the `useTracks` hook
 
-    const extractTitleFromFileName = (fileName: string) => {
-        // Remove file extension and replace underscores/dashes with spaces
-        return fileName.replace(/\.[^/.]+$/, '').replace(/[_-]/g, ' ');
-    };
+
 
     const handleFileUpload = async (file: File) => {
         setUploading(true);
@@ -56,7 +56,7 @@ interface FileUploadProps {
                 </label>
             </div>
         </div>
-    );       
+    );
 };
 
 export default FileUpload;

src/components/layout/DragAndDropWrapper.tsx

@@ -0,0 +1,95 @@
+import React, {FC, useLayoutEffect, useRef, useState} from "react"
+import {FaUpload} from "react-icons/fa";
+import {extractTitleFromFileName} from "../FileUpload";
+import {useTracks} from "@/hooks/UseTracks";
+import {createPortal} from "react-dom";
+
+interface IProps {
+
+}
+
+const DragAndDropWrapper: FC<IProps> = () => {
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const [showModal, setShowModal] = useState(false);
+    const [uploading, setUploading] = useState(false)
+    const {uploadTrack, fetchTracks} = useTracks();
+    const [portal, setPortal] = useState<Element | null>(null);
+    const onDragEnter = (e: DragEvent) => {
+        e.preventDefault()
+        setShowModal(true)
+    }
+    const onDragLeave = () => setShowModal(false)
+    const onDrop = async (event: DragEvent) => {
+        event.preventDefault();
+        setShowModal(true)
+        const files = event.dataTransfer?.files || null;
+        const itemLength = event.dataTransfer?.items.length || 0;
+        setShowModal(true)
+        if (itemLength > 0) {
+            if (fileInputRef.current?.files) {
+                fileInputRef.current.files = files
+                setUploading(true);
+                for (let i = 0; i < itemLength; i++) {
+                    const file: File | undefined = files?.[i]
+                    if (!file) continue;
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    formData.append('name', extractTitleFromFileName(file.name));
+                    try {
+                        const success = await uploadTrack(formData); // Use the uploadTrack function from the hook
+                        if (success) {
+                            console.log('Track uploaded successfully');
+                            await fetchTracks();
+                            // Optionally, refetch tracks to update the list
+                        } else {
+                            console.error('Track upload failed with no error thrown');
+                        }
+
+                    } catch (error) {
+                        console.error('Error during file upload:', error);
+                    }
+                }
+                setUploading(false);
+            }
+        }
+        setShowModal(false)
+
+    };
+    useLayoutEffect(() => {
+        setPortal(document.body)
+        window.addEventListener('drop', onDrop)
+        window.addEventListener('dragover', onDragEnter)
+        window.addEventListener('dragenter', onDragEnter)
+        window.addEventListener('dragleave', onDragLeave)
+        return () => {
+            window.removeEventListener('drop', onDrop)
+            window.removeEventListener('dragover', onDragEnter)
+            window.removeEventListener('dragenter', onDragEnter)
+            window.removeEventListener('dragleave', onDragLeave)
+        }
+    }, [])
+    return portal && createPortal(
+        <React.Fragment>
+            <div
+                ref={wrapperRef}
+                className={`grid place-content-center fixed inset-0 w-full h-full ${showModal || uploading ? "bg-black/20 pointer-events-auto" : 'pointer-events-none'}`}
+            >
+                <input
+                    ref={fileInputRef}
+                    className="inset-0 absolute opacity-0 w-full h-full hidden"
+                    type="file"
+                    accept="image/*"
+                />
+            </div>
+            {(showModal || uploading) && (
+                <div
+                    className="border-2 border-dotted p-8 flex m-auto -z-10 flex-col space-y-4 items-center fixed inset-0 w-fit h-fit">
+                    <FaUpload/>
+                    <span>{uploading ? "File uploading" : "Drop file To upload"}</span>
+                </div>
+            )}
+        </React.Fragment>
+        , portal)
+}
+export default DragAndDropWrapper

src/pages/index.tsx

@@ -10,6 +10,7 @@ import Modal from '@/components/Modal';
 import NavBar from '@/components/layout/NavBar';
 import { useRouter } from 'next/router';
 import { useTracks } from '@/hooks/UseTracks';
+import DragAndDropWrapper from '@/components/layout/DragAndDropWrapper';
 
 const HomePage: React.FC = () => {
   const [error, setError] = useState('');
@@ -79,6 +80,10 @@ const HomePage: React.FC = () => {
         </Head>
 
         <Header />
+
+
+        <DragAndDropWrapper />
+
         <MainContent error={error}/>
       </div>