после нажатия на кнопку редактирования предыдущий загруженный файл не отображается в форме рельсов - PullRequest
Новая
       19

после нажатия на кнопку редактирования предыдущий загруженный файл не отображается в форме рельсов

0 голосов
/ 14 апреля 2019

Предыдущий загруженный файл / изображение не отображается в форме редактирования. После нажатия кнопки редактирования отображается только то, что файл не выбран, но файлы уже сохранены в базе данных. Это моя форма хамла, которая ниже. 

.....
.....

.field
  = f.label "address_proof"
  = f.file_field :address_proof, :required => true, :class =>'form- control', placeholder: "upload address proof"
.field
  = f.label "identity_proof"
  = f.file_field :identity_proof, :required => true, :class =>'form-control', placeholder: "upload identity proof" 
 %br.actions
  = f.submit 'submit', :class=>"btn waves-effect waves-light", :id=>"validate"
  = link_to 'Cancel', admin_members_path, :class=>"btn white grey-text waves-effect waves-red"

enter image description here

1 Ответ

0 голосов
/ 15 апреля 2019

Поле файла, которое переводится в тег <input type="file" />, может использоваться только для приема файлов от пользователя.Невозможно отобразить какую-либо информацию о файле, который существует в файловом хранилище вашего приложения.

Что вы можете сделать, это показать информацию о уже прикрепленном файле рядом со входом,возможно на этикетке.Мой HAML очень ржавый, поэтому вот пример с использованием ERB, и предполагается, что вы используете ActiveStorage: 

<div class="form-group">
  <%= f.label :identity_proof do %>
    <% if f.object.identity_proof.attached? %>
      The currently attached file is <%= f.object.identity_proof.filename %>. Click here to replace this file.
    <% else %>
      No file has been uploaded yet. Please pick a file.
    <% end %>
  <% end %>

  <%= f.file_field :identity_proof %>
</div>

Однако, это все равно оставляет сам тег ввода, который говорит Файл не выбран (или что-то подобное) все еще видимым.

Один из наиболее распространенных подходов для решения этой проблемы - сделать поле ввода невидимым (с помощью CSS), а затем стилизовать метку с помощью пользовательского CSS, чтобы он выглядел как вводполе.Поскольку метка связана с полем ввода, нажатие на нее все равно вызовет средство выбора файлов браузера.Поле ввода может быть скрыто различными способами - общий выбор - расположить метку над входом, а затем скрыть ввод, установив его непрозрачность на ноль.

Вот грубый пример. 

.form-control {
  position: relative;
}

.input {
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0;
}

.btn {
  border: 1px solid black;
  padding: 5px;
}

И рабочая скрипка из вышеперечисленного!

...