File Upload

import { useEffect, useRef, useState } from "react";

const MAX_FILE_SIZE = 5 * 1024 * 1024;

const ALLOWED_TYPES = new Set([
  "image/jpeg",
  "image/png",
  "application/pdf",
]);

function validateFile(file) {
  if (!ALLOWED_TYPES.has(file.type)) {
    return `${file.name}: дозволені лише JPEG, PNG та PDF`;
  }

  if (file.size > MAX_FILE_SIZE) {
    return `${file.name}: розмір не може перевищувати 5 МБ`;
  }

  return null;
}

export default function FileUpload() {
  const [files, setFiles] = useState([]);
  const [errors, setErrors] = useState([]);
  const [status, setStatus] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [previews, setPreviews] = useState([]);

  const inputRef = useRef(null);

  useEffect(() => {
    const nextPreviews = files.map((file) => ({
      file,
      url: URL.createObjectURL(file),
    }));

    setPreviews(nextPreviews);

    return () => {
      nextPreviews.forEach(({ url }) => {
        URL.revokeObjectURL(url);
      });
    };
  }, [files]);

  function handleFileChange(event) {
    const selectedFiles = Array.from(event.target.files || []);
    const nextFiles = [];
    const nextErrors = [];

    selectedFiles.forEach((file) => {
      const error = validateFile(file);

      if (error) {
        nextErrors.push(error);
      } else {
        nextFiles.push(file);
      }
    });

    setFiles(nextFiles);
    setErrors(nextErrors);
    setStatus("");

    // Дозволяє повторно вибрати той самий файл після помилки або видалення.
    event.target.value = "";
  }

  function removeFile(fileToRemove) {
    setFiles((currentFiles) =>
      currentFiles.filter((file) => file !== fileToRemove),
    );
    setStatus("");
  }

  async function handleSubmit(event) {
    event.preventDefault();

    if (files.length === 0) {
      setStatus("Виберіть хоча б один файл.");
      return;
    }

    const formData = new FormData();

    files.forEach((file) => {
      formData.append("files", file, file.name);
    });

    setIsSubmitting(true);
    setStatus("");

    try {
      const response = await fetch("/api/upload", {
        method: "POST",
        body: formData,
      });

      if (!response.ok) {
        throw new Error("Сервер не прийняв файли");
      }

      setStatus("Файли успішно надіслано.");
      setFiles([]);

      if (inputRef.current) {
        inputRef.current.value = "";
      }
    } catch (error) {
      setStatus(error.message || "Не вдалося надіслати файли.");
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="file-input">Виберіть файли:</label>

      <input
        ref={inputRef}
        id="file-input"
        type="file"
        accept="image/jpeg,image/png,application/pdf"
        multiple
        onChange={handleFileChange}
      />

      {errors.length > 0 && (
        <ul role="alert">
          {errors.map((error) => (
            <li key={error}>{error}</li>
          ))}
        </ul>
      )}

      {previews.length > 0 && (
        <section aria-label="Попередній перегляд">
          <h2>Вибрані файли</h2>

          <ul>
            {previews.map(({ file, url }) => (
              <li key={`${file.name}-${file.lastModified}`}>
                <p>
                  <strong>{file.name}</strong>{" "}
                  ({Math.round(file.size / 1024)} КБ)
                </p>

                {file.type.startsWith("image/") && (
                  <img
                    src={url}
                    alt={`Попередній перегляд ${file.name}`}
                    width="240"
                  />
                )}

                {file.type === "application/pdf" && (
                  <iframe
                    src={url}
                    title={`Попередній перегляд ${file.name}`}
                    width="400"
                    height="300"
                  />
                )}

                <button
                  type="button"
                  onClick={() => removeFile(file)}
                >
                  Видалити
                </button>
              </li>
            ))}
          </ul>
        </section>
      )}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Надсилання..." : "Надіслати"}
      </button>

      {status && <p role="status">{status}</p>}
    </form>
  );
}