RailsでFile Uploadをデザインする

erb

<div class="upload-btn-wrapper">
  <button class="btn">Upload a file</button>
  <%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png', onChange:'inform()' %>
<h3 id="file_name"></h3>
</div>

css

.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}

.btn {
border: 2px solid gray;
color: gray;
background-color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
}

.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}

js

function inform(){
$("#file_name").text("画像が選択されています");
}

実行1

実行2

Tweet

Pocket

Share on Tumblr