Thumbnail Grid

Display uploaded images in a responsive thumbnail grid layout.

Drag & drop images here

var uploader = new MultipleUpload(el, {
 uploadUrl: '/api/upload',
 accept: 'image/*',
 onQueueAdd: 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);
 }
});