File Upload Field

This is a Pro feature. Upgrade to Pro to use file uploads.

The file upload field lets users attach files to their form submissions. Perfect for resumes, documents, images, and supporting materials.

When to use

Job applications (resumes, portfolios)
Support requests (screenshots, logs)
Quote requests (project specifications)
Any form requiring attachments

Settings

Label

Example: "Upload Resume", "Attach Files", "Screenshots"

Description

Guidance about accepted files.

Example: "PDF or Word documents, max 5MB"

Required

Make file upload mandatory.

Multiple files

Allow users to upload more than one file.

Multiple Files: Yes
Max Files: 5

File restrictions

Allowed file types

Control which file types are accepted:

Preset	Extensions
Images	jpg, jpeg, png, gif, webp
Documents	pdf, doc, docx, txt, rtf
Spreadsheets	xls, xlsx, csv
All Common	All of the above
Custom	Specify your own

Custom example:

pdf, doc, docx

Maximum file size

Per-file size limit in megabytes.

Setting	Best For
2 MB	Small documents
5 MB	General uploads (default)
10 MB	Images, presentations
25 MB	Large files, portfolios

Your server's upload limits may also apply. Check upload_max_filesize and post_max_size in PHP settings.

Maximum total size

Combined size limit when multiple files allowed.

Max File Size: 5 MB
Max Files: 3
Max Total Size: 10 MB

File storage

Uploaded files are stored in:

/wp-content/uploads/fodo-forms/[year]/[month]/

Files are renamed with unique identifiers to prevent conflicts.

Security

Files are stored outside public web directories by default
Direct access is blocked via .htaccess
Files are served through WordPress for authorized access only

Display options

Drop zone style

How the upload area appears:

Style	Description
Button	Simple "Choose File" button
Drop Zone	Drag-and-drop area with button
Minimal	Compact button, inline

Preview

Show thumbnails for uploaded images.

Progress bar

Display upload progress for large files.

Examples

Resume upload

Label: Upload Resume
Required: Yes
Allowed Types: pdf, doc, docx
Max Size: 5 MB
Multiple: No
Description: PDF or Word format preferred

Support screenshots

Label: Screenshots (optional)
Required: No
Allowed Types: jpg, jpeg, png, gif
Max Size: 10 MB
Multiple: Yes
Max Files: 5
Preview: Yes
Description: Attach any relevant screenshots

Project files

Label: Project Files
Required: Yes
Allowed Types: pdf, doc, docx, xls, xlsx, zip
Max Size: 25 MB
Multiple: Yes
Max Files: 10
Max Total Size: 50 MB

Email notifications

By default, uploaded files are:

Attached to notification emails (if under 25MB total)
Linked in email body (if over limit or attachments disabled)

Configure in Form Settings → Email Notifications.

Webhooks & integrations

When sending to external services, files are included as:

{
  "resume": {
    "name": "john-doe-resume.pdf",
    "url": "https://example.com/wp-content/uploads/fodo-forms/2024/01/abc123.pdf",
    "size": 245678,
    "type": "application/pdf"
  }
}

Styling

<div class="fodo-field fodo-field-file">
  <label class="fodo-label">Upload Resume</label>
  <div class="fodo-dropzone">
    <input type="file" name="fields[resume]" accept=".pdf,.doc,.docx">
    <div class="fodo-dropzone-content">
      <span class="fodo-dropzone-icon">📄</span>
      <span class="fodo-dropzone-text">
        Drag and drop or <span class="fodo-dropzone-browse">browse</span>
      </span>
      <span class="fodo-dropzone-hint">PDF or Word, max 5MB</span>
    </div>
  </div>
  <div class="fodo-file-list">
    <!-- Uploaded files appear here -->
  </div>
</div>

Custom drop zone

.fodo-dropzone {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  transition: border-color 0.2s;
}

.fodo-dropzone:hover,
.fodo-dropzone.dragging {
  border-color: #0066cc;
  background: #f8fafc;
}

File Upload Field

On this page