Oracle Apex PDF Converter || Convert Multiple Images into Single PDF File

 1. Download javascript library file from here-

https://drive.google.com/file/d/19KyEFcDYSYJr06f6h2O4TQOHpDuJhwIY/view?usp=sharing 

or 

https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js

2. Open your apex application and click on the "Shared Components" icon.

3. Go to the "Files and Reports" section and click on the "Static Application Files" link.

4. Click on the "Create File" button.

5. Click on the "Drag and Drop Files" box.

6. Now select javascript library file which you download in step 1 and click "Create" button.

7. Now go the application back and create a blank page.

8. Create a region.

9. Add an item under this region.

NAME: P14_UPLOAD_FILE

Allows Multiple Files: Yes

10. Create 3 button (BTN_UPLOAD, BTN_CONVERT, BTN_DOWNLOAD) under this region.

11. Set buttons properties as your wish or follow video.

12. Create another region for display uploaded image. Set it's properties as like below-

NAME : Display Uploaded Image

Type : Dynamic Content

Language: PL/SQL

PL/SQL Function Body Return a clob: 

DECLARE

l_clob  CLOB;

BEGIN

l_clob := l_clob||'<div id="image-preview"></div>';

RETURN l_clob;

END ;

13. Select the page and go to the "Function and Global Variable Declaration". Open editor and paste the below code-

let uploadedImages = [];

function handleImageUpload(event) {

const imagePreview = document.getElementById('image-preview');

imagePreview.innerHTML = ''; // Clear previous preview

const files = event.files;

uploadedImages = []; // Clear previous uploaded images

for (let file of files) {

const reader = new FileReader();

reader.onload = function(e) {

const imgElement = document.createElement('img');

imgElement.src = e.target.result;

imagePreview.appendChild(imgElement);

// Add image data to uploadedImages array

uploadedImages.push(e.target.result);

};

reader.readAsDataURL(file);

}

}

async function mergeImagesIntoPDF(stats) {

if (uploadedImages.length === 0) {

alert('Please upload some images first!');

return;

}

// Create a new PDF document

const pdfDoc = await PDFLib.PDFDocument.create();

// Loop through all uploaded images and add them to the PDF

for (let imgDataUrl of uploadedImages) {

const imageBytes = await fetch(imgDataUrl).then(res =>                 res.arrayBuffer());

let image;

if (imgDataUrl.startsWith('data:image/png')) {

image = await pdfDoc.embedPng(imageBytes);

} else if (imgDataUrl.startsWith('data:image/jpeg')) {

image = await pdfDoc.embedJpg(imageBytes);

}

const { width, height } = image.scale(1);

// Add a new page with the dimensions of the image

const page = pdfDoc.addPage([width, height]);

// Draw the image on the page

page.drawImage(image, {

x: 0,

y: 0,

width: width,

height: height

});

}

// Serialize the PDF to bytes

const pdfBytes = await pdfDoc.save();

// Create a blob and download link

const blob = new Blob([pdfBytes], { type: 'application/pdf' });

const url = URL.createObjectURL(blob);

if (stats === 'D') {

const link = document.createElement('a');

link.href = url;

link.download = 'merged-images.pdf';

link.click();

// Clean up the URL object

URL.revokeObjectURL(url);

} else {

apex.item('P14_PDF_FILE_URL').setValue(url);

apex.region('display-pdf').refresh();

}   

}

14. Add css into the "CSS -> Inline" section. Open editor and paste the below code- 

img {

margin: 3px;

}

15. Create a dynamic action under the "BTN_UPLOAD" button. Set properties like below-

NAME : Display Image

True Action : Execute javaScript Code

Code : handleImageUpload(P14_UPLOAD_FILE_FILE);

16. Select Page and go to the "Javascripts-> File RULs" Section.Add the below link here-

#APP_FILES#pdf-lib.min.js 

17. Create another dynamic action under the "BTN_CONVERT" button. Set properties like-

NAME       : Show PDF

True Action: Execute javaScript code-

Code       : mergeImagesIntoPDF('S');

18. Create another dynamic action under the "BTN_DOWNLOAD" button. Set properties like-

NAME       : Download PDF

True Action: Execute javaScript code-

Code       : mergeImagesIntoPDF('D');

19. Create an item and set it's properties like-

Name: P14_PDF_FILE_URL

Type: Hidden

Value Protected:No

20. Create another region and set it's properties like below-

Name: Display PDF

Template: Inline Dialog

21. Create a sub region under this region and set it's properties like below-

Name                : Report Container

Type                 : Interactive Report

Sql Query        : SELECT '<iframe width="100%" src="'||:P14_PDF_FILE_URL||'"></iframe>' AS report FROM dual;

Page Items to Submit: P14_PDF_FILE_URL

Static Id                    : display-pdf

22. Select the report's column and set it's properties like below-

Heading: &nbsp;

HTML Expression: <iframe width="100%"  src="&P14_PDF_FILE_URL."></iframe>

23. Select "BTN_CONVERT" and add another true action under "Show PDF" dynamic action. Set properties like-

Add another true action to open the popup dialog.

True Action : Execute javaScript Code

Code : this.affectedElements.dialog('open');

Selection Type : Region

Region : Display PDF