Merge branch '59514-uploading-images-base64' into 'master'

Resolve "Web IDE uploading images shows base64 string"

Closes #59514

See merge request gitlab-org/gitlab-ce!27471

9 files changed, 39 insertions, 7 deletions

diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
index ec759043efc..188518dd419 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
@@ -57,6 +57,8 @@ export default {
         type: 'blob',
         content: result,
         base64: !isText,
+        binary: !isText,
+        rawPath: !isText ? target.result : '',
       });
     },
     readFile(file) {
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index c7798ad0cd7..e15b2a6f76b 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -1,5 +1,6 @@
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
+import { viewerInformationForPath } from '~/vue_shared/components/content_viewer/lib/viewer_utils';
 import flash from '~/flash';
 import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
 import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
@@ -56,6 +57,10 @@ export default {
         active: this.file.viewMode === 'preview',
       };
     },
+    fileType() {
+      const info = viewerInformationForPath(this.file.path);
+      return (info && info.id) || '';
+    },
   },
   watch: {
     file(newVal, oldVal) {
@@ -258,6 +263,7 @@ export default {
       :path="file.rawPath || file.path"
       :file-size="file.size"
       :project-path="file.projectId"
+      :type="fileType"
     />
     <diff-viewer
       v-if="showDiffViewer"
diff --git a/app/assets/javascripts/ide/lib/files.js b/app/assets/javascripts/ide/lib/files.js
index df100f753d7..b8abaa41f23 100644
--- a/app/assets/javascripts/ide/lib/files.js
+++ b/app/assets/javascripts/ide/lib/files.js
@@ -22,6 +22,8 @@ export const decorateFiles = ({
   tempFile = false,
   content = '',
   base64 = false,
+  binary = false,
+  rawPath = '',
 }) => {
   const treeList = [];
   const entries = {};
@@ -90,6 +92,8 @@ export const decorateFiles = ({
         changed: tempFile,
         content,
         base64,
+        binary,
+        rawPath,
         previewMode: viewerInformationForPath(name),
         parentPath,
       });
diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
index 7b660bda081..fd678e6e10c 100644
--- a/app/assets/javascripts/ide/stores/actions.js
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -53,7 +53,7 @@ export const setResizingStatus = ({ commit }, resizing) => {
 
 export const createTempEntry = (
   { state, commit, dispatch },
-  { name, type, content = '', base64 = false },
+  { name, type, content = '', base64 = false, binary = false, rawPath = '' },
 ) =>
   new Promise(resolve => {
     const fullName = name.slice(-1) !== '/' && type === 'tree' ? `${name}/` : name;
@@ -79,8 +79,10 @@ export const createTempEntry = (
       branchId: state.currentBranchId,
       type,
       tempFile: true,
-      base64,
       content,
+      base64,
+      binary,
+      rawPath,
     });
     const { file, parentPath } = data;
 
diff --git a/app/assets/javascripts/ide/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js
index 3ab8f3f11be..66c5180b782 100644
--- a/app/assets/javascripts/ide/stores/utils.js
+++ b/app/assets/javascripts/ide/stores/utils.js
@@ -69,6 +69,8 @@ export const decorateData = entity => {
     changed = false,
     parentTreeUrl = '',
     base64 = false,
+    binary = false,
+    rawPath = '',
     previewMode,
     file_lock,
     html,
@@ -92,6 +94,8 @@ export const decorateData = entity => {
     renderError,
     content,
     base64,
+    binary,
+    rawPath,
     previewMode,
     file_lock,
     html,
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue
index 4155e1bab9c..1e6f4c376c1 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue
@@ -1,5 +1,4 @@
 <script>
-import { viewerInformationForPath } from './lib/viewer_utils';
 import MarkdownViewer from './viewers/markdown_viewer.vue';
 import ImageViewer from './viewers/image_viewer.vue';
 import DownloadViewer from './viewers/download_viewer.vue';
@@ -24,15 +23,18 @@ export default {
       required: false,
       default: '',
     },
+    type: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     viewer() {
       if (!this.path) return null;
+      if (!this.type) return DownloadViewer;
 
-      const previewInfo = viewerInformationForPath(this.path);
-      if (!previewInfo) return DownloadViewer;
-
-      switch (previewInfo.id) {
+      switch (this.type) {
         case 'markdown':
           return MarkdownViewer;
         case 'image':
diff --git a/changelogs/unreleased/59514-uploading-images-base64.yml b/changelogs/unreleased/59514-uploading-images-base64.yml
new file mode 100644
index 00000000000..905b00db06a
--- /dev/null
+++ b/changelogs/unreleased/59514-uploading-images-base64.yml
@@ -0,0 +1,5 @@
+---
+title: Show proper preview for uploaded images in Web IDE
+merge_request: 27471
+author:
+type: fixed
diff --git a/spec/javascripts/ide/components/new_dropdown/upload_spec.js b/spec/javascripts/ide/components/new_dropdown/upload_spec.js
index 878e17ac805..d19af6af2d7 100644
--- a/spec/javascripts/ide/components/new_dropdown/upload_spec.js
+++ b/spec/javascripts/ide/components/new_dropdown/upload_spec.js
@@ -78,6 +78,8 @@ describe('new dropdown upload', () => {
         type: 'blob',
         content: 'plain text',
         base64: false,
+        binary: false,
+        rawPath: '',
       });
     });
 
@@ -89,6 +91,8 @@ describe('new dropdown upload', () => {
         type: 'blob',
         content: binaryTarget.result.split('base64,')[1],
         base64: true,
+        binary: true,
+        rawPath: binaryTarget.result,
       });
     });
   });
diff --git a/spec/javascripts/vue_shared/components/content_viewer/content_viewer_spec.js b/spec/javascripts/vue_shared/components/content_viewer/content_viewer_spec.js
index 4da8c6196b1..bdf802052b9 100644
--- a/spec/javascripts/vue_shared/components/content_viewer/content_viewer_spec.js
+++ b/spec/javascripts/vue_shared/components/content_viewer/content_viewer_spec.js
@@ -4,6 +4,7 @@ import axios from '~/lib/utils/axios_utils';
 import contentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import { GREEN_BOX_IMAGE_URL } from 'spec/test_constants';
+import '~/behaviors/markdown/render_gfm';
 
 describe('ContentViewer', () => {
   let vm;
@@ -29,6 +30,7 @@ describe('ContentViewer', () => {
       path: 'test.md',
       content: '*  Test',
       projectPath: 'testproject',
+      type: 'markdown',
     });
 
     const previewContainer = vm.$el.querySelector('.md-previewer');
@@ -44,6 +46,7 @@ describe('ContentViewer', () => {
     createComponent({
       path: GREEN_BOX_IMAGE_URL,
       fileSize: 1024,
+      type: 'image',
     });
 
     setTimeout(() => {