Trilhos de campo do selecionador de arquivos reutilizáveis ​​personalizados

Adicione o campo selecionador de arquivo personalizado a um formulário

Passe o formobjeto atual e o nome da coluna:
= custom_filepicker_field(form, :profile_image)

Crie um auxiliar de aplicativo:

Opcionalmente, alterne vários

# app/helpers/application_helper.rb
def custom_filepicker_field(form, field_name, multiple=false)
@multiple = multiple
@form = form
@field_name = field_name
render
'shared/custom_filepicker_field'
end

Em seguida, adicione o arquivo de visualização compartilhada personalizada:

Personalize se necessário, mas o mais importante é observar o onchangemétodo personalizado .

# app/views/shared/_custom_filepicker_field.html.slim
= @form.filepicker_field @field_name, services: 'COMPUTER, GOOGLE_DRIVE, WEBCAM',
mimetype
: 'image/*', button_class: 'btn btn-primary btn-sm',
button_text
: 'Select file',
onchange
: 'filepickerOnChange(event, $(this))',
multiple
: @multiple

Adicione um método js global para processar a seleção do arquivo

# app/assets/javascripts/filepicker.js.coffee
window
.filepickerOnChange = (event, elem) ->
content
= '<span class="filepicker-filename">' + event.fpfile.filename + '</span>'
elem
.parent().append(content)