Visualizar imagem antes de fazer o upload no HTML

Usando o objeto FileReader conseguimos capturar a imagem do input file e renderizar em um componente de imagem.

Publicado em 17/12/2020 10:04

Exibir a imagem antes de fazer o upload, tem se tornado cada vez mais usual entre os desenvolvedores, visto que no passado esse processo era uma feature para poucos sistemas, mas com o avanço do Javascript, o processo se tornou simplório.

Vamos ver aqui, como exibir a imagem antes de fazer o upload, mais precisamente, recuperar o arquivo selecionado e exibi-lo no componente <img>.

O processo é bem simples e se dá através do uso do Javascript, então, assista a nossa videoaula abaixo e confira todo o código fonte em seguida.

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%;
    width: 300px;
    height: 300px;
    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();
});

file.addEventListener('change', () => {

    if (file.files.length <= 0) {
        return;
    }

    let reader = new FileReader();

    reader.onload = () => {
        photo.src = reader.result;
    }

    reader.readAsDataURL(file.files[0]);
});

Bem, ficamos por aqui, espero que tenham gostado.

Até a próxima.