https://github.com/martinnicolas/stimulus-file-input-validator

Client side file input validations for files size and extension
https://github.com/martinnicolas/stimulus-file-input-validator

npm-package stimulus-components stimulus-controller stimulus-js stimulusjs

Last synced: 1 day ago
JSON representation

Client side file input validations for files size and extension

• Host: GitHub
• URL: https://github.com/martinnicolas/stimulus-file-input-validator
• Owner: martinnicolas
• License: mit
• Created: 2024-11-08T22:54:38.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-02-04T13:16:07.000Z (about 1 year ago)
• Last Synced: 2025-04-23T14:14:49.114Z (10 months ago)
• Topics: npm-package, stimulus-components, stimulus-controller, stimulus-js, stimulusjs
• Language: TypeScript
• Homepage: https://stimulus-file-input-validator.netlify.app/
• Size: 153 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Stimulus File Input Validator

[![npm version](https://badge.fury.io/js/stimulus-file-input-validator.svg?icon=si%3Anpm)](https://badge.fury.io/js/stimulus-file-input-validator)

[![npm total downloads](https://img.shields.io/npm/dt/stimulus-file-input-validator.svg)](https://www.npmjs.com/package/stimulus-file-input-validator)

[![Tests](https://github.com/martinnicolas/stimulus-file-input-validator/actions/workflows/tests.yml/badge.svg)](https://github.com/martinnicolas/stimulus-file-input-validator/actions/workflows/tests.yml) 

[![Coverage](https://github.com/martinnicolas/stimulus-file-input-validator/actions/workflows/coverage.yml/badge.svg)](https://github.com/martinnicolas/stimulus-file-input-validator/actions/workflows/coverage.yml) 

[![Lint](https://github.com/martinnicolas/stimulus-file-input-validator/actions/workflows/lint.yml/badge.svg)](https://github.com/martinnicolas/stimulus-file-input-validator/actions/workflows/lint.yml) 

[![Wercker](https://img.shields.io/github/license/mashape/apistatus.svg)](https://opensource.org/licenses/MIT)

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

```bash

  yarn add stimulus-file-input-validator

```

## Register the controller in your application 

```javascript

  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 `
` with `data-file-input-validator-target="errorMessage"` target. Error messages will be loaded inside.

- Add a `` 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.


```html

  

    

    Load a file

    

    


    

      


        ERROR_MESSAGE

      

    


    Submit

  

```

## Custom messages

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

```html

  

```

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

## Support for multiple files validations

You can use `multiple` html attribute to apply the validations values to multiple files.

```html

  

```

## 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](https://opensource.org/licenses/MIT).