{"id":21615640,"url":"https://github.com/noesya/simple_form_bs5_file_input","last_synced_at":"2026-02-22T00:37:21.590Z","repository":{"id":39637785,"uuid":"416411038","full_name":"noesya/simple_form_bs5_file_input","owner":"noesya","description":null,"archived":false,"fork":false,"pushed_at":"2026-01-26T16:36:38.000Z","size":202,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-01-27T04:48:53.900Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Ruby","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/noesya.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-10-12T16:18:22.000Z","updated_at":"2026-01-26T16:36:14.000Z","dependencies_parsed_at":"2025-04-11T07:25:27.843Z","dependency_job_id":"8f67676c-767e-4f63-8c4f-79e609aa111a","html_url":"https://github.com/noesya/simple_form_bs5_file_input","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/noesya/simple_form_bs5_file_input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noesya%2Fsimple_form_bs5_file_input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noesya%2Fsimple_form_bs5_file_input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noesya%2Fsimple_form_bs5_file_input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noesya%2Fsimple_form_bs5_file_input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/noesya","download_url":"https://codeload.github.com/noesya/simple_form_bs5_file_input/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noesya%2Fsimple_form_bs5_file_input/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29700768,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T23:35:04.139Z","status":"ssl_error","status_checked_at":"2026-02-21T23:35:03.832Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-11-24T22:12:24.327Z","updated_at":"2026-02-22T00:37:21.585Z","avatar_url":"https://github.com/noesya.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# simple_form_bs5_file_input\n\nA nice improvement for the `file` field in [Simple Form](https://github.com/heartcombo/simple_form).\n\n**Simple Form Bootstrap 5 File Input** aims to add directs controls to your file fields in Simple Form.\n\n\n## Installation\n\nAdd it to your Gemfile:\n\n```ruby\ngem 'simple_form_bs5_file_input'\n```\n\nRun the following command to install it:\n\n```console\nbundle install\n```\n\nAdd it to your application.sass:\n\n```\n@import 'simple_form_bs5_file_input'\n```\n\nAdd it to your application.js:\n\n```\n//= require simple_form_bs5_file_input\n```\n\n### Active Storage\n\n**Simple Form Bootstrap 5 File Input** relies on [Active Storage](https://github.com/rails/rails/tree/main/activestorage), so it presumes that you installed Active Storage.\n\n### Bootstrap\n\n**Simple Form Bootstrap 5 File Input** relies on the [Bootstrap 5](http://getbootstrap.com/) markup, so it presumes that you installed Simple Form with the Bootstrap option. To do that you have to use the `bootstrap` option in the Simple Form install generator, like this:\n\n```console\nrails generate simple_form:install --bootstrap\n```\n\nYou have to be sure that you added a copy of the [Bootstrap 5](http://getbootstrap.com/)\nassets on your application.\n\n## Usage\n**Simple Form Bootstrap 5 File Input** comes with one new input type which is meant to replace the standard `:file` field: `:single_deletable_file`\n\nTo start using **Simple Form Bootstrap 5 File Input** you just have to change the input type of the `:file` field to these new kind.\n\nSo basically your field:\n```erb\n\u003c%= f.input :my_file %\u003e\n```\nbecomes\n```erb\n\u003c%= f.input :my_file,\n            as: :single_deletable_file %\u003e\n```\nOf course you can still add the options you want, like for example `input_html: { accept: '.jpg,.jpeg,.png' }`\n\nYou can also add a direct preview (WARNING: preview can only work with images!) by using `preview: true` or any custom width for the preview: `preview: 500`. If you don't specify the preview size it will be 1000px width by default.\nNote that the preview uses the boostrap classes `img-fluid` and `img-thumbnail`.\n\n### Model\nYou also have to change the type of you file in your model.\nSo instead of declaring:\n```\nhas_one_attached :picture\n```\n\nyou will have to declare:\n```\nhas_one_attached_deletable :picture\n```\n\n### Controller\nIf you use strict parameters you will need to allow the `:[filename]_delete` and the `:[filename]_infos` params in the controller.\nSo instead of:\n```\nparams.require(:user).permit(:first_name, :last_name, :picture)\n```\nyou will have:\n```\nparams.require(:user).permit(:first_name, :last_name, :picture, :picture_delete, :picture_infos)\n```\n\nThat's all folks!\n\n## Direct upload\n\nThe new field is still compatible with the `direct_upload` param.\n```erb\n\u003c%= f.input :my_file,\n            as: :single_deletable_file,\n            direct_upload: true %\u003e\n```\nPlease remember to include the `activestorage.js` library in order to use the direct_upload feature.\nDirect upload will send the file BEFORE the page submission. You will get a progress bar in the file field while the file is uploading.\n\n## Resize\n\nYou can add an option to the field to resize the image after upload (of course it has to be an image!).\n\nAdd `resize: true` to your field.\n\nYou can also specify a ratio for the cropper. For example `resize: 1` will lock the aspect ratio to a square. Beware of the float constraints in rails. If you want a 4/3 ratio use `resize: 4/3.to_f` as 4/3 otherwise gives 1.\n\n\nThe resizer is based on [CropperJS](https://github.com/fengyuanchen/cropperjs) so you have to add cropper to your dependencies:\n```\nyarn add cropperjs\n```\nthen include the js files in your application.js file:\n```\n//= require cropperjs/dist/cropper\n```\nand include the css in your application.sass file:\n```\n@import 'cropperjs/dist/cropper'\n```\n\nIn your `config/application.yml`, to support `+repage`, you have to add `+` method in supported operations.\n```ruby\nmodule MyApp\n  class Application \u003c Rails::Application\n    # ...\n    config.active_storage.supported_image_processing_methods = [\"+\"]\n  end\nend\n```\n\n## I18n\n\n**Simple Form Bootstrap 5 File Input** uses the I18n API to manage the texts displayed. Feel free to overwrite the keys or add languages.\n\n## Notes\n\n### Callbacks\n\nWhen the resize feature is activated **Simple Form Bootstrap 5 File Input** uses an `after_commit` hook to resize the image. The model linked to the attachment will then be touched.  \nIt might cause a problem because messing with others `after_commit` hooks. For example it messes with the Devise `confirmable` module, where the confirmation email is also send on after_commit.   \nBefore Rails 7.1 after_commit is the only hook executed backward. So if you add after_commit :function1, then after_commit :function2, function2 will be executed BEFORE function1.  \nAfter Rails 7.1 after_commit follows the regular order, so function1 will be executed before function2.  \nSo for Devise Confirmable, it must be declared AFTER the `has_one_attached_deletable` declaration if Rails version \u003c 7.1, and declared BEFORE the `has_one_attached_deletable` declaration if Rails version \u003e= 7.1\n\n\n## Information\n\n### Supported Ruby / Rails versions\n\nWe intend to maintain support for all Ruby / Rails versions that haven't reached end-of-life.\n\nFor more information about specific versions please check [Ruby](https://www.ruby-lang.org/en/downloads/branches/)\nand [Rails](https://guides.rubyonrails.org/maintenance_policy.html) maintenance policies, and our test matrix.\n\n### Bug reports\n\nIf you discover any bugs, feel free to create an issue on GitHub. Please add as much information as\npossible to help us in fixing the potential bug. We also encourage you to help even more by forking and sending us a pull request.\n\nhttps://github.com/noesya/simple_form_bs5_file_input/issues\n\n## Maintainers\n\n* Pierre-André Boissinot (https://github.com/pabois)\n\n\n## License\n\nMIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoesya%2Fsimple_form_bs5_file_input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoesya%2Fsimple_form_bs5_file_input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoesya%2Fsimple_form_bs5_file_input/lists"}