Input Files de forma fácil com HTML e JavaScript

Programador Viking 20 de agosto de 2024 0 Comentários Leitura: 4 min

Neste artigo, vou te mostrar como construir um input files utilizando apenas HTML, CSS e JavaScript puro, ou seja, sem a necessidade de bibliotecas externas.

Esse tipo de projeto é bem interessante pois você vai aprender muitos conceitos fundamentais de programação que irá levar para vida toda.

Além disso, utilizar o JavaScript puro nesse tipo de projeto vai te dar uma flexibilidade bem legal além de entender a fundo essa linguagem de programação.

Vamos lá?

Confira neste artigo:

Vídeo Aula – Input Files

Para deixar esse tutorial bem dinâmico, vou deixar aqui uma recomendação do vídeo do Sujeito Programador ensinando na prática como implementar o input files.

https://www.youtube.com/watch?v=Gc5dhlbmdLI

Confira os cursos completos de programação para iniciante do Sujeito Programador:

Curso Fábrica de APP Curso FullStack PRO

Estrutura HTML

Primeiramente vamos iniciar pela estrutura básica do HTML. Vamos criar um documento HTML com um div que servirá como área de drop e um input do tipo file, que permitirá a seleção do arquivo.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload de Arquivos com Drag and Drop</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="file-drop-area">
        <span class="choose-file">Arraste e solte o arquivo aqui ou clique para escolher</span>
        <input type="file" id="file-input" class="file-input">
    </div>

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

Neste código, a div com a classe file-drop-area será a área de drop, onde o usuário poderá soltar os arquivos. O input do tipo file é ocultado, sendo acionado quando o usuário clica na área.

Estilização com CSS

O segundo passo agora é adicionar o CSS para estilizar nossa área de drop e o botão de upload. Queremos que a área de drop seja visível e intuitiva para o usuário.

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}

.file-drop-area {
    border: 2px dashed #999;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    text-align: center;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.file-drop-area:hover {
    border-color: #666;
}

.file-drop-area .choose-file {
    color: #999;
    font-size: 16px;
    margin-bottom: 10px;
    display: inline-block;
}

.file-input {
    display: none;
}

Esse estilo cria uma área centralizada na tela, com bordas tracejadas e uma transição suave ao passar o mouse sobre a área, indicando ao usuário que ele pode interagir com ela.

Implementando a Funcionalidade com JavaScript

Por fim, vamos adicionar a funcionalidade com JavaScript para permitir o drag and drop e também para tratar a seleção do arquivo via botão.

const fileInput = document.getElementById('file-input');
const fileDropArea = document.querySelector('.file-drop-area');

fileDropArea.addEventListener('click', () => {
    fileInput.click();
});

fileInput.addEventListener('change', handleFiles);
fileDropArea.addEventListener('dragover', (event) => {
    event.preventDefault();
    fileDropArea.classList.add('dragover');
});

fileDropArea.addEventListener('dragleave', () => {
    fileDropArea.classList.remove('dragover');
});

fileDropArea.addEventListener('drop', (event) => {
    event.preventDefault();
    fileDropArea.classList.remove('dragover');
    handleFiles(event.dataTransfer);
});

function handleFiles(files) {
    const file = files.files[0];
    if (file) {
        console.log(`Arquivo selecionado: ${file.name}`);
        // Aqui você pode adicionar o código para exibir um preview do arquivo
    }
}

Neste código, estamos adicionando os eventos necessários para o funcionamento do drag and drop.

Ou seja, quando o usuário arrasta um arquivo sobre a área de drop, o evento dragover é ativado, adicionando uma classe que estiliza a área para indicar que o arquivo pode ser solto ali. Quando o arquivo é solto, o evento drop é disparado, e o arquivo é tratado pela função handleFiles.

Conclusão – input files

Neste artigo vimos que com apenas HTML, CSS e JavaScript, criamos um input files funcional e atrativo, que oferece ao usuário uma interface moderna para upload de arquivos.

Esse tipo de estrutura, além de ser simples, evita o uso de bibliotecas externas, tornando o código mais leve e fácil de entender.

Agora, você pode adaptar este exemplo conforme suas necessidades, adicionando, por exemplo, a visualização de arquivos antes do upload, validação de tipos de arquivos, ou até mesmo integração com um backend para salvar os arquivos no servidor.

Para aprender mais sobre programação recomendo dar uma conferida nos cursos do Sujeito Programador que ensina tudo que você precisa para entrar no mercado da programação.

Clique no botão abaixo e faça sua inscrição:

Curso FullStack PRO

Espero que tenha gostado do conteúdo, preparamos ele para realmente te ajudar.

Um forte abraço!