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

<input onchange="show_file_preview_using_file_reader( 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];
}

let file_promise = file => new Promise( ( resolve, reject ) => {
  reader = new FileReader();
  reader.readAsDataURL( file );
  reader.onload = function(){
    resolve(reader.result);
  }
} );

async function show_file_preview_using_file_reader( e ){

  let file_element = e.target;
  let files = e.target.files;
  let object_url = null, div = null, reader=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]:  await file_promise( files[index] );

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

  }
}