Rails 튜토리얼에서 만든 샘플 앱의 '파일 선택'버튼을 멋지게 보았습니다.

환경

Windows10 Home ver.2004

ruby ​​2.7.2p137 (2020-10-01 revision 5445e04352) [x64-mingw32]

Rails 6.1.0

소개

Rails 튜토리얼 13.4.1장 에서는, 샘플 앱에 이미지 첨부 마이크로 포스트 투고 기능을 추가하는 것이지만, 디폴트라고 이미지를 선택할 때 클릭하는 「파일 선택」버튼이 다소 다른 버튼과의 통일감이 없기 때문에 눈에 띈다.

이 상황을 어떻게든 하고 싶고, 여러가지 시험해 보았다.

결과

디폴트의 ​​버튼을 비표시로 한 뒤에 다른 버튼 「Choose an image」를 준비해, 그 버튼 경유로 디폴트의 버튼을 누르는 것으로, 기능을 해치지 않고 외형에 통일감을 낼 수 있었다 .

마우스 오버 처리를 포함하여 아래의 "Post"버튼의 디자인을 가능한 한 충실하게 재현했다.

물론, 디폴트 동작과 마찬가지로, 화상을 선택하면 그 파일명이 표시된다.


변경·추가한 코드는 다음과 같다. 덧붙여 이번은 공부를 위해 Bootstrap용의 클래스는 굳이 사용하지 않고 실장해 보았다.

app\views\shared\_micropost_form.html.erb

・
・
・
  <button type="button" class="general_button" onclick="document.getElementById('micropost_image').click()">
    Choose an image
  </button>
  <div id="image_name">No image is chosen...</div>
・
・
・
<script type="text/javascript">
  $("#micropost_image").bind("change", function() {
    let chosen_image = this.files[0];
    if (chosen_image.size/1024/1024 > 5) {
      alert("Maximum file size is 5MB. Please choose a smaller file.");
      $("#micropost_image").val("");
      document.getElementById('image_name').innerHTML = "No image is chosen...";
    }
    else {
      document.getElementById('image_name').innerHTML = "Chosen image: " + chosen_image.name;
    }
  });
</script>

app\assets\stylesheets\custom.scss

.general_button{
    color: white;
    background-color: $blue-for-button; // #337ab7
    border: 0.5px solid $blue-for-button-border; // #2e6da4
    border-radius: 3.5px;
    padding-top: 6.5px; padding-bottom: 6.5px;
    padding-right: 10px; padding-left: 10px;
    &:hover {
        background-color: $dark-blue-for-button; // #285f90
        border-color: $dark-blue-for-button-border; // #204d74
    }
}

#image_name {
    margin-top: 1px;
    margin-left: 1px;
    margin-bottom: 9px;
}

#micropost_image{
    visibility: hidden;
}

결과까지의 흐름

1.

적당한 키워드로 검색하면 몇 가지 참고로 할 수 있을 것 같은 기사 1 2 해보기로 했다.

2.

한 객체가 클릭된 것을 트리거로 하여 다른 객체의 이벤트를 작동시킨다는 처리를 실현하는 코드의 작성 방법을 조사하기 위해, 「javascript html 버튼 누르기」등의 키워드로 검색하면, 「JavaScript로 버튼을 누르는 액션을 일으킨다 | forWEB가게」 가 히트했다 .
이 사이트를 바탕으로, 디폴트의 「파일 선택」버튼의 클릭 이벤트를 작동시키기 위한 다른 버튼 「Choose an image」를 만들었다( _micropost_form.html.erb 내 참조).

3.

이어서, 사용자가 선택한 이미지 파일명을 어떻게 표시하는지 생각한 결과, Rails 자습서의 목록 13.67 에 쓰여진, 선택된 이미지의 파일 사이즈가 5MB보다 큰 경우에 경고를 내는 JavaScript 코드를 개조한다 결정했다 ( _micropost_form.html.erb 내부 참조).
도중에 f.file_field에 독자적인 id를 추가하면 경고를 내는 JavaScript가 작동하지 않게 되는 문제가 발생했지만, JavaScript 코드를 읽고 이미 id 로 micropost_image 자신의 id를 삭제하면 다시 작동하게 되었다.

4.

지금까지 동작에 관한 부분의 구현은 대체로 끝났으므로, CSS 레퍼런스 - 토호호의 WWW 입문 을 참고로, 때로는 화상 편집 소프트의 스포이트 기능을 사용해 스크린 샷으로부터 색의 정보를 취하거나 하면서 custom.scss 를 편집했다.

이상



[Rails] [file_field] 이미지 업로드 버튼 디자인 변경 - Qiita (htps : // 이 m / 유키나_28 / ms / 4 8332354f6cb7c7 6f6) ↩

rails의 file_field에서 이미지 클릭으로 업로드 - Qiita (htps : // 코 m / 즈카코 씨 / ms / 41 에 d95 훗아 2323cf458) ↩