On this page

FileSizeValidatorController

File Size Validator Controller

Validates file sizes against PHP upload limits before submission. Provides immediate feedback to users when files exceed server limits, preventing failed uploads and improving user experience.

Features:

Pre-upload file size validation
Multiple file support
Customizable warning messages
Integration with existing upload controls
Real-time feedback on file selection

Values:

maxSize: Maximum file size in bytes (from PHP upload_max_filesize/post_max_size)
maxSizeFormatted: Human-readable max size (e.g., '25MB')
totalMaxSize: Maximum total size for multiple files (defaults to maxSize)
showWarning: Whether to show warning messages (default: true)

Targets:

fileInput: File input element(s) to monitor
warning: Container for warning messages (optional)
submitButton: Submit button to disable when files are invalid (optional)

Events Dispatched:

file-size-validator:valid - All files are valid
file-size-validator:invalid - One or more files exceed limits
file-size-validator:warning - Warning displayed to user

Usage:

<div data-controller="file-size-validator"
     data-file-size-validator-max-size-value="26214400"
     data-file-size-validator-max-size-formatted-value="25MB">
  
  <input type="file" 
         data-file-size-validator-target="fileInput"
         data-action="change->file-size-validator#validateFiles">
  
  <div data-file-size-validator-target="warning" 
       class="alert alert-warning d-none"></div>
  
  <button type="submit" 
          data-file-size-validator-target="submitButton">
    Upload
  </button>
</div>

Constructor

new FileSizeValidatorController()

Source: assets/js/controllers/file-size-validator-controller.js, line 68

Examples

Multiple Files
```html
<input type="file" 
       multiple
       data-file-size-validator-target="fileInput"
       data-action="change->file-size-validator#validateFiles">
```

Custom Total Limit
```html
<div data-controller="file-size-validator"
     data-file-size-validator-max-size-value="26214400"
     data-file-size-validator-total-max-size-value="52428800">
```

Methods

buildInvalidFilesMessage(invalidFiles) → {string}

Build error message for invalid files

Parameters:

Name	Type	Description
`invalidFiles`	Array	Array of invalid file objects

Source: assets/js/controllers/file-size-validator-controller.js, line 244

Returns:

Error message with HTML-escaped file names

Type:: string

buildTotalSizeWarningMessage(totalSize, fileCount) → {string}

Build warning message for total size

Parameters:

Name	Type	Description
`totalSize`	number	Total size in bytes
`fileCount`	number	Number of files

Source: assets/js/controllers/file-size-validator-controller.js, line 267

Returns:

Warning message

Type:: string

checkFileSizes(files) → {Object}

Check file sizes and return validation result

Parameters:

Name	Type	Description
`files`	Array.<File>	Array of File objects

Source: assets/js/controllers/file-size-validator-controller.js, line 176

Returns:

Validation result

Type:: Object

clearWarning()

Clear warning message

Source: assets/js/controllers/file-size-validator-controller.js, line 333

connect()

Initialize controller

Source: assets/js/controllers/file-size-validator-controller.js, line 83

disableSubmit()

Disable submit button

Source: assets/js/controllers/file-size-validator-controller.js, line 343

dispatch(eventName, options)

Dispatch custom event

Parameters:

Name	Type	Description
`eventName`	string	Event name (without prefix)
`options`	Object	Event options

Source: assets/js/controllers/file-size-validator-controller.js, line 387

enableSubmit()

Enable submit button

Source: assets/js/controllers/file-size-validator-controller.js, line 354

escapeHtml(str) → {string}

Escape HTML special characters to prevent XSS

Parameters:

Name	Type	Description
`str`	string	String to escape

Source: assets/js/controllers/file-size-validator-controller.js, line 232

Returns:

Escaped string

Type:: string

formatBytes(bytes, decimals) → {string}

Format bytes to human-readable string

Parameters:

Name	Type	Default	Description
`bytes`	number		Size in bytes
`decimals`	number	2	Number of decimal places

Source: assets/js/controllers/file-size-validator-controller.js, line 369

Returns:

Formatted size string

Type:: string

formatWarningMessage(message, type) → {string}

Format warning message with icon

Parameters:

Name	Type	Default	Description
`message`	string		Warning message
`type`	string	warning	Message type ('error' or 'warning')

Source: assets/js/controllers/file-size-validator-controller.js, line 319

Returns:

Formatted HTML

Type:: string

showInvalidFilesWarning(validation)

Show warning for invalid files

Parameters:

Name	Type	Description
`validation`	Object	Validation result

Source: assets/js/controllers/file-size-validator-controller.js, line 283

showTotalSizeWarning(validation)

Show warning for total size

Parameters:

Name	Type	Description
`validation`	Object	Validation result

Source: assets/js/controllers/file-size-validator-controller.js, line 300

validateFiles(event)

Validate selected files

Parameters:

Name	Type	Description
`event`	Event	File input change event

Source: assets/js/controllers/file-size-validator-controller.js, line 110