RailsでFile Uploadをデザインする

 

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("画像が選択されています");
}

 

藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

未整理記事

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です