Remove base64 encoding from files that contain plain text

What does this MR do?

This merge request fixes the issue where files containing plain text were base64 encoded after being uploaded from the WebIDE.

Any file without the text/* mime type is base64 encoded and as a result, the contents of the file in the repo was base64 encoded even if it contains plain text.

This MR prevents this issue by removing the base64 encoding if the file contains plain text.

What are the relevant issue numbers?

Closes: #48746 (closed)

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Tests added for this feature/bug
• Conforms to the code review guidelines
• Conforms to the merge request performance guidelines

screen_rec

app/assets/javascripts/ide/components/new_dropdown/upload.vue

@@ -25,14 +25,32 @@ export default {
     },
   },
   methods: {
-    createFile(target, file, isText) {
+    isText(content, fileType) {
+      const knownBinaryFileTypes = ['image/'];
+      const knownTextFileTypes = ['text/'];
+      const isKnownBinaryFileType = knownBinaryFileTypes.find(type => fileType.includes(type));
+      const isKnownTextFileType = knownTextFileTypes.find(type => fileType.includes(type));
+      const asciiRegex = /^[ -~\t\n\r]+$/; // tests whether a string contains ascii characters only (ranges from space to tilde, tabs and new lines)
+
+      if (isKnownBinaryFileType) {
+        return false;
+      }
+
+      if (isKnownTextFileType) {
+        return true;
+      }
+
+      // if it's not a known file type, determine the type by evaluating the file contents
+      return asciiRegex.test(content);
+    },
+    createFile(target, file) {
       const { name } = file;
       let { result } = target;
+      const encodedContent = result.split('base64,')[1];
+      const rawContent = encodedContent ? atob(encodedContent) : '';
+      const isText = this.isText(rawContent, file.type);
 
-      if (!isText) {
-        // eslint-disable-next-line prefer-destructuring
-        result = result.split('base64,')[1];
-      }
+      result = isText ? rawContent : encodedContent;
 
       this.$emit('create', {
         name: `${this.path ? `${this.path}/` : ''}${name}`,
@@ -43,15 +61,9 @@ export default {
     },
     readFile(file) {
       const reader = new FileReader();
-      const isText = file.type.match(/text.*/) !== null;
 
-      reader.addEventListener('load', e => this.createFile(e.target, file, isText), { once: true });
-
-      if (isText) {
-        reader.readAsText(file);
-      } else {
-        reader.readAsDataURL(file);
-      }
+      reader.addEventListener('load', e => this.createFile(e.target, file), { once: true });
+      reader.readAsDataURL(file);
     },
     openFile() {
       Array.from(this.$refs.fileUpload.files).forEach(file => this.readFile(file));