Javascript Preview de imagem por múltiplos inputs

gomes_gabriel · 19 de março de 2022

Possuo uma função para pre visualizar imagens, e ele funciona muito bem mas gostaria de fazer essa pré-visualização para múltiplos inputs, o erro ocorre quando eu tento colocar a imagem em um segundo input e ela é mostrada no primeiro como se eu tivesse selecionado no primeiro input. Minha primeira ideia para resolver isso foi fazer várias funções mas se, por exemplo, eu tiver que fazer cinquenta inputs fazer uma função para cada um parece algo sem nexo.

Meu codigo se encontra da seguinte forma:

HTML:

<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Multiple Image Upload Preview</title>

    <!--Font Awesome Icons-->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <!-- Google Fonts -->

    <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">

    <!-- Stylesheet -->

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

</head>

<body>

    <div class="container">

        <input type="file" id="file-input" data-id="01" accept=".png, .jpeg, .jpg, .pdf" onchange="preview()" multiple>

        <label for="file-input">

            <i class="faz fa-upload"></i> &nbsp; Escolha seus arquivos

        </label>

        <p id="num-of-files">Nenhum arquivo escolhido</p>

        <div id="images"></div>

    </div>

    <div class="container">

        <input type="file" id="file-input" data-id="02" title="2" accept=".png, .jpeg, .jpg, .pdf" onchange="preview()" multiple>

        <label for="file-input">

            <i class="faz fa-upload"></i> &nbsp; Escolha seus arquivos

        </label>

        <p id="num-of-files">Nenhum arquivo escolhido</p>

        <div id="images"></div>

    </div>

    <!--Script-->

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

</body>

</html>

CSS:

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

    font-family: "Rubik",sans-serif;

}

body{

    background-color: #f5f8ff;

}

.container{

    background-color: #ffffff;

    width: 60%;

    min-width: 450px;

    position: relative;

    margin:  50px auto;

    padding: 50px 20px;

    border-radius: 7px;

    box-shadow: 0 20px 35px rgba(0,0,0,0.05);

}

input[type="file"]{

    display: none;

}

label{

    display: block;

    position: relative;

    background-color: #025bee;

    color: #ffffff;

    font-size: 18px;

    text-align: center;

    width: 300px;

    padding: 18px 0;

    margin: auto;

    border-radius: 5px;

    cursor: pointer;

}

.container p{

    text-align: center;

    margin: 20px 0 30px 0;

}

#images{

    width: 80%;

    position: relative;

    margin: auto;

    display: flex;

    justify-content: space-evenly;

    gap: 20px;

    flex-wrap: wrap;

}

figure{

    width: 45%;

}

img{

    width: 100%;

}

figcaption{

    text-align: center;

    font-size: 2.4vmin;

    margin-top: 0.5vmin;

}

JS:

let fileInput = document.getElementById("file-input");

let imageContainer = document.getElementById("images");

let numOfFiles = document.getElementById("num-of-files");




function preview() {

    imageContainer.innerHTML = "";

    numOfFiles.textContent = `${fileInput.files.length} Arquivos selecionados`;



    for (i of fileInput.files) {

        let reader = new FileReader();

        let figure = document.createElement("figure");

        let figCap = document.createElement("figcaption");

        figCap.innerText = i.name;

        figure.appendChild(figCap);

        reader.onload = () => {

            let img = document.createElement("img");

            if (figCap.innerText.split('.').pop() == 'pdf') {

                img.setAttribute("src", "pdf.png");

            } else {

                img.setAttribute("src", reader.result);

            }



            figure.insertBefore(img, figCap);

        }

        imageContainer.appendChild(figure);

        reader.readAsDataURL(i);

    }

}

GabrielSennaMs · 19 de março de 2022

@gomes_gabriel Fiz algumas modificações no seu script e na sua estrutura.

Javascript:

window.onload = function () {
    const inputs = document.querySelectorAll('input[data-action]');

    for (let input of inputs) {
        if (input.getAttribute('data-action') === 'preview') {
            if (input.hasAttribute('data-preview')) {
                const preview = document.getElementById(input.getAttribute('data-preview'));

                if (preview) {
                    const event = new Event('change');

                    input.addEventListener('change', loadingPreviewImage);
                    input.dispatchEvent(event);
                    
                    continue;
                }

                console.error(
                    'O atributo elemento com o id ' + 
                    input.getAttribute('data-preview') + 
                    ' para o preview não foi definido'
                );

                continue;
            }
            
            console.error('O atributo "data-preview" não foi definido');
        }
    }
}

function loadingPreviewImage(event) {
    const 
        input   = event.target,
        preview = document.getElementById(input.getAttribute('data-preview')); 

    preview.innerHTML = null;

    if (input.files.length > 0) {
        for (let file of input.files) {
            const 
                reader = new FileReader(),
                figure = document.createElement("figure"),
                figCap = document.createElement("figcaption");

            figCap.innerText = file.name;
            figure.appendChild(figCap);

            reader.onload = () => {
                const img = document.createElement("img");
                
                if (figCap.innerText.split('.').pop() == 'pdf') {
                    img.setAttribute("src", "pdf.png");
                } else {
                    img.setAttribute("src", reader.result);
                }

                figure.insertBefore(img, figCap);
            }

            preview.appendChild(figure);
            reader.readAsDataURL(file);
        }

        return;
    }   

    const p = document.createElement('p');
    
    p.textContent = 'Nenhum arquivo foi escolhido.';
    preview.append(p);
}

HTML:

<div class="container">
    <input 
        type="file" 
        id="file_input_1"
        name="file_input_1"
        data-preview="preview_1"
        data-action="preview"
        accept=".png, .jpeg, .jpg, .pdf" 
    />
    <label for="file_input_1">
        <i class="fa fa-file"></i>
        <span>Escolha seus arquivos</span>
    </label>
    <div id="preview_1" class="preview"></div>
</div>

<div class="container">
    <input 
        type="file" 
        id="file_input_2"
        data-preview="preview_2"
        data-action="preview"
        name="file_input_2"
        accept=".png, .jpeg, .jpg, .pdf" 
        multiple
    />
    <label for="file_input_2">
        <i class="fa fa-file"></i>
        <span>Escolha seus arquivos</span>
    </label>
    <div id="preview_2" class="preview"></div>
</div>

Também fiz algumas modificações no CSS:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Rubik", sans-serif;
}

body {
    background-color: #f5f8ff;
}

.container {
    background-color: #ffffff;
    width: 100%;
    max-width: 1000px;
    margin: 4em auto;
    padding: 2em;
    border-radius: 7px;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.05);
}

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

label {
    display: block;
    position: relative;
    background-color: #025bee;
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    max-width: 300px;
    width: 100%;
    padding: 18px 0;
    margin: auto;
    border-radius: 5px;
    cursor: pointer;
}

.preview > p, .preview > figure {
    margin-top: 1em;
}

.preview { 
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.preview > figure {
    width: 260px;
    height: 260px;
    margin: 1em 0.5em;
    overflow: hidden;
    background: #272727;
    color: #fff;
    border-radius: 7px;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.05);
}

.preview > figure > img {
    width: 100%;
    height: 225px;
    object-fit: cover;
}

.preview > figure > figcaption {
    text-align: center;
    font-size: 2.4vmin;
    margin-top: 0.5vmin;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
    padding: 0 1em 1em 1em;
}