Formulario de carga de archivos React
Construye un formulario de carga de archivos en React sin backend y sin API de subida propia. El componente envía el FormData multipart directamente a Formpaste, así que el archivo llega a tu bandeja de entrada junto con los demás campos. Copia el código y añade tu clave de acceso.
Como construirlo
- Crea un formulario en tu panel de Formpaste y copia su clave de acceso.
- Conecta Storage en el panel para que el formulario pueda aceptar cargas.
- Copia el componente de abajo, añade tu clave de acceso y despliega.
Prompt para tu agente de programación con IA
Add a Formpaste file upload form to my React app. Use a component with a file input that POSTs the raw FormData (multipart/form-data, not URLSearchParams) to https://api.formpaste.com/submit with a hidden access_key input. Do not build an 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 React
Un formulario de contacto en React es solo un componente con un manejador de submit que envía el POST a Formpaste. No hay backend ni ruta de API propia. Coloca el fetch en un componente que se ejecute en el navegador y ya está.
Es un componente cliente
El fetch del onSubmit se ejecuta en el navegador, así que el formulario vive en un componente cliente normal. En una SPA de React puro todo componente ya es del lado del cliente; en un framework con componentes de servidor, agrega el límite de cliente donde se ejecuta el fetch.
Sin ruta de API, sin proxy
No envías el POST a tu propio endpoint /api para reenviarlo desde ahí. El componente envía el POST directamente al endpoint de Formpaste, lo que elimina todo un viaje de ida y vuelta al servidor y un mailer que de otra forma tendrías que escribir.
Controlado o no controlado, ambos funcionan
Lee los valores desde un FormData sobre el elemento form (no controlado) o desde useState (controlado). No controlado es menos código para un formulario de contacto sencillo; controlado es útil cuando validas mientras el usuario escribe.
Maneja la respuesta en el estado
El endpoint devuelve JSON (success, message, id). Espera el fetch y asigna un estado para mostrar tu propia interfaz de éxito o error, o configura una redirección en el panel y evita el manejo del lado del cliente.
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.
Crea tu formulario
Regístrate, verifica tu correo y crea una clave de acceso en tu panel.
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 = "https://api.formpaste.com/submit";
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>
);
}
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 React 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.