Add drag and drop feature

Author: cp-dharti-r

README.md

@@ -2,21 +2,13 @@
 
 A versatile and user-friendly file management system built with React, Next.js and TypeScript that allows for single and multiple file uploading with a preview feature. It allows you to select files and preview them, returning an array of selected files. You can provide custom design and override classes for your file component.
 
-Checkout the live demo on, <br />
-[![codesandbox.io](https://codesandbox.io/favicon.ico)](https://codesandbox.io/p/sandbox/cranky-breeze-r4hht7?file=%2Fsrc%2Fmain.js)
-
 ## Table of Contents
 
 - [Features](#features)
 - [Getting Started](#getting-started)
   - [Prerequisites](#prerequisites)
   - [Installation](#installation)
 - [Usage](#usage)
-- [Examples](#examples)
-  - [Square View](#square-view)
-  - [Horizontal Long Square View](#horizontal-long-square-view)
-  - [Circular View](#circular-view)
-  - [Over-ride CSS](#over-ride-css)
 - [Contributing](#contributing)
 - [License](#license)
 - [Contact Information](#contact-information)
@@ -211,10 +203,6 @@ return (
 
 - Also, you can over-ride all the classes for changing the UI as per your requirement.
 
-## Examples
-
-We are providing some examples with design. so, you can easily take it and use it in your project.
-
 ### Over-ride CSS
 
 For over-riding the design of default buttons, you can over-ride it's CSS by class name. <br>

package.json

@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "build-css": "tailwindcss -i ./src/app/globals.css -o ./dist/css/output.css --minify && cp -i ./src/app/style.scss -o ./dist/css/style.scss --minify"
+    "build-css": "tailwindcss -i ./src/app/globals.css -o ./dist/css/output.css --minify && cp ./src/app/style.scss ./dist/css/style.scss"
   },
   "dependencies": {
     "next": "14.0.0",

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import React, { useState } from "react";
-import SingleFileUpload from "./singleFile";
+import SingleFileUpload from "../components/singleFile";
 
 export default function App() {
   const [fileData, setPreviewFileData] = useState(

src/app/singleFile.tsx renamed to src/components/singleFile.tsx

@@ -39,6 +39,9 @@ export default function SingleFileUpload({
   };
 
   const selectFile = () => {
+    if (uploadingStatus) {
+      return;
+    }
     if (inputRef.current) {
       (inputRef.current as HTMLInputElement).click();
     }
@@ -100,9 +103,41 @@ export default function SingleFileUpload({
     }
   }
 
+  const handleDragOver = (event: any) => {
+    if (uploadingStatus) {
+      return;
+    }
+    event.preventDefault();
+    fileData.isDragging = true;
+  };
+
+  const handleDragLeave = (event: any) => {
+    event.preventDefault();
+    fileData.isDragging = false;
+  };
+
+  const handleDrop = (event: any) => {
+    if (uploadingStatus) {
+      return;
+    }
+    event.preventDefault();
+    fileData.isDragging = false;
+
+    const file = event.dataTransfer.files[0];
+    if (file) {
+      previewFile(file);
+    }
+  };
+
   return (
     <div className="flex">
-      <div className="cursor-pointer" onClick={selectFile}>
+      <div
+        className="cursor-pointer"
+        onClick={selectFile}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
         {children}
         <input
           type="file"