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

environment

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. スクリーンショット 2021-01-09 155648.png 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. .. スクリーンショット 2021-01-09 174852.png The design of the "Post" button below, including mouseover processing, has been reproduced as faithfully as possible. スクリーンショット 2021-01-09 174923.png Of course, as with the default behavior, if you select an image, its filename will be displayed. スクリーンショット 2021-01-09 174947.png

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)

Recommended Posts

I tried to make the "Select File" button of the sample application created in the Rails tutorial cool
I tried to make the sample application into a microservice according to the idea of the book "Microservice Architecture".
After learning Progate, I tried to make an SNS application using Rails in the local environment
I tried to make full use of the CPU core in Ruby
I tried to make a sample program using the problem of database specialist in Domain Driven Design
I tried to make a message function of Rails Tutorial extension (Part 1): Create a model
I tried to make an application in 3 months from inexperienced
I tried to make a client of RESAS-API in Java
[Rails] I tried deleting the application
I tried to make a reply function of Rails Tutorial extension (Part 3): Corrected a misunderstanding of specifications
I tried to develop the cache function of Application Container Cloud Service in the local environment
I tried to make a message function of Rails Tutorial extension (Part 2): Create a screen to display
I tried to implement Ajax processing of like function in Rails
I tried to sort the data in descending order, ascending order / Rails
I tried to make a parent class of a value object in Ruby
Procedure to make the value of the property file visible in Spring Boot
I tried to make a talk application in Java using AI "A3RT"
[Rails] I tried to summarize the passion and functions of the beginners who created the share house search site!
[Rails] Button to return to the top of the page
[Rails] I tried to raise the Rails version from 5.0 to 5.2
I tried to develop an application in 2 languages
How to make a unique combination of data in the rails intermediate table
How to set environment variables in the properties file of Spring boot application
About the case where "Docker" freeter tried to put Docker in the existing Rails application
I tried to summarize the state transition of docker
[Rails] I tried playing with the comment send button
05. I tried to stub the source of Spring Boot
I tried to reduce the capacity of Spring Boot
Install multiple submit buttons in Rails View to get the value of the pressed button
I tried to make a login function in Java
Rails6 I tried to introduce Docker to an existing application
[Rails] I want to display the link destination of link_to in a separate tab
I tried to make a web application that searches tweets with vue-word cloud and examines the tendency of what is written in the associated profile
I tried to implement the Euclidean algorithm in Java
Sample code to assign a value in a property file to a field of the expected type
[Ruby on Rails] I want to get the URL of the image saved in Active Storage
When I switched to IntelliJ, I got a lot of differences in the encoding of the properties file.
I finished watching The Rose of Versailles, so I tried to reproduce the ending song in Java
[Rails Tutorial Chapter 2] What to do when you make a mistake in the column name
I tried to touch the asset management application using the emulator of the distributed ledger Scalar DLT
I tried to introduce Bootstrap 4 to the Rails 6 app [for beginners]
I tried to summarize the basics of kotlin and java
[Swift] I tried to implement the function of the vending machine
I tried using Hotwire to make Rails 6.1 scaffold a SPA
I want to create a form to select the [Rails] category
I tried to summarize the basic grammar of Ruby briefly
I tried to build the environment of WSL2 + Docker + VSCode
I tried to implement a buggy web application in Kotlin
[Rails] Where to be careful in the description of validation
I tried the Docker tutorial!
I tried the VueJS tutorial!
I tried to make it possible to set the delay for the UDP client of Android by myself
[Rails] Implementation of multi-layer category function using ancestry "I tried to make a window with Bootstrap 3"
[Note] What to do if bundle install in Chapter 3 of the rails tutorial is not possible
I tried to make a machine learning application with Dash (+ Docker) part2 ~ Basic way of writing Dash ~
I tried incorporating the principle of a single file component into a rails 6 app. I'm not sure.
I tried to solve the problem of "multi-stage selection" with Ruby
I tried to summarize the words that I often see in docker-compose.yml
[Rails / Routing] How to refer to the controller in the directory you created
It doesn't respond to the description in .js of the packs file
I tried to illuminate the Christmas tree in a life game