Preview de multiplos arquivos com inputs diferentes

[Sapinn 0]

Opa galera. Fiz um preview de imagens através de um input e ele está funcionado bem agora como eu faço para fazer uma mesmo preview em inputs diferentes. Quando coloco mais de um input e seleciona arquivos ele sempre mostra no primeiro input.

Meu codigo:

 

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;

}

 

HTML:

   <div class="container">

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

        <label for="file-input">

            <i class="fas fa-upload"></i>   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" title="2" accept=".png, .jpeg, .jpg, .pdf" onchange="preview(this)" multiple>

        <label for="file-input">

            <i class="fas fa-upload"></i>   Escolha seus arquivos

        </label>

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

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

    </div>

 

JAVASCRIPT:

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

let inputFile = document.querySelectorAll("#file-input");

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

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




function preview(input){

    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);

    }

}

 

[washalbano 54]

Olá!
Da forma como o sr. fez, ids ficaram repetidas. ids devem ser únicas (não podem se repetir)

Crie um wrapper, use classes...
segue sugestão:

<div class="container preview-wrapper">
  <label>
    <input type="file" accept=".png, .jpeg, .jpg, .pdf" multiple>
    <i class="fas fa-upload"></i> Escolha seus arquivos
  </label>
  <p class="num-of-files">Nenhum arquivo escolhido</p>
  <div class="preview-images"></div>
</div>
<div class="container preview-wrapper">
  <label>
    <input type="file" accept=".png, .jpeg, .jpg, .pdf" multiple>
    <i class="fas fa-upload"></i> Escolha seus arquivos
  </label>
  <p class="num-of-files">Nenhum arquivo escolhido</p>
  <div class="preview-images"></div>
</div>

* {
    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;
}

.preview-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;
}

const handleFileInput = async e => {
  const fileInput = e.target
  const wrapper = e.currentTarget
  const imagesContainer = wrapper.querySelector('.preview-images')
  const diplayNumOfFiles = wrapper.querySelector('.num-of-files')

  // limpa imagesContainer
  imagesContainer.innerHTML = ''

  // exibe o número de arquivos selecionados
  diplayNumOfFiles.textContent = `${fileInput.files.length} Arquivos selecionados`

  // para cada arquivo selecionado
  for (const file of fileInput.files) {
    const figure = await fileReader(file)
    imagesContainer.append(figure)
  }
}


const fileReader = async (file) => {
  const reader = new FileReader()
  const figure = document.createElement('figure')
  const figCap = document.createElement('figcaption')
  figCap.innerText = file.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)
  }
  await reader.readAsDataURL(file)
  return figure;
}

// encontra todos .preview-wrappers
const previewWrappers = document.querySelectorAll('.preview-wrapper')

// para cada wrapper encontrado
for (const wrapper of previewWrappers) {
  // escuta o evento input
  wrapper.addEventListener('input', handleFileInput)
}

 

[Sapinn 0]

Muito obrigado, você me salvou novamente!!!

[washalbano 54]