label을 사용하여 file_field를 지우는 방법

1, 하고 싶은 일

아이콘을 클릭하면 이미지를 선택하여 업로드할 수 있도록 구현하고 싶다.

2, 이미지를 업로드하는 기능을 구현하는 방법?

file_feild를 코드에 작성하면 이미지를 업로드할 수 있습니다.

file_filed는 form_for에서 사용할 수 있는 양식입니다.

설명은 다음과 같습니다.

= form_for [@group,@message] do |f|
        .message-box  
          %i.fa.fa-image
          = f.file_field :image
          = f.submit "Send",class: "submit-box" 

3, 아이콘과 file_feild를 연결하는 방법?

아이콘을 클릭하여 이미지를 게시할 수 있게 하려면 아이콘과 file_field를 연결해야 합니다.

= f.label :image, class: "form-image" do
   %i.fa.fa-image
   f.file_field :image

i 태그와 file_field를 label로 둘러싸면 아이콘을 클릭하면 file_filed가 클릭되도록 구현됩니다.

4, "파일 선택"버튼을 지우기

연결이 완료되었지만 "파일 선택"이라는 버튼이 화면에 계속 표시됩니다.



이 버튼을 지워 봅시다.

.form-image{
          input{
            display: none;
          }

stylesheet에 이상과 같이 기술하면 버튼을 지울 수 있습니다.