client-side-validations-formtastic jasny bootstrap fileupload image input

bootstrap-fileupload.js

//conflict with ClientSideValidations
//this.$input.attr('name', this.name)

gistfile1.txt

f.input :logo, :as => :image, :input_html => {:accept => 'image/*'}

image_input.rb

class ImageInput
  include Formtastic::Inputs::Base
  def to_html
    input_wrapping do
      file_field = builder.file_field(method, input_html_options)
      file_wrapper = <<-html
        <div class="fileupload fileupload-new" data-provides="fileupload">
          <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div>
          <div>
            <span class="btn btn-file">
              <span class="fileupload-new">#{I18n.t('formtastic.inputs.image.select_image')}</span>
              <span class="fileupload-exists">#{I18n.t('formtastic.inputs.image.change')}</span>
              #{file_field}
            </span>
            <a href="javascript:void(0);" class="btn fileupload-exists" data-dismiss="fileupload">#{I18n.t('formtastic.inputs.image.remove')}</a>
          </div>
        </div>
      html
      file_wrapper = file_wrapper.html_safe

      label_html + file_wrapper
    end
  end
end

rails.validations.customValidators.js

(function() {

  function validate_image(object) {
    var parent = object.parents('.required');
    var element = parent.find('[type=file]')[0];
    var settings = window.ClientSideValidations.forms[element.form.id];
    $(element).isValid(settings.validators);
  }

  $(document).on('change', '.required [type=file]', function(){
    validate_image($(this));
  });

  $(document).on('click', '.required .btn.fileupload-exists', function(){
    validate_image($(this));
  });

}).call(this);