Upload ThumbNail

Navigation
1

I have a field to upload in an HTML form, I would like to know if it is possible to put a predefined thumb, with uploads of images I know to make a thumb showing the image that is being placed, but for example, if a PDF file is uploaded from to place a PDF icon, so that whenever a PDF file is selected it appears the same icon and file name underneath?

    
asked by anonymous 10.08.2017 / 15:40

1 answer

1

Yes it is possible, just check the file extension, there is even a type property for this. For example: 

const icons = {
  'application/msword': 'http://icons.iconarchive.com/icons/blackvariant/button-ui-ms-office-2016/128/Word-2-icon.png',
  'application/pdf': 'http://icons.iconarchive.com/icons/alecive/flatwoken/128/Apps-Pdf-icon.png',
  'image/png': 'http://icons.iconarchive.com/icons/hopstarter/soft-scraps/128/Image-PNG-icon.png'
}

const input = document.querySelector('input');
const image = document.querySelector('img');
input.addEventListener('change', function() {
  const tipo = this.files[0].type;
  image.src = icons[tipo];
});
<input type="file" />
<img src="" style="display: block;"/>
    
10.08.2017 / 15:50
Problems running / publishing WEP API on IIS10! Setting the css bootstrap button