Stimulus File Input Validator

A Stimulus controller that allows you to run client side validations for files size and extension. This is an usefull aproachment for complement server side validations.

Installation

  yarn add stimulus-file-input-validator

Register the controller in your application

  import { Application } from '@hotwired/stimulus'
  import FileInputValidator from 'stimulus-file-input-validator'

  const application = Application.start()
  application.register("file-input-validator", FileInputValidator)

Usage

Define the following data:

• Add data-controller="file-input-validator"
• Add data-file-input-validator-max-file-size-value to load max file size allowed value in MB.
• Add data-file-input-validator-valid-extensions-value to load an array of allowed file extensions.
• Add an empty <div></div> with data-file-input-validator-target="errorMessage" target. Error messages will be loaded inside.
• Add a <template></template> with data-file-input-validator-target="errorTemplate" target and ERROR_MESSAGE. The template is going to be loaded into the error messages target div. This approach allows you to customize the design and keep the code clean.

  <form data-controller="file-input-validator"
    data-file-input-validator-max-file-size-value="20"
    data-file-input-validator-valid-extensions-value='["jpg", "png"]'>
    
    <label for="file-input" class="form-label">Load a file</label>

    <input type="file" data-file-input-validator-target="fileInput" data-action="change->file-input-validator#validate">

    <div class="form-text" data-file-input-validator-target="errorMessage"></div>

    <template data-file-input-validator-target="errorTemplate">
      <div class="alert alert-danger">
        ERROR_MESSAGE
      </div>
    </template>

    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

Custom messages

You can customize error messages by setting data-file-input-validator-max-file-exceeded-error-message-value and data-file-input-validator-invalid-extension-error-message-value.

  <form data-controller="file-input-validator"
    data-file-input-validator-max-file-size-value="20"
    data-file-input-validator-valid-extensions-value='["jpg", "png"]'
    data-file-input-validator-max-file-exceeded-error-message-value="Wrong file size"
    data-file-input-validator-invalid-extension-error-message-value="Invalid extension"
    >

If no custom error messages are set the controller will use the default values.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/martinnicolas/stimulus-file-input-validator.

License

The package is available as open source under the terms of the MIT License.