fix(asset-server-plugin): Fix mime type detection

Fixes #341

packages/asset-server-plugin/e2e/asset-server-plugin.e2e-spec.ts

@@ -1,3 +1,4 @@
+/* tslint:disable:no-non-null-assertion */
 import { DefaultLogger, LogLevel, mergeConfig } from '@vendure/core';
 import { createTestEnvironment } from '@vendure/testing';
 import fs from 'fs-extra';
@@ -6,7 +7,7 @@ import fetch from 'node-fetch';
 import path from 'path';
 
 import { initialData } from '../../../e2e-common/e2e-initial-data';
-import { testConfig, TEST_SETUP_TIMEOUT_MS } from '../../../e2e-common/test-config';
+import { TEST_SETUP_TIMEOUT_MS, testConfig } from '../../../e2e-common/test-config';
 import { AssetServerPlugin } from '../src/plugin';
 
 import { CreateAssets, DeleteAsset, DeletionResult } from './graphql/generated-e2e-asset-server-plugin-types';
@@ -62,8 +63,8 @@ describe('AssetServerPlugin', () => {
         const { createAssets }: CreateAssets.Mutation = await adminClient.fileUploadMutation({
             mutation: CREATE_ASSETS,
             filePaths: filesToUpload,
-            mapVariables: filePaths => ({
-                input: filePaths.map(p => ({ file: null })),
+            mapVariables: (filePaths) => ({
+                input: filePaths.map((p) => ({ file: null })),
             }),
         });
 
@@ -182,6 +183,57 @@ describe('AssetServerPlugin', () => {
             expect(fs.existsSync(previewFilePath)).toBe(false);
         });
     });
+
+    describe('MIME type detection', () => {
+        let testImages: CreateAssets.CreateAssets[] = [];
+
+        async function testMimeTypeOfAssetWithExt(ext: string, expectedMimeType: string) {
+            const testImage = testImages.find((i) => i.source.endsWith(ext))!;
+            const result = await fetch(testImage.source);
+            const contentType = result.headers.get('Content-Type');
+
+            expect(contentType).toBe(expectedMimeType);
+        }
+
+        beforeAll(async () => {
+            const formats = ['gif', 'jpg', 'png', 'svg', 'tiff', 'webp'];
+
+            const filesToUpload = formats.map((ext) => path.join(__dirname, `fixtures/assets/test.${ext}`));
+            const { createAssets }: CreateAssets.Mutation = await adminClient.fileUploadMutation({
+                mutation: CREATE_ASSETS,
+                filePaths: filesToUpload,
+                mapVariables: (filePaths) => ({
+                    input: filePaths.map((p) => ({ file: null })),
+                }),
+            });
+
+            testImages = createAssets;
+        });
+
+        it('gif', async () => {
+            await testMimeTypeOfAssetWithExt('gif', 'image/gif');
+        });
+
+        it('jpg', async () => {
+            await testMimeTypeOfAssetWithExt('jpg', 'image/jpeg');
+        });
+
+        it('png', async () => {
+            await testMimeTypeOfAssetWithExt('png', 'image/png');
+        });
+
+        it('svg', async () => {
+            await testMimeTypeOfAssetWithExt('svg', 'image/svg+xml');
+        });
+
+        it('tiff', async () => {
+            await testMimeTypeOfAssetWithExt('tiff', 'image/tiff');
+        });
+
+        it('webp', async () => {
+            await testMimeTypeOfAssetWithExt('webp', 'image/webp');
+        });
+    });
 });
 
 export const CREATE_ASSETS = gql`

packages/asset-server-plugin/src/plugin.ts

@@ -125,7 +125,7 @@ import { AssetServerOptions, ImageTransformPreset } from './types';
  */
 @VendurePlugin({
     imports: [PluginCommonModule, TerminusModule],
-    configuration: config => AssetServerPlugin.configure(config),
+    configuration: (config) => AssetServerPlugin.configure(config),
 })
 export class AssetServerPlugin implements OnVendureBootstrap, OnVendureClose {
     private server: Server;
@@ -177,7 +177,7 @@ export class AssetServerPlugin implements OnVendureBootstrap, OnVendureClose {
     onVendureBootstrap(): void | Promise<void> {
         if (AssetServerPlugin.options.presets) {
             for (const preset of AssetServerPlugin.options.presets) {
-                const existingIndex = this.presets.findIndex(p => p.name === preset.name);
+                const existingIndex = this.presets.findIndex((p) => p.name === preset.name);
                 if (-1 < existingIndex) {
                     this.presets.splice(existingIndex, 1, preset);
                 } else {
@@ -194,7 +194,7 @@ export class AssetServerPlugin implements OnVendureBootstrap, OnVendureClose {
 
     /** @internal */
     onVendureClose(): Promise<void> {
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             this.server.close(() => resolve());
         });
     }
@@ -292,7 +292,7 @@ export class AssetServerPlugin implements OnVendureBootstrap, OnVendureClose {
             const height = h || '';
             imageParamHash = this.md5(`_transform_w${width}_h${height}_m${mode}${focalPoint}`);
         } else if (preset) {
-            if (this.presets && !!this.presets.find(p => p.name === preset)) {
+            if (this.presets && !!this.presets.find((p) => p.name === preset)) {
                 imageParamHash = this.md5(`_transform_pre_${preset}${focalPoint}`);
             }
         }
@@ -305,9 +305,7 @@ export class AssetServerPlugin implements OnVendureBootstrap, OnVendureClose {
     }
 
     private md5(input: string): string {
-        return createHash('md5')
-            .update(input)
-            .digest('hex');
+        return createHash('md5').update(input).digest('hex');
     }
 
     private addSuffix(fileName: string, suffix: string): string {
@@ -323,18 +321,18 @@ export class AssetServerPlugin implements OnVendureBootstrap, OnVendureClose {
     private getMimeType(fileName: string): string | undefined {
         const ext = path.extname(fileName);
         switch (ext) {
-            case 'jpg':
-            case 'jpeg':
+            case '.jpg':
+            case '.jpeg':
                 return 'image/jpeg';
-            case 'png':
+            case '.png':
                 return 'image/png';
-            case 'gif':
+            case '.gif':
                 return 'image/gif';
-            case 'svg':
+            case '.svg':
                 return 'image/svg+xml';
-            case 'tiff':
+            case '.tiff':
                 return 'image/tiff';
-            case 'webp':
+            case '.webp':
                 return 'image/webp';
         }
     }