fix: Add custom dropzone event

src/components/estimate/EstimateFileUploader.jsx

@@ -33,6 +33,31 @@ export default function EstimateFileUploader({ uploadFiles, setUploadFiles }) {
     setUploadFiles(uploadFiles.filter((file) => file.id !== id))
   }
 
+  const handleDrop = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    const fileList = []
+    Array.from(e.dataTransfer.files).forEach((file) => {
+      fileList.push({ data: file, id: uuidv4() })
+    })
+    setUploadFiles([...uploadFiles, ...fileList])
+  }
+
+  const handleDragOver = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const handleDragEnd = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const handleDragLeave = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
   return (
     <div className="drag-file-box">
       <div className="btn-area">
@@ -41,7 +66,14 @@ export default function EstimateFileUploader({ uploadFiles, setUploadFiles }) {
         </label>
         <input type="file" name="file" id="img" ref={fileInputRef} style={{ display: 'none' }} onChange={(e) => onChangeFiles(e)} />
       </div>
-      <div className="drag-file-area">
+      <div
+        className="drag-file-area"
+        draggable
+        onDrop={(e) => handleDrop(e)}
+        onDragOver={(e) => handleDragOver(e)}
+        onDragEnd={(e) => handleDragEnd(e)}
+        onDragLeave={(e) => handleDragLeave(e)}
+      >
         <p>Drag file here</p>
         <ul className="file-list">
           {uploadFiles.length > 0 &&