File Uploads

Need to collect resumes, design briefs, screenshots, or PDF contracts? Lucid Forms makes it easy to accept attachments directly through your forms and saves them securely.

All form attachments are uploaded to our secure servers and, on the Pro plan, are backed by a dedicated Google Drive storage quota up to 1GB.

---

1. Plain HTML Form Setup

To allow file uploads in standard HTML, you must set the enctype attribute on your <form> element to multipart/form-data and use a method of POST.

<form
  action="https://api.lucidforms.co/f/{your-form-id}"
  method="POST"
  enctype="multipart/form-data"
>
  <!-- Standard Inputs -->
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required />
  </div>

  <!-- File Input -->
  <div>
    <label for="resume">Upload Resume (PDF, Word)</label>
    <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" required />
  </div>

  <button type="submit">Submit Application</button>
</form>

Critical Requirements:

1. method="POST": File uploads do not work with GET requests.
2. enctype="multipart/form-data": Without this encoding type, the browser will only send the file name instead of the file content.
3. name="...": Ensure your file input has a descriptive name attribute (e.g., name="resume"). This defines the column name in your dashboard.

---

2. Programmatic AJAX Uploads (JavaScript / Fetch)

If you are using AJAX to submit data asynchronously (such as in React, Vue, Next.js, or vanilla JS), you must use the browser’s standard FormData object instead of serializing the form to JSON.

const form = document.querySelector('form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  // Create a FormData object from the form element
  const formData = new FormData(form);

  try {
    const response = await fetch('https://api.lucidforms.co/f/{your-form-id}', {
      method: 'POST',
      headers: {
        // IMPORTANT: Do NOT set the 'Content-Type' header here!
        // The browser automatically sets it with the correct boundary parameter.
        'Accept': 'application/json'
      },
      body: formData
    });

    const data = await response.json();

    if (response.ok) {
      alert('File and form data uploaded successfully!');
      form.reset();
    } else {
      alert(`Error: ${data.error}`);
    }
  } catch (error) {
    console.error('Upload failed:', error);
  }
});

Caution

Do Not Set Content-Type Header: When uploading files via fetch, do not manually specify 'Content-Type': 'multipart/form-data'. Let the browser generate it automatically so it includes the unique boundary string required by the server to parse individual fields and files.

---

3. Storage and File Limits

File uploads are regulated based on your account plan to ensure optimal performance and security:

Feature / Limit	Free Plan	Pro Plan
File Uploads	Not Available	Enabled
Max File Size	N/A	25 MB per file
Total Account Quota	N/A	1 GB (Backed by Google Drive)

Allowed File Types

Lucid Forms accepts a wide range of common file extensions, including:

• Documents: .pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .txt
• Images: .jpg, .jpeg, .png, .gif, .svg, .webp
• Archives: .zip, .tar, .gz

---

4. Managing Uploaded Files

Once a submission containing a file is received:

• Email Notifications: The email alerts sent to your inbox will contain direct, secure download links to the uploaded files.
• Dashboard Table: Under the Submissions tab in your dashboard, columns representing file inputs will show a clickable file icon. Clicking this icon opens or downloads the file directly.
• Integrations: If you have the Google Sheets integration configured, the sheet row will include the secure download URL of the uploaded file.