File Upload
Enable file attachments so users can share images, documents, and other files in your chat widget.
Enable File Upload
Basic Configuration
Add a file upload button to the input area:
Allowed File Types
Control which file types users can upload:
Images
JPG, PNG, GIF, WebP, SVG
accept: "image/*"Documents
PDF, DOC, DOCX, TXT, CSV
accept: ".pdf,.doc,.docx,.txt"File Size Limits
Maximum File Size
Set limits to prevent large uploads:
Recommended Limits:
- • Images: 5-10MB
- • Documents: 10-25MB
- • Videos: 50-100MB (if enabled)
Multiple Files
Allow uploading multiple files at once:
Upload Handling
Upload Methods
Base64 Encoding
Convert file to Base64 string and send with message. Simple but increases payload size.
Best For:
- • Small files (< 1MB)
- • Simple backend setup
- • Quick implementation
Direct Upload URL
Upload to storage service, send URL to webhook. Better for large files.
Best For:
- • Large files (> 1MB)
- • Image/video processing
- • File persistence needed
Presigned Upload
Get presigned URL from backend, upload directly to S3/cloud storage.
Best For:
- • Large files with security
- • Reducing backend load
- • Enterprise applications
Upload Progress
Show upload progress to users:
image.jpg
65% - 3.2MB of 5MB
File Preview
Image Thumbnails
Show preview of uploaded images:
vacation-photo.jpg
1.2 MB • 1920x1080
Document Icons
Show appropriate icons for different file types:
DOC
XLS
ZIP
Security & Validation
File Type Validation
Validate files beyond just extensions:
- MIME Type Check: Verify actual file type, not just extension
- Magic Number Validation: Check file headers for true type
- Virus Scanning: Integrate with antivirus API for uploads
- Content Inspection: Scan for malicious content
Security First
Blocked Extensions
Prevent dangerous file types:
Error Handling
Handle common upload errors gracefully:
File Too Large
"File size exceeds 5MB limit. Please choose a smaller file."
Invalid File Type
"This file type is not supported. Please upload JPG, PNG, or PDF."
Upload Failed
"Upload failed. Please check your connection and try again."
Mobile Optimization
Optimize file upload for mobile users:
- Camera Access: Allow taking photos directly from camera
- Gallery Access: Easy access to photo library
- Compression: Automatically compress large images
- Touch-Friendly: Large upload button (44px minimum)
- Progress Indicators: Clear feedback for slower connections
Next: Markdown & HTML
Learn how to enable rich text formatting in chat messages.
Rich Text Formatting →