Open Image Previews in External Dialog in the Upload
Environment
| Product | Progress® Kendo UI® Upload for jQuery |
| Product | Progress® Kendo UI® Window for jQuery |
Description
I added image previews before uploading in Kendo UI for jQuery Upload. Now, I want to zoom or open the images in the image preview in external dialog when an image is clicked. How can I achieve that?
Solution
- Add a Kendo Window on the page that is initially hidden.
- When the preview icon is clicked, you can open the Window and change its content with the clicked image.
- You can also set styles, thus the image to always be 100% of the width and height of the Window when it is resized.
The following example demonstrates the full implementation of the described approach:
<div id="dialog"></div>
<input type="file" id="files">
<script>
$(document).ready(function() {
$("#files").kendoUpload({
async: {
saveUrl: "save",
removeUrl: "remove",
autoUpload: false
},
multiple: true,
select: function(e) {
var fileInfo = e.files[0];
var wrapper = this.wrapper;
e.files.forEach(function(file){
addPreview(file, wrapper);
})
}
});
$("#dialog").kendoWindow({
title: "Kendo Window Component",
visible:false
});
});
function addPreview(file, wrapper) {
var raw = file.rawFile;
var reader = new FileReader();
if (raw) {
reader.onloadend = function () {
var preview = $("<img class='image-preview'>").attr("src", this.result);
wrapper.find(".k-file[data-uid='" + file.uid + "'] .k-file-icon-wrapper")
.replaceWith(preview);
};
reader.readAsDataURL(raw);
setTimeout(function(){
$('.image-preview').on('click', function(){
$("#dialog").data('kendoWindow').content('<img src="'+ this.src+'" />').open()
})
}, 100)
}
}
</script>
<style>
.image-preview {
position: relative;
vertical-align: top;
height: 45px;
}
.k-window-content img{
height: 100%;
width: 100%;
}
</style>