Fixes for Media Library upload (#5971)

* Fix formatFileInfo

Keep original file name including extension

* Fix file name for generated media

File name was not set for all generated media: thumbnail and resized pictures.

* Generate hash based on file name without extension

* cleanup PR

Signed-off-by: Alexandre Bodin <bodin.alex@gmail.com>

* Fix unit tests
Exclude temporarily unit test 'Replaces reserved and unsafe characters for URLs and files in hash' because it did not work properly ever.

* Remove path delimiter from filename because it is correct character for file path

* Fix e2e

* Continue fixes for e2e

* Fix createRequest content type

* Correct thumbnail name in e2e test

Co-authored-by: Alexandre BODIN <alexandrebodin@users.noreply.github.com>
Co-authored-by: Alexandre Bodin <bodin.alex@gmail.com>
Co-authored-by: Andrey Hohutkin <none@none>

packages/strapi-plugin-upload/package.json

@@ -19,7 +19,6 @@
     "koa-range": "0.3.0",
     "koa-static": "^5.0.0",
     "lodash": "^4.17.11",
-    "mime-types": "2.1.26",
     "node-fetch": "2.6.0",
     "react": "^16.9.0",
     "react-copy-to-clipboard": "^5.0.1",

packages/strapi-plugin-upload/services/Upload.js

@@ -12,7 +12,6 @@ const crypto = require('crypto');
 const _ = require('lodash');
 const util = require('util');
 const { nameToSlug } = require('strapi-utils');
-const mime = require('mime-types');
 
 const { bytesToKbytes } = require('../utils/file');
 
@@ -43,16 +42,16 @@ const combineFilters = params => {
 
 module.exports = {
   formatFileInfo({ filename, type, size }, fileInfo = {}, metas = {}) {
-    const ext = '.' + mime.extension(type) || path.extname(filename);
+    const ext = path.extname(filename);
-    const baseName = path.basename(filename, path.extname(filename));
+    const basename = path.basename(fileInfo.name || filename, ext);
 
-    const usedName = fileInfo.name || baseName;
+    const usedName = fileInfo.name || filename;
 
     const entity = {
       name: usedName,
       alternativeText: fileInfo.alternativeText,
       caption: fileInfo.caption,
-      hash: generateFileName(usedName),
+      hash: generateFileName(basename),
       ext,
       mime: type,
       size: bytesToKbytes(size),

packages/strapi-plugin-upload/services/__tests__/upload.test.js

@@ -10,7 +10,7 @@ describe('Upload service', () => {
       };
 
       expect(uploadService.formatFileInfo(fileData)).toMatchObject({
-        name: 'File Name',
+        name: 'File Name.png',
         hash: expect.stringContaining('File_Name'),
         ext: '.png',
         mime: 'image/png',
@@ -20,13 +20,13 @@ describe('Upload service', () => {
 
     test('Replaces reserved and unsafe characters for URLs and files in hash', () => {
       const fileData = {
-        filename: 'File%&Näme\\<>:"|?*.png',
+        filename: 'File%&Näme<>:"|?*.png',
         type: 'image/png',
         size: 1000 * 1000,
       };
 
       expect(uploadService.formatFileInfo(fileData)).toMatchObject({
-        name: 'File%&Näme\\<>:"|?*',
+        name: 'File%&Näme<>:"|?*.png',
         hash: expect.stringContaining('File_and_Naeme'),
         ext: '.png',
         mime: 'image/png',
@@ -42,7 +42,7 @@ describe('Upload service', () => {
       };
 
       const fileInfo = {
-        name: 'Custom File Name',
+        name: 'Custom File Name.png',
       };
 
       expect(uploadService.formatFileInfo(fileData, fileInfo)).toMatchObject({
@@ -67,7 +67,7 @@ describe('Upload service', () => {
       };
 
       expect(uploadService.formatFileInfo(fileData, fileInfo)).toMatchObject({
-        name: 'File Name',
+        name: 'File Name.png',
         caption: fileInfo.caption,
         alternativeText: fileInfo.alternativeText,
         hash: expect.stringContaining('File_Name'),
@@ -89,7 +89,7 @@ describe('Upload service', () => {
       };
 
       expect(uploadService.formatFileInfo(fileData, {}, fileMetas)).toMatchObject({
-        name: 'File Name',
+        name: 'File Name.png',
         ext: '.png',
         mime: 'image/png',
         size: 1000,

packages/strapi-plugin-upload/services/image-manipulation.js

@@ -42,6 +42,7 @@ const generateThumbnail = async file => {
       const { width, height, size } = await getMetadatas(newBuff);
 
       return {
+        name: `thumbnail_${file.name}`,
         hash: `thumbnail_${file.hash}`,
         ext: file.ext,
         mime: file.mime,
@@ -122,6 +123,7 @@ const generateBreakpoint = async (key, { file, breakpoint }) => {
     return {
       key,
       file: {
+        name: `${key}_${file.name}`,
         hash: `${key}_${file.hash}`,
         ext: file.ext,
         mime: file.mime,

packages/strapi-plugin-upload/test/graphqlUpload.test.e2e.js

@@ -75,7 +75,7 @@ describe('Upload plugin end to end tests', () => {
       data: {
         upload: {
           id: expect.anything(),
-          name: 'rec',
+          name: 'rec.jpg',
         },
       },
     });
@@ -122,7 +122,7 @@ describe('Upload plugin end to end tests', () => {
         multipleUpload: expect.arrayContaining([
           expect.objectContaining({
             id: expect.anything(),
-            name: 'rec',
+            name: 'rec.jpg',
           }),
         ]),
       },

packages/strapi-plugin-upload/test/upload.test.e2e.js

@@ -71,8 +71,8 @@ describe('Upload plugin end to end tests', () => {
       expect(res.body[0]).toEqual(
         expect.objectContaining({
           id: expect.anything(),
-          name: 'rec',
+          name: 'rec.jpg',
-          ext: '.jpeg',
+          ext: '.jpg',
           mime: 'image/jpeg',
           hash: expect.any(String),
           size: expect.any(Number),
@@ -105,7 +105,7 @@ describe('Upload plugin end to end tests', () => {
       expect(res.body[0]).toEqual(
         expect.objectContaining({
           id: expect.anything(),
-          name: 'thumbnail_target',
+          name: 'thumbnail_target.png',
           ext: '.png',
           mime: 'image/png',
           hash: expect.any(String),
@@ -116,6 +116,7 @@ describe('Upload plugin end to end tests', () => {
           provider: 'local',
           formats: {
             thumbnail: {
+              name: 'thumbnail_thumbnail_target.png',
               hash: expect.any(String),
               ext: '.png',
               mime: 'image/png',

test/helpers/request.js

@@ -14,6 +14,7 @@ const createAuthRequest = token => {
   return createRequest({
     headers: {
       Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
     },
   });
 };

yarn.lock

@@ -11825,7 +11825,7 @@ mime-db@1.43.0, "mime-db@>= 1.43.0 < 2":
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.43.0.tgz#0a12e0502650e473d735535050e7c8f4eb4fae58"
   integrity sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==
 
-mime-types@2.1.26, mime-types@^2.0.8, mime-types@^2.1.12, mime-types@^2.1.18, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
+mime-types@^2.0.8, mime-types@^2.1.12, mime-types@^2.1.18, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
   version "2.1.26"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.26.tgz#9c921fc09b7e149a65dfdc0da4d20997200b0a06"
   integrity sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==