feat: Ajout des Bundles de fichiers [#24]

Front-End/src/components/DraggableFileUpload.js

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Upload } from 'lucide-react';
+
+export default function DraggableFileUpload({ fileName, onFileSelect }) {
+  const [dragActive, setDragActive] = useState(false);
+
+
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    setDragActive(true);
+  };
+
+  const handleDragLeave = () => {
+    setDragActive(false);
+  };
+
+  const handleFileChosen = (selectedFile) => {
+    onFileSelect && onFileSelect(selectedFile);
+  };
+
+  const handleDrop = (event) => {
+    event.preventDefault();
+    setDragActive(false);
+    const droppedFile = event.dataTransfer.files[0];
+    handleFileChosen(droppedFile);
+  };
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    handleFileChosen(selectedFile);
+  };
+
+  return (
+    <div>
+      <div
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        className={`border-2 border-dashed p-8 rounded-md ${dragActive ? 'border-blue-500' : 'border-gray-300'} flex flex-col items-center justify-center`}
+        style={{ height: '200px' }}
+      >
+        <input type="file" onChange={handleFileChange} className="hidden" id="fileInput" />
+        <label htmlFor="fileInput" className="cursor-pointer flex flex-col items-center">
+          <Upload size={48} className="text-gray-400 mb-2" />
+          <p className="text-center">{fileName || 'Glissez et déposez un fichier ici ou cliquez ici pour sélectionner un fichier'}</p>
+        </label>
+      </div>
+    </div>
+  );
+}