Upload Thumbnail

Asked

Viewed 33 times

1

I have an upload field in a form HTML, I wonder if it is possible to place a predefined Thumb, with uploads of images I know you can do a Thumb displaying the image being placed, but for example, if a PDF file is uploaded to place a PDF icon, so that whenever a file in PDF format is selected it appears the same icon and the file name below?

javascript html css

1 answer

1


Yes it is possible, just check the file extension, there is even a property type 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;"/>

  • It worked well, but how can I make the icon appear in several files, for example I’m using multiple upload, in case the icon only appears once, if there are 5 files would have to appear 5 icons, know how I can do this?

  • 1

    @Henriquebretone in this case to use only this.files[0] treats as an array and takes .type of each element in that array.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.