FormWidgets / FileUpload / Examples

FileUpload Examples

Live examples of the FileUpload widget with different file type and size configurations. Click any field to open the file browser.

View Documentation

1. Any File (Default)

Default configuration — accepts any file type up to 5MB.

JavaScript
FormWidgets.init('#fu1', 'FileUpload');
// Default: any file type, max 5MB

2. Images Only (2MB max)

Accepts only image files. File dialog is filtered to images. Files over 2MB show a validation error.

JavaScript
FormWidgets.init('#fu2', 'FileUpload', {
    accept: 'image/*',
    maxSize: 2097152  // 2MB
});

3. PDF Only (10MB max)

Restricts selection to PDF files with a 10MB size limit.

JavaScript
FormWidgets.init('#fu3', 'FileUpload', {
    accept: '.pdf,application/pdf',
    maxSize: 10485760  // 10MB
});

4. Word / PDF Documents

Accepts both Word documents and PDFs up to 10MB.

JavaScript
FormWidgets.init('#fu4', 'FileUpload', {
    accept: '.pdf,.doc,.docx,application/pdf,application/msword',
    maxSize: 10485760  // 10MB
});

5. Small File Size Limit

Strict 500KB limit — useful for avatar images or thumbnails. Try uploading a large file to see the validation error.

JavaScript
FormWidgets.init('#fu5', 'FileUpload', {
    accept: 'image/jpeg,image/png,image/webp',
    maxSize: 512000   // 500KB
});

6. Spreadsheets

Accept Excel spreadsheet files only.

JavaScript
FormWidgets.init('#fu6', 'FileUpload', {
    accept: '.xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    maxSize: 26214400  // 25MB
});

7. Auto-init via Data Attributes

Configure entirely via HTML attributes — no JavaScript required beyond autoInit().

HTML
<input type="file" class="fw-fileupload"
       data-accept="image/*"
       data-max-size="2097152">

<input type="file" class="fw-fileupload"
       data-accept=".pdf"
       data-max-size="10485760">

8. File Upload in a Form

Multiple file upload fields in a realistic form — profile photo and document.

JavaScript
FormWidgets.init('#fu8a', 'FileUpload', {
    accept: 'image/jpeg,image/png',
    maxSize: 1048576   // 1MB
});

FormWidgets.init('#fu8b', 'FileUpload', {
    accept: '.pdf,application/pdf',
    maxSize: 10485760  // 10MB
});