Thumbnail Grid

Image Thumbnail Grid

Display uploaded images in a responsive thumbnail grid. Each thumbnail shows the file name, size, and upload status with a smooth transition effect.

Drag & drop files here, or paste from clipboard
No images uploaded yet.
<au:AjaxFileUpload ID="Uploader1" runat="server"
    AllowMultiple="true"
    ShowThumbnails="true"
    AllowedExtensions=".jpg,.jpeg,.png,.gif,.webp" />

// JavaScript API approach
AjaxUploader.create('#uploader', {
    uploadUrl: '/ajaxupload.axd/upload',
    multiple: true,
    maxFiles: 20,
    allowedExtensions: '.jpg,.jpeg,.png,.gif,.webp',
    onSelect: function(files) {
        files.forEach(function(f) {
            var reader = new FileReader();
            reader.onload = function(e) {
                addThumbnail(e.target.result, f);
            };
            reader.readAsDataURL(f.file || f);
        });
    }
});