Multiple Upload Thumbnail

Question

Multiple Upload Thumbnail

Navigation

#1 by (2 votes)

2

I have a field for uploading PDF documents, when appending a document the PDF icon appears, however I am using multiple upload and only one icon appears when it would be ideal for an icon to appear for each file attached, I know it is possible but I do not have much knowledge of Js, could anyone help?

Code: HTML

  <label id="timg" for="upload-photo">Upload <i class="fa fa-folder-open" aria-
    hidden="true"></i></label> 
<input type="file" multiple id="upload-photo" required accept=".pdf, application/pdf">

<div id="thumbs"> 
<img src="" id="pdfimg" style="display: block; width: 50px; height: 50px;"/> </div>

JS

const icons = {

'application/pdf': 'http://iconbug.com/data/5b/507/52ff0e80b07d28b590bbc4b30befde52.png',

}

const input = document.querySelector('#upload-photo');
const image = document.querySelector('#pdfimg');         //Script PDF MultipleUpload
input.addEventListener('change', function() {
const tipo = this.files[0].type;
image.src = icons[tipo];

});

javascript html

asked by anonymous 24.08.2017 / 13:16

1 answer

Presentation failing in binary tree Problems Reading File in C - comma delimiter

score 2 · Accepted Answer

You have to declare all icons in object icons , in the example below I added an icon to represent the image of a file of type image/png . Whenever there is a change in input an image is created for the file that was sent, based on its type.

const icons = {
  'application/pdf':'http://iconbug.com/data/5b/507/52ff0e80b07d28b590bbc4b30befde52.png',
  'image/png': 'http://findicons.com/files/icons/1637/file_icons_vs_2/256/png.png'
}

const input = document.querySelector('#upload-photo');
const thumbs = document.querySelector('#thumbs');
input.addEventListener('change', function() {
  thumbs.innerHTML = "";
  for (var i = 0; i < this.files.length; i++) {
    var img = new Image();
    img.src = icons[this.files[i].type];
    img.className = "thumbImg";
    thumbs.appendChild(img);
    var span = document.createElement('span');
    span.innerHTML = this.files[i].name;
    thumbs.appendChild(span);
  }
});

.thumbImg {
  width: 50px;
  height: 50px;
}

<label id="timg" for="upload-photo">Upload <i class="fa fa-folder-open" aria-
    hidden="true"></i></label>
<input type="file" multiple id="upload-photo" required accept=".pdf, application/pdf">

<div id="thumbs">
</div>