Step-1:
=====
Create Grid Region.
Static ID: imgList
SQL Query:
SELECT
DOCUMENT_ID, --- PK Column
FILE_NAME,
FILE_MIMETYPE,
FILE_BLOB
.
.
.
---- add Extra two column
apex_web_service.blob2clobbase64 (FILE_BLOB) AS FILE_PREVIEW,
NULL as IMAGES_VIEW
FROM TABLE_NAME;
step-2:
=====
SELECT FILE_PREVIEW Column.
Static ID: FILE_PREVIEW
-------------------------------------
SELECT IMAGES_VIEW Column.
Static ID: IMAGES_VIEW
HTML Expression:
<img src="data:image/jpeg;base64, &FILE_PREVIEW." width=20 height=20 id="imgSrc">
OR
আপনার বর্তমান কোডে আপনি সরাসরি একটি ইমেজ ট্যাগ ( <img>) ব্যবহার করছেন। এর সাথে একটি আইকন যোগ করা:
<div style="display: flex; align-items: center; justify-content: center; gap: 8px;">
<a href="javascript:f_img_view('&DOCUMENT_ID!RAW.');"
title="View Preview"
style="text-decoration: none;">
<span aria-hidden="true" class="fa fa-materialized-view"></span>
</a>
</div>
Target: Type: URL
URL: javascript:f_img_view('&DOCUMENT_ID.');
OR
আপনার IMAGES_VIEW কলামের Target URL-এ !RAW. ব্যবহার করুন। এটি কমা বা অন্য কোনো ফরম্যাটিং ছাড়াই সরাসরি ভ্যালুটি পাঠাবে।
javascript:f_img_view('&DOCUMENT_ID!RAW.');
step-3:
=====
Create a Region for Image View.
Main Region Name: Display Documents
Template: Inline Dialog
Static ID: image-preview
CSS Classes: js-dialog-size1500x700
Create Sub region: Image
Static ID: image_container
step-4:
=====
Function and Global Variable Declaration:
///////////////////////////////////////////////////////////
//Image Preview Start
function f_img_view(mechineNo) {
var grid = apex.region('imgList').widget().interactiveGrid('getViews', 'grid'); //grid static id : imgList
var model = grid.model;
var record = model.getRecord(mechineNo);
if (!record) {
alert("Record not found.");
return;
}
let base64Data = model.getValue(record, 'FILE_PREVIEW');
let mimeType = model.getValue(record, 'FILE_MIMETYPE'); // e.g. image/jpeg, application/pdf, text/plain
let fileName = model.getValue(record, 'FILE_NAME') || 'Download'; // fallback name
if (!base64Data) {
alert("No file found.");
return;
}
let fileURL = `data:${mimeType};base64,${base64Data}`;
window.currentImageSrc = fileURL;
window.currentFileName = fileName;
window.zoomLevel = 1;
window.rotation = 0;
let previewDiv = document.getElementById('image_container');// sub region er static id :image_container
// Determine preview based on MIME type
let previewHTML = '';
if (mimeType.startsWith('image/')) {
previewHTML = `
<div style="position: relative; text-align: center;">
<div id="sticky-buttons" style="position: sticky; top: 10px; z-index: 10; background: white; padding: 10px; border-radius: 8px;">
<button type="button" onclick="zoomImage(1.2)" class="a-Button">🔍 Zoom In</button>
<button type="button" onclick="zoomImage(0.8)" class="a-Button">🔎 Zoom Out</button>
<button type="button" onclick="rotateImage()" class="a-Button">🔄 Rotate</button>
<button type="button" onclick="downloadCurrentFile()" class="a-Button a-Button--primary">⬇️ Download</button>
<button type="button" onclick="printImage()" class="a-Button a-Button--primary">🖨️ Print</button>
</div>
<img id="zoomableImage" src="${fileURL}" style="max-width: 90%; transition: transform 0.3s ease; border-radius: 8px;" />
</div>`;
} else if (mimeType === 'application/pdf') {
previewHTML = `
<div style="text-align: center;">
<iframe src="${fileURL}" width="100%" height="600px" style="border: 1px solid #ccc;"></iframe><br/>
<a href="${fileURL}" download="${fileName}" class="a-Button a-Button--primary">⬇️ Download PDF</a>
</div>`;
} else {
previewHTML = `
<div style="padding: 20px; text-align: center;">
<p><strong>Preview not supported for this file type.</strong></p>
<p>File Name: ${fileName}</p>
<a href="${fileURL}" download="${fileName}" class="a-Button a-Button--primary">⬇️ Download File</a>
</div>`;
}
previewDiv.innerHTML = previewHTML;
openModal('image-preview'); // custom modal popup //// region er static id :image-preview
}
// Zoom Function
window.zoomImage = function (zoomFactor) {
const image = document.getElementById('zoomableImage');
if (!image) return;
window.zoomLevel *= zoomFactor;
image.style.transform = `scale(${window.zoomLevel}) rotate(${window.rotation}deg)`;
}
// Rotate Function
window.rotateImage = function () {
const image = document.getElementById('zoomableImage');
if (!image) return;
window.rotation = (window.rotation + 90) % 360;
image.style.transform = `scale(${window.zoomLevel}) rotate(${window.rotation}deg)`;
}
// Download
window.downloadCurrentFile = function () {
const link = document.createElement('a');
link.href = window.currentImageSrc;
link.download = window.currentFileName || 'Download';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
// Print
window.printImage = function () {
if (!window.currentImageSrc) {
alert("প্রিন্ট করার জন্য কোনো ইমেজ পাওয়া যায়নি।");
return;
}
// ১. একটি নতুন ব্ল্যাঙ্ক উইন্ডো ওপেন করা
var printWin = window.open('', '_blank');
// ২. পপ-আপ ব্লকার চেক করা
if (!printWin || printWin.closed || typeof printWin.closed == 'undefined') {
alert("Popup Blocked! দয়া করে আপনার ব্রাউজারের সেটিংস থেকে পপআপ এলাউ করুন।");
return;
}
// ৩. নতুন উইন্ডোতে HTML এবং ইমেজ কন্টেন্ট রাইট করা
printWin.document.write(`
<html>
<head>
<title>Print Document - ${window.currentFileName || 'Image'}</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
img {
max-width: 100%;
height: auto;
display: block;
}
@media print {
@page { margin: 0.5cm; }
body { margin: 0; }
img { max-width: 100%; height: auto; }
}
</style>
</head>
<body>
<img id="printImg" src="${window.currentImageSrc}" />
<script>
// ইমেজটি পুরোপুরি লোড হওয়া পর্যন্ত অপেক্ষা করা
var img = document.getElementById('printImg');
img.onload = function() {
window.focus(); // নতুন উইন্ডোতে ফোকাস করা
window.print(); // প্রিন্ট ডায়ালগ ওপেন করা
// প্রিন্ট শেষে বা ক্যানসেল করলে উইন্ডোটি বন্ধ করে দেওয়া
setTimeout(function() { window.close(); }, 500);
};
// যদি ইমেজ লোড হতে ভুল হয়
img.onerror = function() {
alert("ইমেজ লোড হতে সমস্যা হয়েছে।");
window.close();
};
<\/script>
</body>
</html>
`);
printWin.document.close();
};
//Image Preview end
