FileUploader

FileUploader.tsx

import React, { useState } from 'react';
import './FileUploader.css';

type FileUploaderProps = {
  onUpload: (files: File[]) => void;
  accept?: string;
  multiple?: boolean;
}

const FileUploader = (props: FileUploaderProps) => {
  const { onUpload, accept, multiple } = props;
  const [selectedFiles, setSelectedFiles] = useState<FileList | null>(null);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (files) {
      setSelectedFiles(files);
    }
  }

  const handleUploadClick = () => {
    if (selectedFiles) {
      const filesArray = Array.from(selectedFiles);
      onUpload(filesArray);
      setSelectedFiles(null);
    }
  }

  return (
    <div className="file-uploader-container">
      <input
        type="file"
        accept={accept}
        multiple={multiple}
        onChange={handleFileChange}
      />
      <button onClick={handleUploadClick}>Upload</button>
    </div>
  );
};

export default FileUploader;

FileUploader.module.css

.file-uploader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
}

.file-uploader-container input[type="file"] {
  margin-bottom: 10px;
}

.file-uploader-container button {
  padding: 10px;
  background-color: #008CBA;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.file-uploader-container button:hover {
  background-color: #006F8C;
}