{"id":20718979,"url":"https://github.com/martinnicolas/stimulus-file-input-validator","last_synced_at":"2026-02-12T03:35:55.337Z","repository":{"id":261874701,"uuid":"885598225","full_name":"martinnicolas/stimulus-file-input-validator","owner":"martinnicolas","description":"Client side file input validations for files size and extension","archived":false,"fork":false,"pushed_at":"2025-02-04T13:16:07.000Z","size":157,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-23T14:14:49.114Z","etag":null,"topics":["npm-package","stimulus-components","stimulus-controller","stimulus-js","stimulusjs"],"latest_commit_sha":null,"homepage":"https://stimulus-file-input-validator.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/martinnicolas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-08T22:54:38.000Z","updated_at":"2025-02-04T13:16:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"f290844a-c6b2-4382-931a-d932542d6540","html_url":"https://github.com/martinnicolas/stimulus-file-input-validator","commit_stats":null,"previous_names":["martinnicolas/stimulus-file-input-validator"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinnicolas%2Fstimulus-file-input-validator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinnicolas%2Fstimulus-file-input-validator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinnicolas%2Fstimulus-file-input-validator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinnicolas%2Fstimulus-file-input-validator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/martinnicolas","download_url":"https://codeload.github.com/martinnicolas/stimulus-file-input-validator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250447979,"owners_count":21432165,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["npm-package","stimulus-components","stimulus-controller","stimulus-js","stimulusjs"],"created_at":"2024-11-17T03:15:31.871Z","updated_at":"2026-02-12T03:35:55.332Z","avatar_url":"https://github.com/martinnicolas.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stimulus File Input Validator\n[![npm version](https://badge.fury.io/js/stimulus-file-input-validator.svg?icon=si%3Anpm)](https://badge.fury.io/js/stimulus-file-input-validator)\n[![npm total downloads](https://img.shields.io/npm/dt/stimulus-file-input-validator.svg)](https://www.npmjs.com/package/stimulus-file-input-validator)\n[![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) \n[![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) \n[![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) \n[![Wercker](https://img.shields.io/github/license/mashape/apistatus.svg)](https://opensource.org/licenses/MIT)\n\nA 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.\n\n## Installation\n\n```bash\n  yarn add stimulus-file-input-validator\n```\n\n## Register the controller in your application \n\n```javascript\n  import { Application } from '@hotwired/stimulus'\n  import FileInputValidator from 'stimulus-file-input-validator'\n\n  const application = Application.start()\n  application.register(\"file-input-validator\", FileInputValidator)\n```\n\n## Usage\n\nDefine the following data:\n\n- Add `data-controller=\"file-input-validator\"` \n- Add `data-file-input-validator-max-file-size-value` to load max file size allowed value in MB. \n- Add `data-file-input-validator-valid-extensions-value` to load an array of allowed file extensions. \n- Add an empty `\u003cdiv\u003e\u003c/div\u003e` with `data-file-input-validator-target=\"errorMessage\"` target. Error messages will be loaded inside.\n- Add a `\u003ctemplate\u003e\u003c/template\u003e` 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.\n\n```html\n  \u003cform data-controller=\"file-input-validator\"\n    data-file-input-validator-max-file-size-value=\"20\"\n    data-file-input-validator-valid-extensions-value='[\"jpg\", \"png\"]'\u003e\n    \n    \u003clabel for=\"file-input\" class=\"form-label\"\u003eLoad a file\u003c/label\u003e\n\n    \u003cinput type=\"file\" data-file-input-validator-target=\"fileInput\" data-action=\"change-\u003efile-input-validator#validate\"\u003e\n\n    \u003cdiv class=\"form-text\" data-file-input-validator-target=\"errorMessage\"\u003e\u003c/div\u003e\n\n    \u003ctemplate data-file-input-validator-target=\"errorTemplate\"\u003e\n      \u003cdiv class=\"alert alert-danger\"\u003e\n        ERROR_MESSAGE\n      \u003c/div\u003e\n    \u003c/template\u003e\n\n    \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eSubmit\u003c/button\u003e\n  \u003c/form\u003e\n```\n\n## Custom messages\n\nYou 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`.\n\n```html\n  \u003cform data-controller=\"file-input-validator\"\n    data-file-input-validator-max-file-size-value=\"20\"\n    data-file-input-validator-valid-extensions-value='[\"jpg\", \"png\"]'\n    data-file-input-validator-max-file-size-exceeded-error-message-value=\"Wrong file size\"\n    data-file-input-validator-invalid-extension-error-message-value=\"Invalid extension\"\n    \u003e\n```\nIf no custom error messages are set the controller will use the default values.\n\n## Support for multiple files validations\n\nYou can use `multiple` html attribute to apply the validations values to multiple files.\n\n```html\n  \u003cinput type=\"file\" multiple id=\"myfile\" name=\"myfile\" data-file-input-validator-target=\"fileInput\" data-action=\"change-\u003efile-input-validator#validate\"\u003e\n```\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/martinnicolas/stimulus-file-input-validator.\n\n## License\n\nThe package is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinnicolas%2Fstimulus-file-input-validator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmartinnicolas%2Fstimulus-file-input-validator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinnicolas%2Fstimulus-file-input-validator/lists"}