FileUpload
fw-fileupload
A styled file input widget with configurable accepted file types and maximum file size validation. Provides visual feedback when a file is selected or when validation fails.
Usage
HTML (Auto-init)
HTML
<input type="file" class="fw-fileupload" id="myFile">
<script>
FormWidgets.autoInit();
</script>HTML with Data Attributes
HTML
<input type="file" class="fw-fileupload"
data-accept="image/*"
data-max-size="5242880">JavaScript Initialization
JavaScript
// Images only, 2MB max
FormWidgets.init('#myFile', 'FileUpload', {
accept: 'image/*',
maxSize: 2097152 // 2MB in bytes
});
// PDF only, 10MB max
FormWidgets.init('#pdfFile', 'FileUpload', {
accept: '.pdf,application/pdf',
maxSize: 10485760 // 10MB in bytes
});Options
| Option | Type | Default | Description |
|---|---|---|---|
| maxSize | number | null | Maximum allowed file size in bytes. Files exceeding this limit show a validation error. |
| accept | string | '' | Comma-separated list of accepted file types. Follows the HTML accept attribute syntax (e.g. image/*, .pdf,.docx). |
| icon | string | 'upload' | Name of the SVG icon to use from the internal icon set. |
| required | boolean | false | Marks the field as required. |
Data Attributes
| Data Attribute | Equivalent Option | Example |
|---|---|---|
| data-accept | accept | data-accept="image/*" |
| data-max-size | maxSize | data-max-size="5242880" |
| data-required | required | data-required="true" |
Common File Size Values
| Size | Bytes | maxSize value |
|---|---|---|
| 500 KB | 512,000 | 512000 |
| 1 MB | 1,048,576 | 1048576 |
| 2 MB | 2,097,152 | 2097152 |
| 5 MB | 5,242,880 | 5242880 |
| 10 MB | 10,485,760 | 10485760 |
| 25 MB | 26,214,400 | 26214400 |
Common Accept Values
| Value | Accepts |
|---|---|
image/* | All image types (JPEG, PNG, GIF, WebP, etc.) |
image/jpeg,image/png | JPEG and PNG only |
.pdf | PDF files |
.pdf,application/pdf | PDF files (more compatible) |
.doc,.docx | Word documents |
.xls,.xlsx | Excel spreadsheets |
.pdf,.doc,.docx | PDF and Word documents |
video/* | All video types |
audio/* | All audio types |
.zip,.tar,.gz | Archive files |
Features
Size Validation
Files exceeding maxSize show an inline error message.
Type Filtering
Use accept to restrict file types — the file dialog filters automatically.
Visual Feedback
Shows the selected filename after a file is chosen.
Consistent Styling
Matches all other FormWidget fields for a unified appearance.