FileSizeValidatorController

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:
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}

Description:

  • Build error message for invalid files

Source:
Parameters:
Name Type Description
invalidFiles Array

Array of invalid file objects
Returns:

Error message with HTML-escaped file names

Type
string

buildTotalSizeWarningMessage(totalSize, fileCount) → {string}

Description:

  • Build warning message for total size

Source:
Parameters:
Name Type Description
totalSize number

Total size in bytes
fileCount number

Number of files
Returns:

Warning message

Type
string

checkFileSizes(files) → {Object}

Description:

  • Check file sizes and return validation result

Source:
Parameters:
Name Type Description
files Array.<File>

Array of File objects
Returns:

Validation result

Type
Object

clearWarning()

Description:

  • Clear warning message

Source:

connect()

Description:

  • Initialize controller

Source:

disableSubmit()

Description:

  • Disable submit button

Source:

dispatch(eventName, options)

Description:

  • Dispatch custom event

Source:
Parameters:
Name Type Description
eventName string

Event name (without prefix)
options Object

Event options

enableSubmit()

Description:

  • Enable submit button

Source:

escapeHtml(str) → {string}

Description:

  • Escape HTML special characters to prevent XSS

Source:
Parameters:
Name Type Description
str string

String to escape
Returns:

Escaped string

Type
string

formatBytes(bytes, decimals) → {string}

Description:

  • Format bytes to human-readable string

Source:
Parameters:
Name Type Default Description
bytes number

Size in bytes
decimals number 2

Number of decimal places
Returns:

Formatted size string

Type
string

formatWarningMessage(message, type) → {string}

Description:

  • Format warning message with icon

Source:
Parameters:
Name Type Default Description
message string

Warning message
type string warning

Message type ('error' or 'warning')
Returns:

Formatted HTML

Type
string

showInvalidFilesWarning(validation)

Description:

  • Show warning for invalid files

Source:
Parameters:
Name Type Description
validation Object

Validation result

showTotalSizeWarning(validation)

Description:

  • Show warning for total size

Source:
Parameters:
Name Type Description
validation Object

Validation result

validateFiles(event)

Description:

  • Validate selected files

Source:
Parameters:
Name Type Description
event Event

File input change event