Alterando o formato do input file upload no HTML

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

Publicado em 11/12/2020 20:37

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.