I tried to make the "Select File" button of the sample application created in the Rails tutorial cool

environment

• Windows10 Home ver.2004
• ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [x64-mingw32]
• Rails 6.1.0

Introduction

In Rails Tutorial Chapter 13.4.1, a micro post posting function with an image is added to the sample application, but by default, the "Select File" button that is clicked when selecting an image is ~~ crap ~ ~ It stands out because of the lack of unity with other buttons. I wanted to get rid of this situation, so I tried various things.

result

By hiding the default button, preparing another button "Choose an image", and pressing the default button via that button, we were able to create a unified look without sacrificing functionality. .. The design of the "Post" button below, including mouseover processing, has been reproduced as faithfully as possible. Of course, as with the default behavior, if you select an image, its filename will be displayed.

The changed / added code is as follows. In addition, this time I tried to implement it without using the class for Bootstrap for studying.

erb: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;
}

Flow to result

I found some articles [^ 1] [^ 2] that I could refer to if I searched with appropriate keywords, but it seems difficult to apply them to my situation as it is, so I wrote the specific code myself. I decided to think about it.

To find out how to write code that triggers the event of another object when one object is clicked, search for keywords such as "javascript html button press", and then select "" Button with JavaScript. " Take action to press | for WEB shop "](https://www.4web8.com/226.html) was hit. Based on this site, I created another button "Choose an image" to trigger the click event of the default "Select File" button (see inside _micropost_form.html.erb).

Then, as a result of thinking about how to display the image file name selected by the user, if the file size of the selected image is larger than 5MB as described in List 13.67 in Rails tutorial I decided to modify the JavaScript code that issues an alert (see in _micropost_form.html.erb). When I added my own id to f.file_field on the way, there was a problem that the JavaScript that issues an alert did not work, but after reading the JavaScript code, micropost_image was already set as id. I noticed that I removed my own id and it worked again.

Since the implementation of the part related to the operation has been almost completed so far, refer to "CSS Reference-Introduction to WWW of Tohoho", and sometimes use the eyedropper function of the image editing software to obtain color information from the screenshot. I edited custom.scss while taking it.

that's all

[^ 1]: [Rails] [file_field] Change the button design for uploading images --Qiita (https://qiita.com/Yukina_28/items/4a8332354f6cb7c7a6f6) [^ 2]: Upload by clicking the image in file_field of rails --Qiita (https://qiita.com/zukakosan/items/41ed95fea2323cf458a9)