simple_form_bs5_file_input

A nice improvement for the file field in Simple Form.

Simple Form Bootstrap 5 File Input aims to add directs controls to your file fields in Simple Form.

Installation

Add it to your Gemfile:

gem 'simple_form_bs5_file_input'

Run the following command to install it:

bundle install

Add it to your application.sass:

@import 'simple_form_bs5_file_input'

Add it to your application.js:

//= require simple_form_bs5_file_input

Active Storage

Simple Form Bootstrap 5 File Input relies on Active Storage, so it presumes that you installed Active Storage.

Bootstrap

Simple Form Bootstrap 5 File Input relies on the Bootstrap 5 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:

rails generate simple_form:install --bootstrap

You have to be sure that you added a copy of the Bootstrap 5 assets on your application.

Usage

Simple Form Bootstrap 5 File Input comes with one new input type which is meant to replace the standard :file field: :single_deletable_file

To start using Simple Form Bootstrap 5 File Input you just have to change the input type of the :file field to these new kind.

So basically your field:

<%= f.input :my_file %>

becomes

<%= f.input :my_file,
            as: :single_deletable_file %>

Of course you can still add the options you want, like for example input_html: { accept: '.jpg,.jpeg,.png' }

You 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 witdh by default. Note that the preview uses the boostrap classes img-fluid and img-thumbnail.

Direct upload

The new field is still compatible with the direct_upload param.

<%= f.input :my_file,
            as: :single_deletable_file,
            direct_upload: true %>

Please remember to include the activestorage.js library in order to use the direct_upload feature. Direct upload will send the file BEFORE the page submission. You will get a progress bar in the file field while the file is uploading.

I18n

Simple Form Bootstrap 5 File Input uses the I18n API to manage the texts displayed. Feel free to overwrite the keys or add languages.

Information

Supported Ruby / Rails versions

We intend to maintain support for all Ruby / Rails versions that haven't reached end-of-life.

For more information about specific versions please check Ruby and Rails maintenance policies, and our test matrix.

Bug reports

If you discover any bugs, feel free to create an issue on GitHub. Please add as much information as possible to help us in fixing the potential bug. We also encourage you to help even more by forking and sending us a pull request.

https://github.com/noesya/simple_form_bs5_file_input/issues

Maintainers

License

MIT License.