Produto
PRODUTO
Media-picker
O media-picker oferece ao usuário a opção de selecionar e enviar arquivos dentro do sistema.
Estados de interação
Normal
Texto de ajuda
Hover
Texto de ajuda
Loader 
Error
Mensagem de erro
Disabled
Texto de ajuda
Código
HTML 
Exibir código
Copiar código
Exibir código
<div class="media-picker">
<input type="file" id="file1" class="text-input">
<label for="file1">Escolha um arquivo</label>
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a" d="M8.707 6.707a1 1 0 0 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4a1 1 0 1 1-1.414 1.414L12 3.414 8.707 6.707zM11 2a1 1 0 0 1 2 0v14a1 1 0 0 1-2 0V2zM2 17a1 1 0 0 1 2 0v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3a1 1 0 0 1 2 0v3a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-3z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<mask id="b" fill="#fff">
<use xlink:href="#a"></use>
</mask>
<use id="mask" fill="#9b9b9b" fill-rule="nonzero" xlink:href="#a"></use>
<g id="upload" fill="#9b9b9b" mask="url(#b)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</span>
<span class="file-name">Texto de ajuda</span>
</div>
SASS Exibir código
Copiar código
Exibir código
.media-picker{
position: relative;
max-width: 300px;
width: 100%;
box-sizing: border-box;
transition: .4s;
input {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
transition: .4s;
+ label {
display: inline-block;
-webkit-appearance: none;
width: 100%;
height: 60px;
border-radius: 4px;
background-color: #fff;
border: 1px solid #9b9b9b;
font-family: Lato;
font-size: 1em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
color: #9b9b9b;
line-height: 60px;
padding-left: 20px;
cursor: pointer;
transition: .4s;
&:hover{
border-color: #3153f5;
}
}
&:disabled{
+ label{
background-color: #ebebeb;
border-color: #ebebeb;
}
}
&:focus + label{
border-color: #3153f5;
}
&.loader + label,
&.hovered + label,
{
border-color: #3153f5;
}
}
input + label:hover,
&.hovered input + label{
& + .icon{
#upload, #mask{
fill: #3153f5;
}
}
}
.icon{
width: 24px;
height: 24px;
position: absolute;
top: 20px;
right: 0;
pointer-events: none;
&.loader{
height: 50px;
.loading{
position: relative;
top: -2px;
width: 24px;
height: 24px;
-webkit-animation-name: spin;
-webkit-animation-duration: 2000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 2000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 2000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
}
#upload, #mask{
transition: .4s;
}
}
&.disabled{
pointer-events: none;
}
.file-name{
position: relative;
top: 10px;
font-family: Lato;
font-size: 0.6875em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.27;
letter-spacing: normal;
color: #9b9b9b;
&.file-error{
font-family: Lato;
font-size: 0.6875em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.27;
letter-spacing: normal;
color: #f7744a;
}
.remove-file{
position: relative;
top: 5px;
display: inline-block;
background-image: url(/img/close-gray.svg);
background-repeat: no-repeat;
background-size: 12px;
width: 15px;
height: 15px;
margin-left: 15px;
}
}
}
@-ms-keyframes spin {
from {-ms-transform: rotate(0deg);}
to {-ms-transform: rotate(360deg);}
}
@-moz-keyframes spin {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes spin {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
JS Exibir código
Copiar código
Exibir código
$('body').on('change', '#file1', function(){
console.log($(this));
var filename=$('#file1')[0].files[0]['name'];
var father=$(this).closest('.media-picker');
$('.file-name', father).removeClass('file-error').html(filename+ '<a href="#" class="remove-file"></a>');
});
$('body').on('click', '.remove-file', function(e){
e.preventDefault();
var father=$(this).closest('.media-picker');
$('input', father).val('');
$('.file-name', father).html('');
});