File Uploads
Accept file attachments with your form submissions
Static Forms allows users to upload files (documents, images, etc.) along with their form submissions. Uploaded files are automatically attached to the notification email you receive. File uploads are available for Pro tier users.
Pro Feature
File uploads require a Pro tier account. Upgrade to Pro to enable this feature.
Supported File Types
Static Forms supports the following file formats:
Documents
- PDF (.pdf)
- Microsoft Word (.doc, .docx)
- Text files (.txt)
- Rich Text Format (.rtf)
Images
- JPEG (.jpg, .jpeg)
- PNG (.png)
- GIF (.gif)
- WebP (.webp)
File Size Limits
File uploads are subject to size restrictions:
- Maximum file size: 5MB per file
- Multiple files: Each file must be under 5MB
- Total limit: No specific total limit, but each file must be under 5MB
File Size
Files larger than 5MB will be rejected with an error message. Consider compressing large images or splitting large documents before uploading.
Implementation
To enable file uploads, you must add the enctype attribute to your form:
Complete Example
Here's a complete form example with file upload:
Multiple File Uploads
You can allow users to upload multiple files by adding the multiple attribute:
Multiple Files
When using multiple, each file must still be under 5MB. All files will be attached to the notification email.
File Input Attributes
Useful attributes for file input fields:
| Attribute | Description | Example |
|---|---|---|
| accept | Restricts file types | accept=".pdf,.doc,.docx" |
| multiple | Allows multiple files | multiple |
| required | Makes file upload required | required |
| name | Field name in submission | name="document" |
AJAX File Uploads
When submitting files via AJAX, use FormData:
Important
When using FormData with fetch, do not set the Content-Type header. The browser will automatically set it to multipart/form-data with the correct boundary.
React Example
File uploads in React:
Error Handling
Common file upload errors and how to handle them:
File Too Large
Error: File "document.pdf" is too large (6.2MB). Maximum allowed size is 5MB.
Solution: Compress the file or split it into smaller parts. For images, use image compression tools.
Invalid File Type
Error: File type not supported
Solution: Ensure the file type is in the supported list. Use the accept attribute to restrict file types on the client side.
Missing enctype
Error: Files not being uploaded
Solution: Add enctype="multipart/form-data" to your form element.
Pro Tier Required
Error: File uploads require Pro tier
Solution: Upgrade to Pro tier to enable file uploads. View pricing
Best Practices
Always Use enctype
Never forget to add enctype="multipart/form-data" to forms with file uploads. Without it, files won't be sent.
Restrict File Types
Use the accept attribute to guide users and prevent invalid file types from being selected.
Show File Size Limit
Display the 5MB limit to users so they know what to expect. Consider client-side validation to check file size before submission.
Validate on Client Side
Add JavaScript validation to check file size and type before submission for better user experience.
Client-Side File Validation
Add client-side validation to improve user experience: