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/e2e/fixtures/assets/test.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 8 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.24,0,0,0.24,0,0)">
+        <g transform="matrix(0.77214,0,0,0.77214,-0.0441394,4.03962)">
+            <g transform="matrix(20.8333,0,0,20.8333,2.29118,14.5882)">
+                <path d="M0.258,-0.079L0.271,-0.001C0.246,0.004 0.224,0.007 0.204,0.007C0.172,0.007 0.147,0.002 0.13,-0.008C0.112,-0.018 0.1,-0.032 0.093,-0.048C0.086,-0.065 0.082,-0.099 0.082,-0.152L0.082,-0.45L0.018,-0.45L0.018,-0.519L0.082,-0.519L0.082,-0.647L0.169,-0.7L0.169,-0.519L0.258,-0.519L0.258,-0.45L0.169,-0.45L0.169,-0.147C0.169,-0.122 0.171,-0.106 0.174,-0.099C0.177,-0.091 0.182,-0.086 0.189,-0.082C0.196,-0.077 0.206,-0.075 0.219,-0.075C0.229,-0.075 0.242,-0.076 0.258,-0.079Z" style="fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(20.8333,0,0,20.8333,8.07935,14.5882)">
+                <path d="M0.421,-0.167L0.512,-0.156C0.497,-0.103 0.471,-0.062 0.432,-0.032C0.393,-0.003 0.344,0.012 0.284,0.012C0.208,0.012 0.148,-0.012 0.103,-0.058C0.059,-0.105 0.037,-0.171 0.037,-0.255C0.037,-0.342 0.059,-0.41 0.104,-0.458C0.149,-0.506 0.207,-0.53 0.279,-0.53C0.348,-0.53 0.405,-0.507 0.449,-0.459C0.493,-0.412 0.515,-0.346 0.515,-0.26C0.515,-0.255 0.514,-0.247 0.514,-0.237L0.127,-0.237C0.131,-0.18 0.147,-0.136 0.176,-0.106C0.205,-0.076 0.241,-0.061 0.284,-0.061C0.316,-0.061 0.344,-0.069 0.367,-0.086C0.389,-0.103 0.408,-0.13 0.421,-0.167ZM0.132,-0.309L0.422,-0.309C0.418,-0.353 0.407,-0.385 0.389,-0.407C0.361,-0.441 0.324,-0.458 0.28,-0.458C0.239,-0.458 0.205,-0.444 0.178,-0.417C0.15,-0.39 0.135,-0.354 0.132,-0.309Z" style="fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(20.8333,0,0,20.8333,19.6659,14.5882)">
+                <path d="M0.031,-0.155L0.118,-0.168C0.123,-0.134 0.136,-0.107 0.158,-0.088C0.181,-0.07 0.212,-0.061 0.252,-0.061C0.292,-0.061 0.322,-0.069 0.342,-0.085C0.361,-0.102 0.371,-0.121 0.371,-0.143C0.371,-0.163 0.362,-0.179 0.345,-0.19C0.333,-0.198 0.303,-0.208 0.255,-0.22C0.191,-0.236 0.146,-0.25 0.121,-0.262C0.096,-0.274 0.078,-0.29 0.065,-0.311C0.052,-0.332 0.045,-0.355 0.045,-0.381C0.045,-0.404 0.051,-0.425 0.061,-0.445C0.072,-0.465 0.086,-0.481 0.104,-0.494C0.118,-0.504 0.137,-0.513 0.16,-0.52C0.184,-0.527 0.209,-0.53 0.236,-0.53C0.277,-0.53 0.313,-0.524 0.344,-0.513C0.374,-0.501 0.397,-0.485 0.412,-0.465C0.426,-0.445 0.436,-0.418 0.442,-0.385L0.356,-0.373C0.352,-0.4 0.341,-0.421 0.322,-0.436C0.303,-0.451 0.277,-0.458 0.243,-0.458C0.202,-0.458 0.174,-0.451 0.156,-0.438C0.139,-0.425 0.13,-0.409 0.13,-0.391C0.13,-0.38 0.134,-0.369 0.141,-0.36C0.148,-0.351 0.16,-0.343 0.175,-0.337C0.184,-0.334 0.209,-0.326 0.252,-0.314C0.315,-0.298 0.358,-0.284 0.383,-0.274C0.407,-0.263 0.426,-0.248 0.44,-0.228C0.454,-0.207 0.461,-0.182 0.461,-0.152C0.461,-0.123 0.453,-0.095 0.436,-0.07C0.419,-0.044 0.394,-0.024 0.362,-0.01C0.33,0.005 0.293,0.012 0.252,0.012C0.185,0.012 0.134,-0.002 0.098,-0.03C0.063,-0.058 0.041,-0.1 0.031,-0.155Z" style="fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(20.8333,0,0,20.8333,30.0825,14.5882)">
+                <path d="M0.258,-0.079L0.271,-0.001C0.246,0.004 0.224,0.007 0.204,0.007C0.172,0.007 0.147,0.002 0.13,-0.008C0.112,-0.018 0.1,-0.032 0.093,-0.048C0.086,-0.065 0.082,-0.099 0.082,-0.152L0.082,-0.45L0.018,-0.45L0.018,-0.519L0.082,-0.519L0.082,-0.647L0.169,-0.7L0.169,-0.519L0.258,-0.519L0.258,-0.45L0.169,-0.45L0.169,-0.147C0.169,-0.122 0.171,-0.106 0.174,-0.099C0.177,-0.091 0.182,-0.086 0.189,-0.082C0.196,-0.077 0.206,-0.075 0.219,-0.075C0.229,-0.075 0.242,-0.076 0.258,-0.079Z" style="fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+</svg>

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';
         }
     }