Fix WebIDE image being base64

Problem was createCommitPayload expects a blob url but we gave a data
url and base64 content

This fixes it and also makes the preview work again

Changelog: fixed
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/65165

app/assets/javascripts/ide/components/repo_editor.vue

@@ -415,7 +415,11 @@ export default {
           const parentPath = getPathParent(this.file.path);
           const path = `${parentPath ? `${parentPath}/` : ''}${file.name}`;
 
-          return this.addTempImage({ name: path, rawPath: content }).then(({ name: fileName }) => {
+          return this.addTempImage({
+            name: path,
+            rawPath: URL.createObjectURL(file),
+            content: atob(content.split('base64,')[1]),
+          }).then(({ name: fileName }) => {
             this.editor.replaceSelectedText(`![${fileName}](./${fileName})`);
           });
         });

app/assets/javascripts/ide/stores/actions.js

@@ -76,11 +76,11 @@ export const createTempEntry = (
   return file;
 };
 
-export const addTempImage = ({ dispatch, getters }, { name, rawPath = '' }) =>
+export const addTempImage = ({ dispatch, getters }, { name, rawPath = '', content = '' }) =>
   dispatch('createTempEntry', {
     name: getters.getAvailableFileName(name),
     type: 'blob',
-    content: rawPath.split('base64,')[1],
+    content,
     rawPath,
     openFile: false,
     makeFileActive: false,

app/assets/javascripts/ide/stores/utils.js

@@ -252,10 +252,10 @@ export function extractMarkdownImagesFromEntries(mdFile, entries) {
       .trim();
 
     const imageContent = entries[imagePath]?.content || entries[imagePath]?.raw;
+    const imageRawPath = entries[imagePath]?.rawPath;
 
     if (!isAbsolute(path) && imageContent) {
-      const ext = path.includes('.') ? path.split('.').pop().trim() : 'jpeg';
-      const src = `data:image/${ext};base64,${imageContent}`;
+      const src = imageRawPath;
       i += 1;
       const key = `{{${prefix}${i}}}`;
       images[key] = { alt, src, title };

spec/frontend/ide/components/repo_editor_spec.js

@@ -640,11 +640,12 @@ describe('RepoEditor', () => {
       pasteImage();
 
       await waitForFileContentChange();
+      expect(vm.$store.state.entries['foo/foo.png'].rawPath.startsWith('blob:')).toBe(true);
       expect(vm.$store.state.entries['foo/foo.png']).toMatchObject({
         path: 'foo/foo.png',
         type: 'blob',
-        content: 'Zm9v',
-        rawPath: 'data:image/png;base64,Zm9v',
+        content: 'foo',
+        rawPath: vm.$store.state.entries['foo/foo.png'].rawPath,
       });
     });
 

spec/frontend/ide/stores/utils_spec.js

@@ -604,7 +604,7 @@ describe('Multi-file store utils', () => {
     let entries;
 
     beforeEach(() => {
-      const img = { content: '/base64/encoded/image+' };
+      const img = { content: 'png-gibberish', rawPath: 'blob:1234' };
       mdFile = { path: 'path/to/some/directory/myfile.md' };
       entries = {
         // invalid (or lack of) extensions are also supported as long as there's
@@ -637,14 +637,14 @@ describe('Multi-file store utils', () => {
       ${'* ![img](img.png "title here")'}     | ${'png'}  | ${'img'}         | ${'title here'}
     `(
       'correctly transforms markdown with uncommitted images: $markdownBefore',
-      ({ markdownBefore, ext, imgAlt, imgTitle }) => {
+      ({ markdownBefore, imgAlt, imgTitle }) => {
         mdFile.content = markdownBefore;
 
         expect(utils.extractMarkdownImagesFromEntries(mdFile, entries)).toEqual({
           content: '* {{gl_md_img_1}}',
           images: {
             '{{gl_md_img_1}}': {
-              src: `data:image/${ext};base64,/base64/encoded/image+`,
+              src: 'blob:1234',
               alt: imgAlt,
               title: imgTitle,
             },