File Upload

Formtorch accepts file uploads via standard multipart/form-data encoding. Add a file input to any form and the attachment is stored with the submission.

HTML

upload.html


<form
  action="https://formtorch.com/f/YOUR_FORM_ID"
  method="POST"
  enctype="multipart/form-data"
>
  <label for="name">Name</label>
  <input id="name" name="name" type="text" required />
 
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />
 
  <label for="attachment">Attachment</label>
  <input
    id="attachment"
    name="attachment"
    type="file"
    accept=".pdf,.doc,.docx,.png,.jpg,.jpeg"
  />
 
  <input
    name="_redirect"
    type="hidden"
    value="https://yoursite.com/thank-you"
  />
 
  <button type="submit">Send</button>
</form>

The enctype="multipart/form-data" attribute is required when your form includes a file input. Without it, the file will not be transmitted.

React

Build the component

components/UploadForm.tsx


"use client";
 
import { useRef, useState } from "react";
 
export function UploadForm() {
  const [status, setStatus] = useState<
    "idle" | "loading" | "success" | "error"
  >("idle");
  const [fileName, setFileName] = useState("");
  const formRef = useRef<HTMLFormElement>(null);
 
  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("loading");
 
    // Do not set Content-Type manually. The browser sets it with the boundary.
    const res = await fetch("https://formtorch.com/f/YOUR_FORM_ID", {
      method: "POST",
      headers: { "X-Requested-With": "XMLHttpRequest" },
      body: new FormData(e.currentTarget),
    });
 
    if (res.ok) {
      setStatus("success");
      formRef.current?.reset();
      setFileName("");
    } else {
      setStatus("error");
    }
  }
 
  if (status === "success") {
    return <p>Received. We'll follow up by email.</p>;
  }
 
  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name</label>
        <input id="name" name="name" type="text" required />
      </div>
 
      <div>
        <label htmlFor="email">Email</label>
        <input id="email" name="email" type="email" required />
      </div>
 
      <div>
        <label htmlFor="attachment">
          Attachment {fileName && <span>({fileName})</span>}
        </label>
        <input
          id="attachment"
          name="attachment"
          type="file"
          accept=".pdf,.doc,.docx,.png,.jpg,.jpeg"
          onChange={(e) => setFileName(e.target.files?.[0]?.name ?? "")}
        />
      </div>
 
      {status === "error" && (
        <p role="alert">Upload failed. Please try again.</p>
      )}
 
      <button type="submit" disabled={status === "loading"}>
        {status === "loading" ? "Uploading…" : "Send"}
      </button>
    </form>
  );
}

Next.js

Create the server action

app/upload/actions.ts


"use server";
 
import { redirect } from "next/navigation";
 
export async function submitWithFile(formData: FormData) {
  const res = await fetch("https://formtorch.com/f/YOUR_FORM_ID", {
    method: "POST",
    body: formData,
    // Do not set Content-Type here. Next.js handles multipart boundaries.
  });
 
  if (!res.ok) {
    throw new Error("Upload failed");
  }
 
  redirect("/thank-you");
}

Create the form page

app/upload/page.tsx


import { submitWithFile } from "./actions";
 
export default function UploadPage() {
  return (
    <form action={submitWithFile} encType="multipart/form-data">
      <div>
        <label htmlFor="name">Name</label>
        <input id="name" name="name" type="text" required />
      </div>
 
      <div>
        <label htmlFor="email">Email</label>
        <input id="email" name="email" type="email" required />
      </div>
 
      <div>
        <label htmlFor="attachment">Attachment</label>
        <input
          id="attachment"
          name="attachment"
          type="file"
          accept=".pdf,.doc,.docx,.png,.jpg,.jpeg"
        />
      </div>
 
      <button type="submit">Send</button>
    </form>
  );
}

File size and type limits

Limit	Value
Max file size per attachment	10 MB
Max attachments per submission	5
Accepted types	Any (filter with `accept` attribute on the input)

Use the accept attribute to limit what the browser’s file picker shows. This is a client-side hint only. TorchWarden validates types on the server.

Accessing uploaded files

Uploaded files appear in the submission detail view in the dashboard. Each file is listed with its name and a download link.

File uploads are not available on the Free plan. Upgrade to Starter or Pro to enable attachments.