simple_form_bs5_file_input 0.0.2 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0a01187ab37b834c60ee0739e576f7b35869e27657fd2ccecaf0cc75ecabc1aa
-  data.tar.gz: 4f5b26770518772bf430cfffd9592125fd455b2e9247eb9af9eb20ebe0764121
+  metadata.gz: ce2c3270b2eca308b30ab139a6c4c8df318b424f625f8c6960689a2a800bc5d0
+  data.tar.gz: cd16c846ae93111c0e24b4679300cd01c3fc8dd57b392ac311841f7615f71bd4
 SHA512:
-  metadata.gz: 367087c90da736c938022e8bc4fd1bb6b449fc3ef7b8b60cbff799655d4133317aeb080f516e81548b9f22099b5e17a56ec8272a72f7031450017e39c9270393
-  data.tar.gz: 01dba7a9ed7983a2cc748292f3e41031920499d4eebe16628e790f2d6ff03de51790fc7be7fd69333a92ac459377365527de43734794576958bcc8eb97d3e2b6
+  metadata.gz: 29bf87c40cc7d39872d0f0849e5b205dc50853545cbd4bde6b601ae6cae9b874391cc94362e2faaadc509090764a4b4b7a98a73d2a5549ac95ba2840c51ea210
+  data.tar.gz: 3f626b446645c0ee7f0f82cc97683497d9378ac93b97afc632e62b364e477f13b5af9ca33041088262055389274a5de14fdd47f5df7e47789f64d5ef60a20b26

data/.gitignore

@@ -0,0 +1,2 @@
+# Ignore pkg files
+/pkg

data/Gemfile.lock

@@ -1,105 +1,112 @@
 PATH
   remote: .
   specs:
