fix(editorial-workflow): fix LM pointers changing to binary files (#2228)

packages/netlify-cms-backend-git-gateway/src/implementation.js

@@ -279,8 +279,8 @@ export default class GitGateway {
       },
     );
   }
-  getLargeMediaDisplayURLs(mediaFiles) {
+  async getLargeMediaDisplayURLs(mediaFiles) {
-    return this.getLargeMediaClient().then(client => {
+    const client = await this.getLargeMediaClient();
     const largeMediaItems = mediaFiles
       .filter(({ path }) => client.matchPath(path))
       .map(({ id, path }) => ({ path, sha: id }));
@@ -306,7 +306,6 @@ export default class GitGateway {
         idMaps.map(({ pointerId, resourceId }) => [pointerId, resourceMap[resourceId]]),
       )
       .then(fromPairs);
-    });
   }
 
   getMediaDisplayURL(displayURL) {
@@ -331,35 +330,73 @@ export default class GitGateway {
     });
   }
 
-  persistEntry(entry, mediaFiles, options) {
+  async getPointerFileForMediaFileObj(fileObj) {
-    return this.backend.persistEntry(entry, mediaFiles, options);
+    const client = await this.getLargeMediaClient();
-  }
-  persistMedia(mediaFile, options) {
-    const { fileObj, path, value } = mediaFile;
     const { name, size } = fileObj;
-    return this.getLargeMediaClient().then(client => {
+    const sha = await getBlobSHA(fileObj);
-      const fixedPath = path.startsWith('/') ? path.slice(1) : path;
-      if (!client.enabled || !client.matchPath(fixedPath)) {
-        return this.backend.persistMedia(mediaFile, options);
-      }
-
-      return getBlobSHA(fileObj).then(async sha => {
     await client.uploadResource({ sha, size }, fileObj);
     const pointerFileString = createPointerFile({ sha, size });
     const pointerFileBlob = new Blob([pointerFileString]);
     const pointerFile = new File([pointerFileBlob], name, { type: 'text/plain' });
     const pointerFileSHA = await getBlobSHA(pointerFile);
-        const persistMediaArgument = {
+    return {
-          fileObj: pointerFile,
+      file: pointerFile,
-          size: pointerFileBlob.size,
+      blob: pointerFileBlob,
-          path,
       sha: pointerFileSHA,
       raw: pointerFileString,
+    };
+  }
+
+  async persistEntry(entry, mediaFiles, options) {
+    const client = await this.getLargeMediaClient();
+    if (!client.enabled) {
+      return this.backend.persistEntry(entry, mediaFiles, options);
+    }
+
+    const largeMediaFilteredMediaFiles = await Promise.all(
+      mediaFiles.map(async mediaFile => {
+        const { fileObj, path } = mediaFile;
+        const fixedPath = path.startsWith('/') ? path.slice(1) : path;
+        if (!client.matchPath(fixedPath)) {
+          return mediaFile;
+        }
+
+        const pointerFileDetails = await this.getPointerFileForMediaFileObj(fileObj);
+        return {
+          ...mediaFile,
+          fileObj: pointerFileDetails.file,
+          size: pointerFileDetails.blob.size,
+          sha: pointerFileDetails.sha,
+          raw: pointerFileDetails.raw,
+        };
+      }),
+    );
+
+    return this.backend.persistEntry(entry, largeMediaFilteredMediaFiles, options);
+  }
+
+  async persistMedia(mediaFile, options) {
+    const { fileObj, path, value } = mediaFile;
+    const displayURL = URL.createObjectURL(fileObj);
+    const client = await this.getLargeMediaClient();
+    const fixedPath = path.startsWith('/') ? path.slice(1) : path;
+    if (!client.enabled || !client.matchPath(fixedPath)) {
+      return this.backend.persistMedia(mediaFile, options);
+    }
+
+    const pointerFileDetails = await this.getPointerFileForMediaFileObj(fileObj);
+    const persistMediaArgument = {
+      fileObj: pointerFileDetails.file,
+      size: pointerFileDetails.blob.size,
+      path,
+      sha: pointerFileDetails.sha,
+      raw: pointerFileDetails.raw,
       value,
     };
-        return this.backend.persistMedia(persistMediaArgument, options);
+    return {
-      });
+      ...(await this.backend.persistMedia(persistMediaArgument, options)),
-    });
+      displayURL,
+    };
   }
   deleteFile(path, commitMessage, options) {
     return this.backend.deleteFile(path, commitMessage, options);

packages/netlify-cms-core/src/actions/mediaLibrary.js

@@ -159,14 +159,19 @@ export function persistMedia(file, opts = {}) {
 
     try {
       const id = await getBlobSHA(file);
-      const displayURL = URL.createObjectURL(file);
       const assetProxy = await createAssetProxy(fileName, file, false, privateUpload);
       dispatch(addAsset(assetProxy));
       if (!integration) {
         const asset = await backend.persistMedia(state.config, assetProxy);
+        const displayURL = asset.displayURL || URL.createObjectURL(file);
         return dispatch(mediaPersisted({ id, displayURL, ...asset }));
       }
-      return dispatch(mediaPersisted({ id, displayURL, ...assetProxy.asset }, { privateUpload }));
+      return dispatch(
+        mediaPersisted(
+          { id, displayURL: URL.createObjectURL(file), ...assetProxy.asset },
+          { privateUpload },
+        ),
+      );
     } catch (error) {
       console.error(error);
       dispatch(