<div class="scans">
      <div class="image-select">
       <label>
          <input type="file" name="front" accept="image/*">
          Front
       </label>
      </div>
      
      <div class="image-select">
       <label>
          <input type="file" name="back" accept="image/*">
          Back
       </label>
      </div>
      
      <div class="image-select">
       <label>
          <input type="file" name="face" accept="image/*">
          Face
       </label>
      </div>
    </div>
    
    

function imageSelect(element){
  const input = element.querySelector('input[type="file"]');
  const preview = document.createElement('img');
  
  input.addEventListener('change', event => {
    if(input.files && input.files[0]){
      const reader = new FileReader();
      reader.onload = e =>{
       preview.src = e.target.result;
       element.appendChild(preview);
      }
      reader.readAsDataURL(input.files[0]);
    }
  })
}

document.querySelectorAll('.image-select').forEach(imageSelect);