Patrones de Formularios Carga de Archivos

import { z } from "zod";
 
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
const ACCEPTED_TYPES = ["image/jpeg", "image/png", "image/webp"];
 
const FileSchema = z
  .instanceof(File)
  .refine((f) => f.size <= MAX_FILE_SIZE, "El archivo debe ser menor a 5MB")
  .refine((f) => ACCEPTED_TYPES.includes(f.type), "Solo JPEG, PNG, o WebP");
 
const UploadSchema = z.object({
  title: z.string().min(1),
  file: FileSchema,
});
 
// Para múltiples archivos
const MultiFileSchema = z.object({
  files: z
    .array(FileSchema)
    .min(1, "Al menos un archivo")
    .max(5, "Máximo 5 archivos"),
});

"use client";
 
import { useState, useRef, useCallback } from "react";
import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
 
const MAX_SIZE = 5 * 1024 * 1024;
const ACCEPTED = ["image/jpeg", "image/png", "image/webp"];
 
const Schema = z.object({
  title: z.string().min(1, "Título requerido"),
  images: z
    .array(
      z
        .instanceof(File)
        .refine((f) => f.size <= MAX_SIZE, "Máximo 5MB por archivo")
        .refine((f) => ACCEPTED.includes(f.type), "Solo JPEG, PNG, WebP")
    )
    .min(1, "Carga al menos una imagen")
    .max(4, "Máximo 4 imágenes"),
});
 
type FormData = z.infer<typeof Schema>;
 
export function ImageUploadForm() {
  const [previews, setPreviews] = useState<string[]>([]);
  const [isDragging, setIsDragging] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);
 
  const {
    register,
    handleSubmit,
    control,
    formState: { errors, isSubmitting },
    setValue,
    watch,
  } = useForm<FormData>({
    resolver: zodResolver(Schema),
    defaultValues: { title: "", images: [] },
  });
 
  const images = watch("images");
 
  const updateFiles = useCallback(
    (files: File[]) => {
      setValue("images", files, { shouldValidate: true });
      const urls = files.map((f) => URL.createObjectURL(f));
      setPreviews((prev) => {
        prev.forEach(URL.revokeObjectURL);
        return urls;
      });
    },
    [setValue]
  );
 
  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    const files = Array.from(e.target.files ?? []);
    updateFiles(files);
  }
 
  function handleDrop(e: React.DragEvent) {
    e.preventDefault();
    setIsDragging(false);
    const files = Array.from(e.dataTransfer.files);
    updateFiles(files);
  }
 
  function removeFile(index: number) {
    const next = images.filter((_, i) => i !== index);
    updateFiles(next);
  }
 
  async function onSubmit(data: FormData) {
    const fd = new FormData();
    fd.append("title", data.title);
    data.images.forEach((file) => fd.append("images", file));
 
    await fetch("/api/upload", { method: "POST", body: fd });
    alert("¡Cargado!");
  }
 
  return (
    <form onSubmit={handleSubmit(onSubmit)} className="max-w-lg space-y-4">
      <div>
        <input
          {...register("title")}
          placeholder="Título"
          className="w-full rounded border p-2"
        />
        {errors.title && <p className="text-sm text-red-600">{errors.title.message}</p>}
      </div>
 
      {/* Zona de arrastrar y soltar */}
      <div
        onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
        onDragLeave={() => setIsDragging(false)}
        onDrop={handleDrop}
        onClick={() => inputRef.current?.click()}
        className={`cursor-pointer rounded-lg border-2 border-dashed p-8 text-center transition ${
          isDragging ? "border-blue-500 bg-blue-50" : "border-gray-300"
        }`}
      >
        <p className="text-sm text-gray-600">
          Arrastra y suelta imágenes aquí, o haz clic para examinar
        </p>
        <p className="mt-1 text-xs text-gray-400">
          JPEG, PNG, WebP - máximo 5MB cada una, hasta 4 archivos
        </p>
        <input
          ref={inputRef}
          type="file"
          accept={ACCEPTED.join(",")}
          multiple
          onChange={handleFileChange}
          className="hidden"
        />
      </div>
      {errors.images && (
        <p className="text-sm text-red-600">
          {errors.images.message ?? errors.images.root?.message}
        </p>
      )}
 
      {/* Vistas previas */}
      {previews.length > 0 && (
        <div className="grid grid-cols-4 gap-2">
          {previews.map((src, i) => (
            <div key={src} className="relative">
              <img src={src} alt={`Vista previa ${i + 1}`} className="h-24 w-full rounded object-cover" />
              <button
                type="button"
                onClick={() => removeFile(i)}
                className="absolute right-1 top-1 rounded-full bg-red-500 px-1.5 text-xs text-white"
              >
                X
              </button>
            </div>
          ))}
        </div>
      )}
 
      <button
        type="submit"
        disabled={isSubmitting}
        className="rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50"
      >
        {isSubmitting ? "Cargando..." : "Cargar"}
      </button>
    </form>
  );
}

<Controller
  name="avatar"
  control={control}
  render={({ field: { onChange, value }, fieldState: { error } }) => (
    <div>
      <input
        type="file"
        accept="image/*"
        onChange={(e) => onChange(e.target.files?.[0])}
      />
      {value && <p className="text-sm">{value.name}</p>}
      {error && <p className="text-sm text-red-600">{error.message}</p>}
    </div>
  )}
/>

// action.ts
"use server";
export async function uploadAction(prev: State, formData: FormData) {
  const file = formData.get("file") as File;
  if (!file || file.size === 0) return { error: "Ningún archivo seleccionado" };
  if (file.size > 5 * 1024 * 1024) return { error: "Archivo demasiado grande" };
 
  const bytes = await file.arrayBuffer();
  const buffer = Buffer.from(bytes);
  await fs.writeFile(`/uploads/${file.name}`, buffer);
  return { success: true };
}

function useUploadProgress() {
  const [progress, setProgress] = useState(0);
 
  async function upload(file: File) {
    const xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", (e) => {
      if (e.lengthComputable) setProgress(Math.round((e.loaded / e.total) * 100));
    });
    // ... configuración de XHR
  }
 
  return { upload, progress };
}

// File es un tipo global del navegador - no se requiere importar
const FileSchema = z.instanceof(File);
type FileType = z.infer<typeof FileSchema>; // File
 
// Para el lado del servidor (Node), usa Buffer o Uint8Array en su lugar
const ServerFileSchema = z.instanceof(Buffer);
 
// Tipos de atributo accept
const MIME_TYPES = ["image/jpeg", "image/png"] as const;
type MimeType = (typeof MIME_TYPES)[number];