Formulario de subida de archivos en Svelte
Crea un formulario de subida de archivos en Svelte sin backend y sin una API de subida propia. El componente envía el FormData multipart directamente a Formpaste, así 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 subidas.
- Copia el componente de Svelte de arriba, 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 Svelte app. Use a single-file 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 Svelte
Un formulario de contacto en Svelte es un componente de un solo archivo con bind:value en los campos y un manejador on:submit|preventDefault que hace POST a Formpaste. No hay backend ni una API propia. Coloca el fetch en el componente y ya está.
Es un componente de un solo archivo
El formulario vive en un componente .svelte con un bloque <script>. Vincula los campos con bind:value o lee un FormData del elemento form al enviar, y luego haz POST al endpoint de Formpaste. No se requiere store ni librería para un formulario sencillo.
Sin una API propia
No haces proxy a través de tu propio servidor. El componente hace POST directamente al endpoint de Formpaste, lo que elimina un mailer y un almacén de envíos que de otra forma tendrías que construir.
Maneja la respuesta con una variable de estado reactiva
El endpoint devuelve JSON (success, message, id). Espera el fetch y asigna una variable de estado reactiva para mostrar tu propio estado de éxito o error, o configura una URL de redirección en el dashboard y evita el manejo del lado del cliente.
Svelte 4 o Svelte 5, ambas funcionan
Los ejemplos usan un bloque <script> con una variable status normal, que funciona en cualquier versión de Svelte. En Svelte 5 puedes usar runes como $state en su lugar, pero el mismo fetch y el mismo POST son todo lo que Formpaste necesita.
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.
<script lang="ts">
let status: "idle" | "sending" | "ok" | "error" = "idle";
async function onSubmit(e: SubmitEvent) {
status = "sending";
const form = new FormData(e.target as HTMLFormElement);
const res = await fetch("https://api.formpaste.com/submit", { method: "POST", body: form });
status = res.ok ? "ok" : "error";
}
</script>
{#if status === "ok"}
<p>Thanks - your message was sent.</p>
{:else}
<form on:submit|preventDefault={onSubmit} class="mx-auto flex w-full max-w-md flex-col gap-4 rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-950">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Nombre
<input type="text" name="name" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Correo electrónico
<input type="email" name="email" placeholder="tu@ejemplo.com" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Archivo
<input type="file" name="file" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Mensaje
<textarea name="message" class="min-h-28 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100"></textarea>
</label>
<button type="submit" class="w-full rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-gray-800 disabled:opacity-60 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200" disabled={status === "sending"}>Subir</button>
{#if status === "error"}<p>Something went wrong. Please try again.</p>{/if}
</form>
{/if}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 subida de archivos en Svelte 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.