<div id="image-template"></div>

<input onchange="show_file_previews( event )" type="file" id="file" multiple  >

.img-small{
  width: 100px;
  height: auto;
}

#image-template{
  display: flex;
}

let image_template = document.getElementById('image-template');
        
let icons_url = {
  'xlsx' : 'https://img.icons8.com/color/48/000000/ms-excel.png',
  'pdf' : 'https://img.icons8.com/color/50/000000/pdf.png',
  'docx' : 'https://img.icons8.com/color/48/000000/word.png',
};

function get_extenstion( file ){
  return file.name.split( "." )[1];
}

function show_file_previews( e ){
  let file_element = e.target;
  let files = e.target.files;
  let object_url = null, div = null, extension=null;

  image_template.innerHTML = "";
  if( files.length ){
    for( let index in files ){

      if( files[index] instanceof File ){                 

        extension = get_extenstion( files[index] );
        object_url = ( icons_url[extension] )? icons_url[extension]:  URL.createObjectURL( files[index] );

        div = document.createElement('DIV');
        div.innerHTML = `
                            <img src="${object_url}" class="img-small" >
                        `;
        image_template.appendChild( div );
      }

    }
  }
}