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