fix(image): slugify external image name to prevent issues with special characters

Author: singerla

__tests__/add-external-image.test.ts

@@ -13,7 +13,7 @@ test('Load external media, add/modify image and set image target', async () => {
 
   const pres = automizer
     .loadRoot(`RootTemplate.pptx`)
-    .loadMedia([`feather.png`, `test.png`])
+    .loadMedia([`feather.png`, `test.png`, `Dàngerous Dinösaur.png`])
     .loadMedia(`test.png`, `${__dirname}/../__tests__/media`, 'pre_')
     .load(`SlideWithShapes.pptx`, 'shapes')
     .load(`SlideWithImages.pptx`, 'images');
@@ -34,10 +34,16 @@ test('Load external media, add/modify image and set image target', async () => {
     ]);
   });
 
+  pres.addSlide('images', 1, (slide) => {
+    slide.modifyElement('Grafik 5', [
+      ModifyImageHelper.setRelationTarget('Dàngerous Dinösaur.png'),
+    ]);
+  });
+
   const result = await pres.write(`add-external-image.test.pptx`);
 
   // expect a 5x3cm light-blue duotone feather instead of imagePNG cord loop on page 1
   // expect imagePNG cord loop on page 2 instead of cut tree jpg
 
-  expect(result.images).toBe(3);
+  expect(result.images).toBe(5);
 });

package.json

@@ -60,7 +60,8 @@
     "extract-zip": "^2.0.1",
     "jszip": "^3.10.1",
     "pptxgenjs": "^3.12.0",
-    "regexp.escape": "^1.1.0"
+    "regexp.escape": "^1.1.0",
+    "slugify": "^1.6.6"
   },
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/automizer.ts

@@ -19,14 +19,12 @@ import path from 'path';
 import * as fs from 'fs';
 import { XmlHelper } from './helper/xml-helper';
 import ModifyPresentationHelper from './helper/modify-presentation-helper';
-import {
-  contentTracker as Tracker,
-  ContentTracker,
-} from './helper/content-tracker';
+import { contentTracker as Tracker, ContentTracker } from './helper/content-tracker';
 import JSZip from 'jszip';
 import { ISlide } from './interfaces/islide';
 import { IMaster } from './interfaces/imaster';
 import { ContentTypeExtension } from './enums/content-type-map';
+import slugify from 'slugify';
 
 /**
  * Automizer
@@ -502,14 +500,17 @@ export default class Automizer implements IPresentationProps {
    * Write all media files to archive.
    */
   public async writeMediaFiles(): Promise<void> {
+    const mediaDir = 'ppt/media/';
     for (const file of this.rootTemplate.mediaFiles) {
       const data = fs.readFileSync(file.filepath);
-      let archiveFilename = 'ppt/media/' + file.file;
+      let archiveFilename = file.file;
       if (file.prefix) {
-        archiveFilename = 'ppt/media/' + file.prefix + file.file;
+        archiveFilename = file.prefix + file.file;
       }
 
-      await this.rootTemplate.archive.write(archiveFilename, data);
+      archiveFilename = slugify(archiveFilename);
+
+      await this.rootTemplate.archive.write(mediaDir + archiveFilename, data);
       await XmlHelper.appendImageExtensionToContentType(
         this.rootTemplate.archive,
         file.extension,

src/helper/modify-image-helper.ts

@@ -1,7 +1,6 @@
 import { XmlElement } from '../types/xml-types';
 import { ImageStyle } from '../types/modify-types';
-import { XmlHelper } from './xml-helper';
-import { vd } from './general-helper';
+import slugify from 'slugify';
 
 export default class ModifyImageHelper {
   /**
@@ -11,7 +10,7 @@ export default class ModifyImageHelper {
    */
   static setRelationTarget = (filename: string) => {
     return (element: XmlElement, arg1: XmlElement): void => {
-      arg1.setAttribute('Target', '../media/' + filename);
+      arg1.setAttribute('Target', '../media/' + slugify(filename));
     };
   };
 

yarn.lock

@@ -3388,6 +3388,11 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+slugify@^1.6.6:
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.6.6.tgz#2d4ac0eacb47add6af9e04d3be79319cbcc7924b"
+  integrity sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==
+
 [email protected]:
   version "0.5.13"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"