{"id":14972419,"url":"https://github.com/johann-s/bs-custom-file-input","last_synced_at":"2025-04-04T10:07:07.977Z","repository":{"id":41474490,"uuid":"145163319","full_name":"Johann-S/bs-custom-file-input","owner":"Johann-S","description":"A little plugin for Bootstrap 4 custom file input","archived":false,"fork":false,"pushed_at":"2023-01-05T16:14:16.000Z","size":969,"stargazers_count":209,"open_issues_count":42,"forks_count":38,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-04T09:43:46.527Z","etag":null,"topics":["angular","bootstrap","bootstrap4","custom-input","react","typescript","vanilla-javascript","vanilla-js","vanillajs"],"latest_commit_sha":null,"homepage":"https://bs-custom-file-input.netlify.com/","language":"JavaScript","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/Johann-S.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"patreon":"jservoire","liberapay":"Johann-S","custom":"https://www.paypal.me/jservoire"}},"created_at":"2018-08-17T20:22:48.000Z","updated_at":"2025-02-10T16:54:14.000Z","dependencies_parsed_at":"2023-02-04T06:45:43.929Z","dependency_job_id":null,"html_url":"https://github.com/Johann-S/bs-custom-file-input","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Johann-S%2Fbs-custom-file-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Johann-S%2Fbs-custom-file-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Johann-S%2Fbs-custom-file-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Johann-S%2Fbs-custom-file-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Johann-S","download_url":"https://codeload.github.com/Johann-S/bs-custom-file-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247157281,"owners_count":20893220,"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":["angular","bootstrap","bootstrap4","custom-input","react","typescript","vanilla-javascript","vanilla-js","vanillajs"],"created_at":"2024-09-24T13:46:53.483Z","updated_at":"2025-04-04T10:07:07.952Z","avatar_url":"https://github.com/Johann-S.png","language":"JavaScript","funding_links":["https://patreon.com/jservoire","https://liberapay.com/Johann-S","https://www.paypal.me/jservoire","https://www.patreon.com/jservoire"],"categories":[],"sub_categories":[],"readme":"# bs-custom-file-input\n\n[![npm version](https://img.shields.io/npm/v/bs-custom-file-input.svg)](https://www.npmjs.com/package/bs-custom-file-input)\n[![dependencies Status](https://img.shields.io/david/Johann-S/bs-custom-file-input.svg)](https://david-dm.org/Johann-S/bs-custom-file-input)\n[![devDependencies Status](https://img.shields.io/david/dev/Johann-S/bs-custom-file-input.svg)](https://david-dm.org/Johann-S/bs-custom-file-input?type=dev)\n[![Build Status](https://github.com/Johann-S/bs-custom-file-input/workflows/Tests/badge.svg)](https://github.com/Johann-S/bs-custom-file-input/actions?workflow=Tests)\n[![Coverage Status](https://img.shields.io/coveralls/github/Johann-S/bs-custom-file-input/master.svg)](https://coveralls.io/github/Johann-S/bs-custom-file-input?branch=master)\n[![JS gzip size](https://img.badgesize.io/Johann-S/bs-custom-file-input/master/dist/bs-custom-file-input.min.js?compression=gzip\u0026label=JS+gzip+size)](https://github.com/Johann-S/bs-custom-file-input/tree/master/dist/bs-custom-file-input.min.js)\n[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=L1Z6cllmR0pVVUZBRmxTaGtEcm1QamUxdTZoQmRLeUFvWVlOcW5iODNVWT0tLUZTVWRKUzc4T05xSmhlZlJObVRKNEE9PQ==--177788f5ac0c50dcd3dd3eed31e39662d5612e7f)](https://www.browserstack.com/automate/public-build/L1Z6cllmR0pVVUZBRmxTaGtEcm1QamUxdTZoQmRLeUFvWVlOcW5iODNVWT0tLUZTVWRKUzc4T05xSmhlZlJObVRKNEE9PQ==--177788f5ac0c50dcd3dd3eed31e39662d5612e7f)\n\nA little plugin which makes Bootstrap 4 custom file input dynamic with no dependencies.\n\nYou can use it on [React](https://stackblitz.com/edit/bs-custom-file-input-react) and [Angular](https://stackblitz.com/edit/bs-custom-file-input-angular) too because this plugin is written with the most used JavaScript framework: [VanillaJS](http://vanilla-js.com/).\n\n[Demo](https://bs-custom-file-input.netlify.com/)\n\nFeatures:\n\n- Works with Bootstrap 4\n- Works without *dependencies* and jQuery\n- Display file name\n- Display file names for `multiple` input\n- Reset your custom file input to its initial state\n- Handle form reset\n- Allow custom selectors for input, and form\n- Allow to drag and drop files\n- Allow you to change the default display with a child in the `\u003clabel\u003e` element\n- Built in UMD to be used everywhere\n- Small, only **2kb** and less if you gzip it\n\n## Table of contents\n\n- [Install](#install)\n- [How to use it](#how-to-use-it)\n- [Methods](#methods)\n- [Compatibility](#compatibility)\n- [Support me](#support-me)\n- [Thanks](#thanks)\n- [License](#license)\n\n## Install\n\n### With npm\n\n```sh\nnpm install bs-custom-file-input --save\n```\n\n### CDN\n\nCDN | Link\n------------ | -------------\njsDelivr | [`https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js`](https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js)\njsDelivr, minified | [`https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js`](https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js)\n\n## How to use it\n\nYou should wait for the document ready event and call the `init` method to make your custom file input dynamic.\nWe expose one global variable available everywhere: `bsCustomFileInput`\n\n```js\n$(document).ready(function () {\n  bsCustomFileInput.init()\n})\n```\n\n### Use it with npm\n\n```js\nimport bsCustomFileInput from 'bs-custom-file-input'\n```\n\nFor more examples check out [this file](https://github.com/Johann-S/bs-custom-file-input/blob/master/tests/index.html).\n\nThis library is UMD ready so you can use it everywhere.\n\n## Methods\n\n### init\n\nFinds your Bootstrap custom file input and will make them dynamic.\n\n#### Parameters\n\n- `inputSelector`\n  - default value: `.custom-file input[type=\"file\"]`\n  - type: `string`\n\n  You can pass a custom input selector, but be sure to pass a **file input selector**\n- `formSelector`\n  - default value: `form`\n  - type: `string`\n\n  Allows you to pass a custom form selector, but be sure to pass a **form selector**\n\n### destroy\n\nRemoves this plugin from your Bootstrap custom file input and restore them at their first initial state\n\n## Compatibility\n\nbsCustomFileInput is compatible with:\n\n- IE10+\n- Edge\n- Firefox\n- Chrome\n- Safari\n- Chrome Android\n- Safari iOS\n\nYou can find our BrowserStack list of browsers [here](https://github.com/Johann-S/bs-custom-file-input/blob/master/browsers.js).\n\n## Support me\n\nIf you want to thank me, you can support me and become my [Patron](https://www.patreon.com/jservoire)\n\n## Thanks\n\n[![BrowserStack Logo](https://www.browserstack.com/images/mail/browserstack-logo-footer.png)](https://www.browserstack.com/)\n\nThanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers!\n\n## License\n\n[MIT](https://github.com/Johann-S/bs-custom-file-input/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohann-s%2Fbs-custom-file-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohann-s%2Fbs-custom-file-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohann-s%2Fbs-custom-file-input/lists"}