How do I convert a .pptx file to a base64 string?

Question

So for a project I'm working on, I have to make an addin for Office. In this addin I need to open other pptx files from the addin. I found out I need to use base64 for the PowerPoint.createPresentation() function. When I hardcode the base64 string in it works, but I need to generate the string from the file the user has selected, which is pulled from a server.

To be honest, I haven't tried much. I'm still fairly new to programming and have found things online. I did find things online, but I have no idea on how to implement it. Most of the results I had were with Javascript. I know it should work inside Typescript, but as I said before, I have no idea on how to implement it either as javascript code or as typescript code.

The current situation is that I get the Base64 string from an array. When a user selects an option, the selected pptx is opened. The string is currently hardcoded in.

HTML:

<div *ngFor="let template of templates">
  <button (click)="onClickOpenTemplate(template.src)">
    <img src="{{ template.img }}" alt="">
    <h3>{{ template.name }}</h3>
  </button>
</div>

Typescript:

templates: any[] = [
  {
    src: 'base64string',
    name: 'filename',
    img: 'imgPath'
  },
  {
    src: 'base64string',
    name: 'filename',
    img: 'imgPath'
  },
];

async onCreateOpenPresentation(template) {
    PowerPoint.createPresentation(template);
}

The result what I would like to have is that when a button is clicked, the function will get the pptx file, convert is to base64 and then open it in a new powerpoint window instead of the base64 string being hardcoded in.

Edit: I tried some code I found somewhere

// window.open(template);
    // tslint:disable-next-line: prefer-const
    let ActiveXObject: (type: string) => void;
    try {
      const fso = new ActiveXObject('Scripting.FileSystemObject');
      const file = fso.OpenTextFile(template, 1);
      const fileContent = file.ReadAll();
      file.Close();
      return fileContent;
      } catch (e) {
      if (e.number === -2146827859) {
        alert('Unable to access local files due to browser security settings. ' +
        'To overcome this, go to Tools->Internet Options->Security->Custom Level. ' +
        // tslint:disable-next-line: max-line-length
        'Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"');
      }
    }
    const templateBase64 = window.btoa(fileContent);
    console.log(templateBase64);
    PowerPoint.createPresentation(templateBase64);

But unfortunately, the fileContent in window.btao() is not recognised. Does someone now how I can fix this?

Answer 1

If I understood your question right, you want to read a file on button click, convert it to base64 string and pass it to the Powerpoint function. Here's a vanilla Javascript solution that you can refer; it's not a big deal to convert that code into Typescript.

Convert Input File to Base64 in Angular 2 without using FileReader In Ionic V2