Form Backend with Secure File Uploads & Cloud Storage

<!-- 1. HTML form with file picker -->
<form id="contact-form" action="https://form2lead.com/api/v1/f/YOUR_FORM_ID" method="POST">
  <input type="text" name="name" required placeholder="Your Name" />
  <input type="file" id="attachment" name="attachment" accept=".pdf,.png,.jpg" />
  <input type="text" name="_gotcha" style="display:none !important;" tabindex="-1" />
  <button type="submit">Submit Form</button>
</form>

<script>
  // 2. Two-step direct upload: presign -> PUT to storage -> submit _f2l_files
  const form = document.querySelector('#contact-form');
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const file = document.querySelector('#attachment').files[0];
    const fileIds = [];

    if (file) {
      // Step A: Request short-lived presigned upload URL
      const presign = await fetch('https://form2lead.com/api/v1/f/YOUR_FORM_ID/presign', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ fileName: file.name, contentType: file.type, sizeBytes: file.size })
      }).then(r => r.json());

      // Step B: Upload bytes directly to secure storage (bypasses serverless limits)
      await fetch(presign.uploadUrl, { method: 'PUT', headers: { 'Content-Type': file.type }, body: file });
      fileIds.push(presign.fileId);
    }

    // Step C: Submit form payload with file reference IDs
    const payload = Object.fromEntries(new FormData(form));
    delete payload.attachment;
    payload._f2l_files = fileIds;

    await fetch('https://form2lead.com/api/v1/f/YOUR_FORM_ID', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify(payload)
    });
    alert('Submitted successfully with attachment!');
  });
</script>