File Upload Block - Flex Forms

The File Upload block provides a powerful drag-and-drop interface for users to submit files. It includes robust security limits, automatic image optimization, and multi-file support, seamlessly routing files directly to your configured storage disks (like AWS S3 or Google Cloud Storage) without stressing your primary web server.

Business Use Cases

Job Applications

Collect resumes and cover letters by enforcing PDF-only uploads.

Field Inspections

Allow field workers to take photos of broken equipment directly via their mobile device’s camera.

KYC Verification

Securely upload copies of passports or driver’s licenses to a private S3 bucket.

Configuration & Usage

Deploy to Canvas

Drag the File Upload block from the Component Catalog onto the Canvas.

Set Storage Rules

Define which disk and directory the uploaded files should be saved to (e.g., s3 in the customer_resumes folder).

Enforce Security Restrictions

To prevent malicious uploads, always set the Accepted Types (e.g., just PDFs) and a strict Max Size (KB) limit.

Technical Configuration Schemas

Storage & Routing
Limits & Validation
Image Optimization

string

The Laravel storage disk where the files should be saved (e.g., s3, public, local).

string

The specific folder inside the disk where the files will be placed.

string

Sets the ACL visibility on S3-compatible storage (e.g., private or public-read).

boolean

default:"false"

If enabled, the user can select and upload multiple files at once.

integer

The maximum file size allowed for each individual file, specified in kilobytes (e.g., 5120 for 5MB).

array

An array of allowed MIME types (e.g., ['application/pdf', 'image/jpeg']). The browser will restrict the file picker to these extensions.

boolean

default:"false"

A quick-preset that automatically restricts uploads to standard document formats (PDF, DOCX, TXT).

boolean

default:"false"

A quick-preset that restricts uploads to image formats (JPG, PNG, WEBP).

How Flex Forms stores respondent files

Images are converted to WebP (quality 80 by default) with a normal variant (max 1500px long edge) and a thumb (max 350px). Smaller images are never upscaled; the original upload is discarded after variants exist.
Everything else (PDF, Word, video, audio, …) is stored as a single original file — no forced WebP, no thumb.
Storage uses your configured submissions disk by default. If you set FLEX_FORMS_MEDIA_DRIVER=spatie and install spatie/laravel-medialibrary, Spatie becomes the primary store: native conversions, responsive images (optional), ffmedia:{uuid} path tokens, and originals deleted after conversions. Details: Upload disks.

Data Payload Architecture

Flex Forms handles the heavy lifting of uploading the file to your cloud storage. When the form submits, it passes the path to the file, not the raw binary data.

{
  "submission_id": "sub_909",
  "data": {
    "resume_upload": "customer_resumes/john_doe_resume.pdf"
  }
}

{
  "submission_id": "sub_909",
  "data": {
    "inspection_photos": [
      "inspections/photo_1.jpg",
      "inspections/photo_2.jpg"
    ]
  }
}

Generating URLs: To view these files, you will need to generate a URL based on your disk configuration (e.g., https://my-s3-bucket.s3.amazonaws.com/customer_resumes/john_doe_resume.pdf).

Deep Dive: Image Optimization

When asking for photos (e.g., a profile picture or an inspection photo), modern smartphones often upload 10MB to 20MB raw images. If 1,000 users upload a 15MB photo, you will rapidly burn through your cloud storage and bandwidth budget. By enabling Optimize Images and setting a Max Width/Height (e.g., 1920px), the File Upload block intercepts the massive file on the server, resizes it, and compresses it down to ~500KB before saving it to S3.

Best Practices & FAQs

Organizing Uploads via Directories

Always specify a directory (e.g., form_uploads/campaign_x). If you leave it blank, all files dump into the root of your storage disk, making it a nightmare to manage later.

​Business Use Cases

Job Applications

Field Inspections

KYC Verification

​Configuration & Usage

​Technical Configuration Schemas

​How Flex Forms stores respondent files

​Data Payload Architecture

​Deep Dive: Image Optimization

​Best Practices & FAQs

Business Use Cases

Configuration & Usage

Technical Configuration Schemas

How Flex Forms stores respondent files

Data Payload Architecture

Deep Dive: Image Optimization

Best Practices & FAQs