File Upload

"use client";
 
import { useRef, useState } from "react";
 
const INTENT_URL = "https://formtorch.com/api/uploads/intent";
const FORM_URL = "https://formtorch.com/f/YOUR_FORM_ID";
 
export function UploadForm() {
  const [status, setStatus] = useState<
    "idle" | "loading" | "success" | "error"
  >("idle");
  const formRef = useRef<HTMLFormElement>(null);
 
  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("loading");
 
    const formData = new FormData(e.currentTarget);
    const file = formData.get("attachment") as File | null;
 
    try {
      if (file && file.size > 0) {
        // 1. Ask for an upload policy.
        const intentRes = await fetch(INTENT_URL, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            formId: "YOUR_FORM_ID",
            files: [{ name: file.name, mimeType: file.type, size: file.size }],
          }),
        });
        if (!intentRes.ok) throw new Error("Upload not accepted");
        const { files } = await intentRes.json();
 
        // 2. POST the file straight to storage.
        const upload = new FormData();
        for (const [key, value] of Object.entries<string>(files[0].fields)) {
          upload.append(key, value);
        }
        upload.append("file", file); // must be appended last
        await fetch(files[0].uploadUrl, { method: "POST", body: upload });
 
        // 3. Reference the file by ID instead of sending the bytes again.
        formData.delete("attachment");
        formData.append(
          "_file_ids",
          JSON.stringify({ attachment: files[0].fileId })
        );
      }
 
      const res = await fetch(FORM_URL, {
        method: "POST",
        headers: { "X-Requested-With": "XMLHttpRequest" },
        body: formData,
      });
      if (!res.ok) throw new Error("Submission failed");
 
      setStatus("success");
      formRef.current?.reset();
    } catch {
      setStatus("error");
    }
  }
 
  if (status === "success") {
    return <p>Received. We&apos;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</label>
        <input
          id="attachment"
          name="attachment"
          type="file"
          accept=".pdf,.doc,.docx,.png,.jpg,.jpeg"
        />
      </div>
 
      {status === "error" && (
        <p role="alert">Upload failed. Please try again.</p>
      )}
 
      <button type="submit" disabled={status === "loading"}>
        {status === "loading" ? "Uploading…" : "Send"}
      </button>
    </form>
  );
}

<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" />
 
  <input
    name="_redirect"
    type="hidden"
    value="https://yoursite.com/thank-you"
  />
 
  <button type="submit">Send</button>
</form>