Thumbnail Grid

var uploader = new MultipleUpload(el, {
 uploadUrl: '/api/upload',
 accept: 'image/*',
 onFileAdded: function(task) {
 // Generate thumbnail on file select
 var reader = new FileReader();
 reader.onload = function(e) {
 var img = document.createElement('img');
 img.src = e.target.result;
 img.style.cssText = 'width:100%;height:100px;object-fit:cover;border-radius:4px;';
 grid.appendChild(img);
 };
 reader.readAsDataURL(task.file);
 }
});

Previews as the default

showThumbnails defaults to true and previews are generated in the browser, so nothing is uploaded to produce them. thumbnailSize sets the longest edge and defaults to 64; the component renders at a higher internal resolution to stay sharp on high-density displays.

The cost, and when to skip it

Each preview means decoding an image, which is imperceptible for a few files and slow for hundreds. For bulk uploads a text queue renders instantly and uses far less memory, and the file name is what people scan by at that point anyway.