-    simple_form_bs5_file_input (0.0.2)
+    simple_form_bs5_file_input (0.0.5)
       rails
       simple_form
 
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actioncable (7.0.3)
+      actionpack (= 7.0.3)
+      activesupport (= 7.0.3)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      activejob (= 6.1.4.1)
-      activerecord (= 6.1.4.1)
-      activestorage (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actionmailbox (7.0.3)
+      actionpack (= 7.0.3)
+      activejob (= 7.0.3)
+      activerecord (= 7.0.3)
+      activestorage (= 7.0.3)
+      activesupport (= 7.0.3)
       mail (>= 2.7.1)
-    actionmailer (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      actionview (= 6.1.4.1)
-      activejob (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+      net-imap
+      net-pop
+      net-smtp
+    actionmailer (7.0.3)
+      actionpack (= 7.0.3)
+      actionview (= 7.0.3)
+      activejob (= 7.0.3)
+      activesupport (= 7.0.3)
       mail (~> 2.5, >= 2.5.4)
+      net-imap
+      net-pop
+      net-smtp
       rails-dom-testing (~> 2.0)
-    actionpack (6.1.4.1)
-      actionview (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
-      rack (~> 2.0, >= 2.0.9)
+    actionpack (7.0.3)
+      actionview (= 7.0.3)
+      activesupport (= 7.0.3)
+      rack (~> 2.0, >= 2.2.0)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      activerecord (= 6.1.4.1)
-      activestorage (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actiontext (7.0.3)
+      actionpack (= 7.0.3)
+      activerecord (= 7.0.3)
+      activestorage (= 7.0.3)
+      activesupport (= 7.0.3)
+      globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actionview (7.0.3)
+      activesupport (= 7.0.3)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
-    activejob (6.1.4.1)
-      activesupport (= 6.1.4.1)
+    activejob (7.0.3)
+      activesupport (= 7.0.3)
       globalid (>= 0.3.6)
-    activemodel (6.1.4.1)
-      activesupport (= 6.1.4.1)
-    activerecord (6.1.4.1)
-      activemodel (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
-    activestorage (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      activejob (= 6.1.4.1)
-      activerecord (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
-      marcel (~> 1.0.0)
+    activemodel (7.0.3)
+      activesupport (= 7.0.3)
+    activerecord (7.0.3)
+      activemodel (= 7.0.3)
+      activesupport (= 7.0.3)
+    activestorage (7.0.3)
+      actionpack (= 7.0.3)
+      activejob (= 7.0.3)
+      activerecord (= 7.0.3)
+      activesupport (= 7.0.3)
+      marcel (~> 1.0)
       mini_mime (>= 1.1.0)
-    activesupport (6.1.4.1)
+    activesupport (7.0.3)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
-      zeitwerk (~> 2.3)
-    autoprefixer-rails (10.3.3.0)
+    autoprefixer-rails (10.4.7.0)
       execjs (~> 2)
-    bcrypt (3.1.16)
-    bootsnap (1.9.1)
-      msgpack (~> 1.0)
-    bootstrap (5.1.0)
+    bcrypt (3.1.18)
+    bootsnap (1.11.1)
+      msgpack (~> 1.2)
+    bootstrap (5.1.3)
       autoprefixer-rails (>= 9.1.0)
       popper_js (>= 2.9.3, < 3)
       sassc-rails (>= 2.0.0)
     builder (3.2.4)
-    concurrent-ruby (1.1.9)
+    concurrent-ruby (1.1.10)
     crass (1.0.6)
-    devise (4.8.0)
+    devise (4.8.1)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
       railties (>= 4.1.0)
       responders
       warden (~> 1.2.3)
+    digest (3.1.0)
     erubi (1.10.0)
     execjs (2.8.1)
-    ffi (1.15.4)
-    globalid (0.5.2)
+    ffi (1.15.5)
+    globalid (1.0.0)
       activesupport (>= 5.0)
-    i18n (1.8.10)
+    i18n (1.10.0)
       concurrent-ruby (~> 1.0)
-    jquery-rails (4.4.0)
+    jquery-rails (4.5.0)
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    listen (3.7.0)
+    listen (3.7.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.12.0)
+    loofah (2.18.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
@@ -107,48 +114,62 @@ GEM
     marcel (1.0.2)
     method_source (1.0.0)
     mini_mime (1.1.2)
-    mini_portile2 (2.6.1)
-    minitest (5.14.4)
-    msgpack (1.4.2)
+    mini_portile2 (2.8.0)
+    minitest (5.15.0)
+    msgpack (1.5.2)
+    net-imap (0.2.3)
+      digest
+      net-protocol
+      strscan
+    net-pop (0.1.1)
+      digest
+      net-protocol
+      timeout
+    net-protocol (0.1.3)
+      timeout
+    net-smtp (0.3.1)
+      digest
+      net-protocol
+      timeout
     nio4r (2.5.8)
-    nokogiri (1.12.5)
-      mini_portile2 (~> 2.6.1)
+    nokogiri (1.13.6)
+      mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
     orm_adapter (0.5.0)
-    pg (1.2.3)
+    pg (1.3.5)
     popper_js (2.9.3)
-    racc (1.5.2)
-    rack (2.2.3)
+    racc (1.6.0)
+    rack (2.2.3.1)
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
-    rails (6.1.4.1)
-      actioncable (= 6.1.4.1)
-      actionmailbox (= 6.1.4.1)
-      actionmailer (= 6.1.4.1)
-      actionpack (= 6.1.4.1)
-      actiontext (= 6.1.4.1)
-      actionview (= 6.1.4.1)
-      activejob (= 6.1.4.1)
-      activemodel (= 6.1.4.1)
-      activerecord (= 6.1.4.1)
-      activestorage (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    rails (7.0.3)
+      actioncable (= 7.0.3)
+      actionmailbox (= 7.0.3)
+      actionmailer (= 7.0.3)
+      actionpack (= 7.0.3)
+      actiontext (= 7.0.3)
+      actionview (= 7.0.3)
+      activejob (= 7.0.3)
+      activemodel (= 7.0.3)
+      activerecord (= 7.0.3)
+      activestorage (= 7.0.3)
+      activesupport (= 7.0.3)
       bundler (>= 1.15.0)
-      railties (= 6.1.4.1)
-      sprockets-rails (>= 2.0.0)
+      railties (= 7.0.3)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.4.2)
       loofah (~> 2.3)
-    railties (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    railties (7.0.3)
+      actionpack (= 7.0.3)
+      activesupport (= 7.0.3)
       method_source
-      rake (>= 0.13)
+      rake (>= 12.2)
       thor (~> 1.0)
+      zeitwerk (~> 2.5)
     rake (13.0.6)
-    rb-fsevent (0.11.0)
+    rb-fsevent (0.11.1)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     responders (3.0.1)
@@ -165,16 +186,18 @@ GEM
     simple_form (5.1.0)
       actionpack (>= 5.2)
       activemodel (>= 5.2)
-    sprockets (4.0.2)
+    sprockets (4.0.3)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
-    sprockets-rails (3.2.2)
-      actionpack (>= 4.0)
-      activesupport (>= 4.0)
+    sprockets-rails (3.4.2)
+      actionpack (>= 5.2)
+      activesupport (>= 5.2)
       sprockets (>= 3.0.0)
     sqlite3 (1.4.2)
-    thor (1.1.0)
+    strscan (3.0.3)
+    thor (1.2.1)
     tilt (2.0.10)
+    timeout (0.3.0)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
     warden (1.2.9)
@@ -182,7 +205,7 @@ GEM
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
-    zeitwerk (2.4.2)
+    zeitwerk (2.5.4)
 
 PLATFORMS
   ruby

data/README.md

@@ -101,6 +101,39 @@ The new field is still compatible with the `direct_upload` param.
 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.
 
+## Resize
+
+You can add an option to the field to resize the image after upload (of course it has to be an image!).
+
+Add `resize: true` to your field.
+
+You 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.
+
+
+The resizer is based on [CropperJS](https://github.com/fengyuanchen/cropperjs) so you have to add cropper and jquery-cropper to your dependencies:
+```
+yarn add cropperjs
+yarn add jquery-cropper
+```
+then include the js files in your application.js file:
+```
+//= require cropperjs/dist/cropper
+//= require jquery-cropper/dist/jquery-cropper
+```
+and include the css in your application.sass file:
+```
+@import 'cropperjs/dist/cropper'
+```
+
+In your `config/application.yml`, to support `+repage`, you have to add `+` method in supported operations.
+```ruby
+module MyApp
+  class Application < Rails::Application
+    # ...
+    config.active_storage.supported_image_processing_methods = ["+"]
+  end
+end
+```
 
 ## I18n
 

data/assets/javascripts/simple_form_bs5_file_input.js

@@ -1,40 +1,132 @@
-/*global $, document, window */
+/*global $, document, window, bootstrap */
 window.inputSingleDeletableFile = {
-    onDelete: function (e) {
+    onFileDelete: function (e) {
         'use strict';
         var $scope = $(this).parents('.js-sdfi-deletable-file');
         e.preventDefault();
         e.stopPropagation();
-        $('.js-sdfi-deletable-file__hidden-field', $scope).val('true');
+        $('.js-sdfi-deletable-file__infos-field', $scope).val('');
+        $('.js-sdfi-deletable-file__delete-field', $scope).val('true');
         $('input[type="file"]', $scope).val('');
         $scope.removeClass('sdfi-deletable-file--with-file');
-        // $('.custom-file-preview', scope).hide();
     },
 
-    onChange: function () {
+    onFileSelected: function () {
         'use strict';
         var $scope = $(this).parents('.js-sdfi-deletable-file'),
-            fileName = $(this).val()
-                .split('\\')
-                .pop(),
+            $resizeModal = $('.js-sdfi-deletable-file__resize', $scope),
+            files = this.files,
+            file,
             hasPreview = $('.js-sdfi-deletable-file__preview', $scope).length > 0,
+            hasResize = $resizeModal.length > 0,
+            modal,
             reader,
             size;
-        if (fileName !== '') {
+
+        if (!files.length) {
+            return;
+        }
+
+        file = files[0];
+
+        if (!hasResize) {
+            // name display is delayed if we need to resize
             $scope.addClass('sdfi-deletable-file--with-file');
-            $('.js-sdfi-deletable-file__label', $scope).html(fileName);
-            $('.js-sdfi-deletable-file__hidden-field', $scope).val('');
+            $('.js-sdfi-deletable-file__label', $scope).html(file.name);
+            $('.js-sdfi-deletable-file__delete-field', $scope).val('');
+        }
+
+        if (/^image\/\w+$/.test(file.type) && (hasResize || hasPreview)) {
+            reader = new FileReader();
+            reader.readAsDataURL(file);
+            if (hasResize) {
+                reader.onload = function () {
+                    modal = new bootstrap.Modal($resizeModal, {
+                        backdrop: 'static',
+                        keyboard: false
+                    });
+                    $resizeModal.attr('data-image-result', this.result);
+                    $resizeModal.attr('data-filename', file.name);
+                    modal.show();
+                };
+            } else if (hasPreview) {
+                size = $('.js-sdfi-deletable-file__preview', $scope).attr('data-size')
+                    .split('x');
+                reader.onload = function (e) {
+                    $('.js-sdfi-deletable-file__preview', $scope).html('<img src="' + e.target.result + '" width="' + size[0] + '" height="auto" class="img-fluid img-thumbnail">');
+                };
+            }
         }
-        // preview
-        if (hasPreview && this.files && this.files[0]) {
+    },
+
+    onResizeModalShown: function (e) {
+        'use strict';
+        var $modal = $(e.target),
+            $scope = $modal.parents('.js-sdfi-deletable-file'),
+            $imgContainer = $('.js-sdfi-sdfi-deletable-file__resize-image', $scope),
+            $image,
+            image = $modal.attr('data-image-result'),
+            ratio = $imgContainer.attr('data-ratio');
+
+        $imgContainer.html('<img class="js-" src="' + image + '">');
+
+        $image = $('img', $imgContainer);
+        $image.css('opacity', 0);
+        setTimeout(function () {
+            // init cropper with a small delay
+            $image.cropper({
+                aspectRatio: ratio,
+                autoCropArea: 1,
+                movable: false,
+                guides: false,
+                background: false,
+                viewMode: 1,
+                zoomable: false,
+                crop: function (data) {
+                    $('.js-sdfi-deletable-file__infos-field', $scope).val(JSON.stringify(data.detail));
+                }
+            });
+            $image.css('opacity', 1);
+        }, 100);
+    },
+
+    onResizeModalCancel: function (e) {
+        'use strict';
+        var $scope = $(e.target).parents('.js-sdfi-deletable-file');
+        $('.js-sdfi-deletable-file__infos-field', $scope).val('');
+        $('.js-sdfi-deletable-file__delete-field', $scope).val('true');
+        $('input[type="file"]', $scope).val('');
+        $scope.removeClass('sdfi-deletable-file--with-file');
+    },
+
+    onResizeModalValidate: function (e) {
+        'use strict';
+        var $scope = $(e.target).parents('.js-sdfi-deletable-file'),
+            $resizeModal = $('.js-sdfi-deletable-file__resize', $scope),
+            $imgContainer = $('.js-sdfi-sdfi-deletable-file__resize-image', $scope),
+            $image = $('img', $imgContainer),
+            filename = $resizeModal.attr('data-filename'),
+            hasPreview = $('.js-sdfi-deletable-file__preview', $scope).length > 0,
+            imageData,
+            resizeModal = $resizeModal[0],
+            modal = bootstrap.Modal.getInstance(resizeModal),
+            size;
+
+        $scope.addClass('sdfi-deletable-file--with-file');
+        $('.js-sdfi-deletable-file__label', $scope).html(filename);
+        $('.js-sdfi-deletable-file__delete-field', $scope).val('');
+
+        // set the preview if we have preview
+        if (hasPreview) {
             size = $('.js-sdfi-deletable-file__preview', $scope).attr('data-size')
                 .split('x');
-            reader = new FileReader();
-            reader.onload = function (e) {
-                $('.js-sdfi-deletable-file__preview', $scope).html('<img src="' + e.target.result + '" width="' + size[0] + '" height="auto" class="img-fluid img-thumbnail">');
-            };
-            reader.readAsDataURL(this.files[0]);
+            imageData = $image.data('cropper')
+                .getCroppedCanvas()
+                .toDataURL();
+
+            $('.js-sdfi-deletable-file__preview', $scope).html('<img src="' + imageData + '" width="' + size[0] + '" height="auto" class="img-fluid img-thumbnail">');
         }
+        modal.hide();
     },
 
     bindEvents: function (field) {
@@ -43,8 +135,12 @@ window.inputSingleDeletableFile = {
         $('.js-sdfi-deletable-file__change-btn', $(field)).on('click', function () {
             $('input[type="file"]', $(field)).click();
         });
-        $('.js-sdfi-deletable-file__delete-btn', $(field)).on('click', this.onDelete);
-        $('input[type="file"]', $(field)).on('change', this.onChange);
+        $('.js-sdfi-deletable-file__delete-btn', $(field)).on('click', this.onFileDelete);
+        $('input[type="file"]', $(field)).on('change', this.onFileSelected);
+
+        $('.js-sdfi-deletable-file__resize', field).on('shown.bs.modal', this.onResizeModalShown);
+        $('.js-sdfi-deletable-file__resize-cancel', field).on('click', this.onResizeModalCancel);
+        $('.js-sdfi-deletable-file__resize-validate', field).on('click', this.onResizeModalValidate);
     }
 };
 

data/assets/stylesheets/simple_form_bs5_file_input.sass

@@ -67,6 +67,12 @@
         pointer-events: none
         width: 0%
 
+    &__resize
+        .sdfi-sdfi-deletable-file__resize-image
+            img
+                max-width: 100%
+                max-height: 300px
+
     &--with-file
         input[type='file']
             display: none

data/config/locales/en.yml

@@ -1,3 +1,6 @@
 en:
   simple_form_bs5_file_input:
+    modal_close: Close
+    modal_title: Resize the image
+    modal_validate: Validate  
     replace_file: 'Change the file'

data/config/locales/fr.yml

@@ -1,3 +1,6 @@
 fr:
   simple_form_bs5_file_input:
-    replace_file: 'Remplacer le fichier'
+    modal_close: Fermer
+    modal_title: Cadrer l'image
+    modal_validate: Valider
+    replace_file: Remplacer le fichier

data/lib/has_one_attached_deletable.rb

@@ -1,5 +1,5 @@
 class ActiveRecord::Base
-  def self.has_one_attached_deletable(name, dependent: :purge_later)
+  def self.has_one_attached_deletable(name, **options)
     class_eval do
       attr_accessor :"#{name}_delete"
       attr_accessor :"#{name}_infos"
@@ -14,6 +14,7 @@ class ActiveRecord::Base
       define_method :"resize_#{name}" do
         return unless send(name).attached?
 
+
         params = JSON(send("#{name}_infos"))
         # reset the infos to prevent multiple resize if multiple save
         instance_variable_set :"@#{name}_infos", nil
@@ -30,7 +31,7 @@ class ActiveRecord::Base
         variant = Rails::VERSION::MAJOR >= 6  ? send(name).variant(**transformations)
                                               : send(name).variant(combine_options: transformations)
 
-        variant_url = variant.processed.service_url
+        variant_url = variant.processed.url
         downloaded_image = URI.open(variant_url)
         attachable = { io: downloaded_image, filename: send(name).filename.to_s }
 
@@ -48,6 +49,6 @@ class ActiveRecord::Base
       end
     end
 
-    has_one_attached name
+    has_one_attached name, **options
   end
 end

data/lib/simple_form_bs5_file_input/single_deletable_file_input.rb

@@ -16,17 +16,13 @@ class SingleDeletableFileInput < SimpleForm::Inputs::Base
           <div class="sdfi-deletable-file__delete-btn js-sdfi-deletable-file__delete-btn"></div>
           <div class="sdfi-deletable-file__upload-background"></div>
           <div class="sdfi-deletable-file__upload-progress"></div>
-          <input type="hidden" name="%s" class="js-sdfi-deletable-file__hidden-field" %s />
+          <input type="hidden" name="%s" class="js-sdfi-deletable-file__infos-field" %s />
+          <input type="hidden" name="%s" class="js-sdfi-deletable-file__delete-field" %s />
         </div>
         %s
+        %s
       </div>
-    ', has_file_class, input_field(wrapper_options), field_classes(wrapper_options), change_file_text, field_id, existing_file_name_or_default_text, input_hidden_name, input_hidden_value, preview_div)
-  end
-
-  def preview_div
-    if options[:preview]
-      format('<div class="sdfi-deletable-file__preview js-sdfi-deletable-file__preview" data-size="%s">%s</div>', preview_image_width, preview_image_tag)
-    end
+    ', has_file_class, input_field(wrapper_options), field_classes(wrapper_options), change_file_text, field_id, existing_file_name_or_default_text, input_infos_name, input_infos_value, input_delete_name, input_delete_value, preview_div, resize_div)
   end
 
   def has_file_class
@@ -61,14 +57,52 @@ class SingleDeletableFileInput < SimpleForm::Inputs::Base
     end
   end
 
-  def input_hidden_name
+  def input_delete_name
     "#{@builder.object_name}[#{attribute_name.to_s}_delete]"
   end
 
-  def input_hidden_value
+  def input_delete_value
     "value='true'" if @builder.object.send("#{attribute_name}_delete") == 'true'
   end
 
+  def input_infos_name
+    "#{@builder.object_name}[#{attribute_name.to_s}_infos]"
+  end
+
+  def input_infos_value
+    "value='#{@builder.object.send("#{attribute_name}_infos")}'" if @builder.object.send("#{attribute_name}_infos")
+  end
+
+  def preview_div
+    if options[:preview]
+      format('<div class="sdfi-deletable-file__preview js-sdfi-deletable-file__preview" data-size="%s">%s</div>', preview_image_width, preview_image_tag)
+    end
+  end
+
+  def resize_div
+    if options[:resize]
+      format('<div class="sdfi-deletable-file__resize js-sdfi-deletable-file__resize modal" tabindex="-1">
+                <div class="modal-dialog">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <h5 class="modal-title">%s</h5>
+                      <button type="button" class="btn-close js-sdfi-deletable-file__resize-cancel" data-bs-dismiss="modal" aria-label="%s"></button>
+                    </div>
+                    <div class="modal-body">
+                      <div class="sdfi-sdfi-deletable-file__resize-image js-sdfi-sdfi-deletable-file__resize-image" data-ratio="%s">
+
+                      </div>
+                    </div>
+                    <div class="modal-footer">
+                      <button type="button" class="btn btn-sm btn-secondary js-sdfi-deletable-file__resize-cancel" data-bs-dismiss="modal">%s</button>
+                      <button type="button" class="btn btn-sm btn-primary js-sdfi-deletable-file__resize-validate">%s</button>
+                    </div>
+                  </div>
+                </div>
+              </div>', modal_title, close_btn_text, resize_ratio, close_btn_text, validate_btn_text)
+    end
+  end
+
   private
 
   def file_attachment
@@ -83,13 +117,30 @@ class SingleDeletableFileInput < SimpleForm::Inputs::Base
     options[:preview] == true ? default_preview_image_width : options[:preview].to_i
   end
 
+  def resize_ratio
+    options[:resize] == true ? '' : options[:resize]
+  end
+
   def preview_image_tag
-    if should_display_file? && file_attachment&.variable?
-      image_tag(file_attachment.variant(resize: "#{preview_image_width}x").processed.url, class: 'img-fluid img-thumbnail', width: preview_image_width)
-    end
+    return unless should_display_file? || file_attachment&.variable?
+    variant = file_attachment.variant(resize: "#{preview_image_width}x")
+    path = url_helpers.polymorphic_url variant, only_path: true
+    image_tag path, class: 'img-fluid img-thumbnail', width: preview_image_width
   end
 
   def default_preview_image_width
     1000
   end
+
+  def modal_title
+    I18n.t('simple_form_bs5_file_input.modal_title')
+  end
+
+  def close_btn_text
+    I18n.t('simple_form_bs5_file_input.modal_close')
+  end
+
+  def validate_btn_text
+    I18n.t('simple_form_bs5_file_input.modal_validate')
+  end
 end

data/lib/simple_form_bs5_file_input/version.rb

@@ -1,3 +1,3 @@
 module SimpleFormBs5FileInput
-  VERSION = "0.0.2".freeze
+  VERSION = "0.0.5".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: simple_form_bs5_file_input
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.5
 platform: ruby
 authors:
 - Pierre-andré Boissinot
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-10-15 00:00:00.000000000 Z
+date: 2022-05-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -73,6 +73,7 @@ extensions: []
 extra_rdoc_files: []
 files:
 - ".eslintrc.yml"
+- ".gitignore"
 - ".sass-lint.yml"
 - Gemfile
 - Gemfile.lock
@@ -89,12 +90,14 @@ files:
 - lib/simple_form_bs5_file_input/single_deletable_file_input.rb
 - lib/simple_form_bs5_file_input/version.rb
 - pkg/simple_form_bs5_file_input-0.0.1.gem
+- pkg/simple_form_bs5_file_input-0.0.2.gem
+- pkg/simple_form_bs5_file_input-0.0.3.gem
 - simple_form_bs5_file_input.gemspec
 homepage: https://github.com/noesya/simple_form_bs5_file_input
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -109,8 +112,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.4
-signing_key: 
+rubygems_version: 3.1.6
+signing_key:
 specification_version: 4
 summary: Simple Form BS5 File Input
 test_files: []