fileInput

Create file upload inputs with size limits and file type restrictions

Overview

The fileInput method creates a file upload field that allows users to select and upload files. It supports size limits, image-only restrictions, and displaying current files.

Method Signature

fileInput(
  name: string,
  params: FormFieldSharedParamsType & FileInputParamsType
): string

Parameters

name · string · required

The unique identifier for this input field. Used to reference the uploaded file in form submissions.

Required Parameters

question · string · required

The main question or label displayed to the user.

Input-Specific Parameters

sizeLimit · number

Maximum file size in megabytes (MB). Defaults to 10 MB if not specified.

sizeLimit: 5  // 5 MB limit

imageOnly · boolean

When set to true, only image files (JPEG, PNG, GIF, WebP, etc.) are accepted.

imageOnly: true

currentFile · string

URL of the current/existing file. Use when editing forms to show the currently uploaded file. For best results, use a full URL.

currentFile: "https://example.s3.com/files/document.pdf"

Shared Parameters

All standard form field parameters are supported. See textInput for the complete list including required, description, fieldSize, disabled, and more.

Examples

Basic File Upload

const composer = new Composer({ title: "Application Form" });

composer.fileInput("resume", {
  question: "Upload your resume",
  required: true,
  sizeLimit: 5,
  description: "Accepted formats: PDF, DOC, DOCX (max 5 MB)"
});

File Type Restrictions

Image Only

When imageOnly: true is set, the input accepts:

• JPEG/JPG (.jpg, .jpeg)
• PNG (.png)
• GIF (.gif)
• WebP (.webp)
• SVG (.svg)
• BMP (.bmp)

composer.fileInput("logo", {
  question: "Company logo",
  imageOnly: true,
  sizeLimit: 3,
  description: "PNG or JPG, max 3 MB"
});

All File Types

Without imageOnly, the input accepts all file types:

• Documents (PDF, DOC, DOCX, TXT)
• Spreadsheets (XLS, XLSX, CSV)
• Images (JPG, PNG, GIF)
• Archives (ZIP, RAR)
• Any other file type

composer.fileInput("attachment", {
  question: "Supporting documents",
  sizeLimit: 10,
  description: "Any file type accepted, max 10 MB"
});

Custom Restrictions

For custom file type restrictions, use the HTML accept attribute:

composer.fileInput("document", {
  question: "Upload PDF only",
  sizeLimit: 10,
  attrs: [
    { name: "accept", value: ".pdf" }
  ],
  description: "PDF files only"
});

// Multiple specific types
composer.fileInput("spreadsheet", {
  question: "Upload spreadsheet",
  attrs: [
    { name: "accept", value: ".xlsx,.xls,.csv" }
  ]
});

Size Limits

The sizeLimit parameter specifies the maximum file size in megabytes (MB).

Common Size Limits

Use Case	Recommended Limit	Example
Profile pictures	2-5 MB	sizeLimit: 2
Documents (PDF, DOC)	5-10 MB	sizeLimit: 10
High-res images	10-20 MB	sizeLimit: 15
Presentations	20-50 MB	sizeLimit: 50
Videos (small)	50-100 MB	sizeLimit: 100

// Profile picture
composer.fileInput("photo", {
  question: "Profile photo",
  imageOnly: true,
  sizeLimit: 3
});

// Resume/CV
composer.fileInput("resume", {
  question: "Resume",
  sizeLimit: 5
});

// Portfolio images
composer.fileInput("portfolio", {
  question: "Portfolio sample",
  imageOnly: true,
  sizeLimit: 20
});

Backend Integration

File uploads require proper backend handling to receive and store the files.

Google Sheets Integration

When using Google Sheets as your backend, files are automatically uploaded to Google Drive:

const composer = new Composer({
  title: "Application Form",
  postUrl: "your-google-sheets-url"
});

composer.fileInput("resume", {
  question: "Upload resume",
  sizeLimit: 5
});

The Google Sheets integration will:

1. Upload the file to your Google Drive
2. Store the Drive URL in your spreadsheet
3. Make files accessible through Drive sharing settings

Custom Backend

For custom backends, files are sent as multipart/form-data:

// Your backend receives the file as FormData
// Example Node.js/Express handling:

app.post('/submit-form', upload.single('resume'), (req, res) => {
  const file = req.file;
  // file.originalname - original filename
  // file.mimetype - file MIME type
  // file.size - file size in bytes
  // file.buffer - file contents
});

Use Cases

Applications

Collect resumes, cover letters, and portfolios.

Profile Images

Upload avatars and profile pictures.

Documents

Receive contracts, agreements, or certifications.

Support Tickets

Attach screenshots or files to support requests.

Best Practices

Set appropriate size limits

Match the size limit to your use case:

// Too small - users may have issues
sizeLimit: 1  // Only 1 MB - may be too restrictive

// Better - reasonable for most documents
sizeLimit: 10

// Special cases - high-quality images or videos
sizeLimit: 50

Clear file requirements

Use the description to specify requirements:

description: "Accepted: PDF, DOC, DOCX. Maximum 5 MB"
description: "High-resolution JPG or PNG, up to 20 MB"
description: "Upload a clear photo of your ID. Max 3 MB"

Show current files

When editing, show the currently uploaded file:

composer.fileInput("logo", {
  question: "Company logo",
  currentFile: "https://cdn.example.com/logos/current.png",
  imageOnly: true,
  description: "Current logo shown above. Upload new to replace"
});

Provide visual feedback

The file input automatically shows:

• Selected filename
• File size
• Upload progress
• Current file (if specified)

No additional code needed for this functionality.

Security considerations

Always validate files on the backend:

• Check file size server-side
• Verify file type by content (not just extension)
• Scan for malware if accepting from public users
• Use secure, unique filenames when storing
• Store files outside web root when possible

Limitations

File input limitations to be aware of:

• Maximum size is controlled by your backend configuration
• Browser may have upload size limits
• Mobile devices may have different file picker UIs
• File validation happens both client and server-side

Return Value

Returns a string containing the Forms.md markup for the file input field.

Submitted value:

• With Google Sheets: URL to the file in Google Drive
• Custom backend: File object in multipart/form-data

Related Methods

textInput

Text input for file URLs or references

pictureChoice

Choose from predefined images