Formulario de carga de archivos Vite

Construye un formulario de carga de archivos en una aplicación Vite sin backend. El componente envía el FormData multipart a Formpaste, con el endpoint guardado en una variable de entorno de Vite. Copia el código y añade tu clave de acceso: las cargas llegan a tu bandeja de entrada.

Como construirlo

Crea un formulario en tu panel de Formpaste y copia su clave de acceso.
Conecta Storage en el panel y añade VITE_FORMPASTE_ENDPOINT a tu .env.
Copia el componente de abajo, añade tu clave de acceso, luego compila y despliega.

Prompt para tu agente de programación con IA

Add a Formpaste file upload form to my Vite app. Use a component with a file input that reads the endpoint from import.meta.env.VITE_FORMPASTE_ENDPOINT and POSTs the raw FormData (multipart/form-data) with a hidden access_key input. No server, no upload endpoint of my own.

O conecta el servidor MCP de Formpaste con Claude Code, Codex, Cursor, Claude Desktop, VS Code o cualquier cliente mcp-remote. Ver la guía de configuración.

Puntos claves de Vite

Una app en Vite (React o Vue) es un build de SPA estático, así que un formulario de Formpaste es un componente que envía el POST a un endpoint. Guarda el endpoint en una variable de entorno de Vite y el formulario funciona sin servidor y sin ruta de API.

Coloca el endpoint en una variable de entorno

Exponlo como import.meta.env.VITE_FORMPASTE_ENDPOINT (Vite solo expone al cliente las variables con el prefijo VITE_). Eso mantiene la URL fuera de tus componentes y fácil de cambiar según el entorno.

No necesitas proxy del servidor de desarrollo

No necesitas un proxy del dev server de Vite ni una ruta de backend. El componente envía el POST directamente al endpoint de Formpaste tanto en desarrollo como en producción.

Funciona con la plantilla de React y la de Vue

Vite genera proyectos de React o Vue. En cualquier caso el formulario es un componente con un manejador de submit que hace fetch al endpoint - usa el código de React o de Vue del selector de arriba según tu plantilla.

Salida estática, despliega donde sea

vite build genera assets estáticos que envían el POST a un endpoint externo, así que la app se despliega en cualquier host estático con el formulario funcionando de inmediato.

Que debes acertar

Un archivo implica multipart, no urlencoded

En cuanto el formulario tiene un campo de tipo archivo, debe enviarse como multipart form data. El código generado configura enctype y envía el FormData sin procesar, así el archivo viaja junto con los demás campos. No necesitas ningún endpoint de carga propio.

La carga va directo del cliente a Formpaste

El navegador envía el archivo directamente a Formpaste, así que tu app nunca almacena en búfer ni procesa la carga. Eso evita por completo los límites de tamaño de cuerpo y de tiempo de ejecución de los entornos serverless.

Define expectativas sobre tamaño y tipo

Indica a las personas qué formatos aceptas. La carga de archivos es una función Pro; conecta Storage en el panel primero y mantén el campo claro respecto a los tipos y tamaños aceptados.

Cómo funciona

Tres pasos simples para que los envíos de formularios lleguen a tu bandeja de entrada.
Crea tu formulario, apunta la URL de action al endpoint de Formpaste y añade tu clave de acceso.

1

Crea tu formulario

Regístrate, verifica tu correo y crea una clave de acceso en tu panel.

2

Copia el código

Pega el fragmento de arriba en tu proyecto. Elige CSS o Tailwind para que combine con tu sitio.

import { useState } from "react";

const ENDPOINT = import.meta.env.VITE_FORMPASTE_ENDPOINT;

export function FileUploadForm() {
  const [status, setStatus] = useState("idle");

  async function submit(e) {
    e.preventDefault();
    setStatus("sending");
    const form = new FormData(e.currentTarget);
    const res = await fetch(ENDPOINT, { method: "POST", body: form });
    setStatus(res.ok ? "ok" : "error");
  }

  if (status === "ok") return <p>Thanks - your file was uploaded.</p>;

  return (
    <form onSubmit={submit} encType="multipart/form-data">
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />
      <input name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="Email" required />
      <input type="file" name="file" required />
      <button type="submit" disabled={status === "sending"}>Upload</button>
    </form>
  );
}

3

Añade tu clave de acceso

Reemplaza el marcador por tu clave de acceso para empezar a recibir envíos.

<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

Formulario de carga de archivos Vite FAQ

Pega un formulario. Recibe envíos.

Al instante, sin configurar ningún backend, servidor ni base de datos. 250 envíos/mes gratis, sin tarjeta de crédito.

Empezar gratis Leer la documentación