Javascript PPTXGenJS Example to Add Multiple Images in PPTX File Using HTML5 Form in Browser

Welcome folks today in this blog post we will be adding multiple images in pptx files as slides using html5 forms in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creating Powerpoint Presentations in Browser</title>
    <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@3.8.0/libs/jszip.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@3.8.0/dist/pptxgen.min.js"></script>
</head>

<body>
    <input type="file" multiple id="files" required>
    <button onclick="download()">Download Powerpoint Presentation</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Creating Powerpoint Presentations in Browser</title>

</head>

<body>

<button onclick="download()">Download Powerpoint Presentation</button>

</body>

</html>

As you can see we are including the pptxgenjs library cdn and also we have the simple input field where we allow the users to select multiple image files and then we have the button which adds these images in powerpoint files and downloads it as an attachment. And also we are calling the download() method once the user hits the button.

Now we need to add the javascript code for this application as shown below

function download() {

        let files = document.getElementById('files')
        
        let pres = new PptxGenJS();

        let slides = []

        Array.from(files.files).forEach((f,i) => {
            slides[i+1] = pres.addSlide()
            console.log(f)
            let data = URL.createObjectURL(f)
            console.log(data)
            slides[i+1].addImage({
                path: data,
                x: "0%",
                y: "0%",
                w: "100%",
                h: "100%"
            })
        })


        // 4. Save the Presentation
        pres.writeFile();
    }

function download() {

let files = document.getElementById('files')

let pres = new PptxGenJS();

let slides = []

Array.from(files.files).forEach((f,i) => {

slides[i+1] = pres.addSlide()

console.log(f)

let data = URL.createObjectURL(f)

console.log(data)

slides[i+1].addImage({

path: data,

x: "0%",

y: "0%",

w: "100%",

h: "100%"

})

// 4. Save the Presentation

pres.writeFile();

}

As you can see we are calling the pptxgenjs constructor and then we are adding the slide using addSlide() method and then we are using the foreach loop to get all the files which are selected by the user and in the loop we are using the addImage() method to add the image inside the powerpoint presentation as a full slide. And lastly we are writing or downloading the pptx file as an attachment using the writeFile() method.