Alterando o formato do input file upload no HTML

Gunnar CorreaGunnar Correa11/12/2020 - 2.086 acessos

Alterando o formato do input file upload no HTML

Com poucas linhas de CSS, HTML e Javascript podemos construir nosso novo componente.


Não é novidade para ninguém que os componentes padrão dos navegadores são horríveis, e devemos agradecer muito de termos o CSS a nossa disposição, pois sem ele, teríamos praticamente sites em preto e branco, não é mesmo?

Hoje nós vamos ver como criar nosso próprio componente de upload, que na verdade, será uma imagem com um evento de click, quando acionada, simulamos o evento de click no input file, que estará escondido e prontamente abrirá a tela de seleção de arquivos.

Veja a nossa videoaula ensinando passo a passo e logo em seguida, todo o código fonte utilizado.

Clique aqui para baixar a imagem que utilizamos na aula.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="max-width">
        <div class="imageContainer">
            <img src="camera.png" alt="Selecione uma imagem" id="imgPhoto">
        </div>
    </div>

    <input type="file" id="flImage" name="fImage" accept="image/*">

    <script src="script.js"></script>
</body>

</html>

style.css

/*https://www.flaticon.com/free-icon/camera_685655?term=photo&page=1&position=1&related_item_id=685655*/

* {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    border: none;
}

input[type='file'] {
    display: none;
}

.max-width {
    max-width: 500px;
    width: 100%;
}

#imgPhoto {
    margin-top: 10%;
    max-width: 300px;
    width:100%;
    padding:10px;
    background-color: #eee;
    border: 5px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background .3s;
}

#imgPhoto:hover{
    background-color: rgb(180, 180, 180);
    border: 5px solid #111;
}

script.js

'use strict'

let photo = document.getElementById('imgPhoto');
let file = document.getElementById('flImage');

photo.addEventListener('click', () => {
    file.click();
});

Por hora é isso.


html input file html trocar input html file css e html input file css personalizar input file input file css javascript input file estilizar input file

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Fórum

Ficou com alguma dúvida? utilize nosso fórum de perguntas e respostas, lá nossa comunidade poderá te ajudar.

https://forum.satellasoft.com