feat: drag and drop

src/components/input/BaseFileInput.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useContext, useEffect } from 'react';
+import React, { ReactNode, useContext, useEffect, useState } from 'react';
 import { Box, useTheme } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import InputHeader from '../InputHeader';
@@ -25,7 +25,8 @@ export default function BaseFileInput({
   children,
   type
 }: BaseFileInputComponentProps) {
-  const [preview, setPreview] = React.useState<string | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState<boolean>(false);
   const theme = useTheme();
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   const { showSnackBar } = useContext(CustomSnackBarContext);
@@ -49,6 +50,7 @@ export default function BaseFileInput({
   const handleImportClick = () => {
     fileInputRef.current?.click();
   };
+
   const handleCopy = () => {
     if (value) {
       const blob = new Blob([value], { type: value.type });
@@ -63,6 +65,52 @@ export default function BaseFileInput({
     }
   };
 
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(false);
+
+    if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
+      const file = event.dataTransfer.files[0];
+
+      // Check if file type is acceptable
+      const isAcceptable = accept.some((acceptType) => {
+        // Handle wildcards like "image/*"
+        if (acceptType.endsWith('/*')) {
+          const category = acceptType.split('/')[0];
+          return file.type.startsWith(category);
+        }
+        return acceptType === file.type;
+      });
+
+      if (isAcceptable) {
+        onChange(file);
+      } else {
+        showSnackBar(
+          `Invalid file type. Please use ${accept.join(', ')}`,
+          'error'
+        );
+      }
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(false);
+  };
+
   useEffect(() => {
     const handlePaste = (event: ClipboardEvent) => {
       const clipboardItems = event.clipboardData?.items ?? [];
@@ -95,8 +143,15 @@ export default function BaseFileInput({
           borderRadius: 2,
           boxShadow: '5',
           bgcolor: 'background.paper',
-          position: 'relative'
+          position: 'relative',
+          borderColor: isDragging ? theme.palette.primary.main : undefined,
+          borderWidth: isDragging ? 2 : 1,
+          borderStyle: isDragging ? 'dashed' : 'solid'
         }}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
       >
         {preview ? (
           <Box
@@ -127,17 +182,27 @@ export default function BaseFileInput({
               cursor: 'pointer'
             }}
           >
-            <Typography
+            {isDragging ? (
-              color={
+              <Typography
-                theme.palette.mode === 'dark'
+                color={theme.palette.primary.main}
-                  ? theme.palette.grey['300']
+                variant="h6"
-                  : theme.palette.grey['600']
+                align="center"
-              }
+              >
-            >
+                Drop your {type} here
-              Click here to select a {type} from your device, press Ctrl+V to
+              </Typography>
-              use a {type} from your clipboard, drag and drop a file from
+            ) : (
-              desktop
+              <Typography
-            </Typography>
+                color={
+                  theme.palette.mode === 'dark'
+                    ? theme.palette.grey['300']
+                    : theme.palette.grey['600']
+                }
+              >
+                Click here to select a {type} from your device, press Ctrl+V to
+                use a {type} from your clipboard, or drag and drop a file from
+                desktop
+              </Typography>
+            )}
           </Box>
         )}
       </Box>