RailsでFile Uploadをデザインする

<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>

1

2

3

4

5

<button class="btn">Upload a file</button>

<%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png', onChange:'inform()' %>

</div>

.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;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

.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;

}

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

1

2

3

function inform(){

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

}

Off東京

RailsでFile Uploadをデザインする

Leave a Reply Cancel reply