n3wt-school/Front-End/src/components/DraggableFileUpload.js

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>
  );
}