feat: creation d'un FormRenderer.js pour creer un formulaire dynamique [NEWTS-17]

Front-End/src/components/Form/DraggableFileUpload.js

@@ -0,0 +1,60 @@
+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>
+  );
+}