Add file base64 encode/decode tool

src/assets/app.scss

@@ -18,6 +18,13 @@ input:disabled, textarea:disabled {
 	opacity: 1;
 }
 
+button {
+	display: inline-block;
+	padding: 0 5px;
+	margin: 0 2px;
+	@apply text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 text-sm dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700;
+}
+
 /**
  * Tools
  */

src/components/MonacoEditor.vue

@@ -28,7 +28,6 @@ export default {
     },
   },
   mounted() {
-    console.log(monacoResultInst);
     loader.init().then((monaco) => {
       monacoResultInst = monaco;
 

src/components/Sidebar.vue

@@ -31,6 +31,7 @@ export default {
         'table_to_mediawiki_table': 'Table to Mediawiki table',
         'dummy_image': 'Dummy image',
         'humans_txt': 'humans.txt generator',
+        'file_base64_encode_decode': 'File base64 encode/decode',
       },
       'Strings': {
         'fix_ru_en_keyboard': 'Fix ru-en keyboard',

src/router/index.js

@@ -80,6 +80,11 @@ const router = createRouter({
 			name: 'url_query_viewer',
 			component: () => import('../views/UrlQueryViewer.vue'),
 		},
+		{
+			path: '/file_base64_encode_decode',
+			name: 'file_base64_encode_decode',
+			component: () => import('../views/FileBase64EncodeDecode.vue'),
+		},
 
 		/**
 		 * JSON manipulation

src/views/FileBase64EncodeDecode.vue

@@ -0,0 +1,101 @@
+<template>
+  <h2 class="tool-title">File base64 encode/decode</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group" v-if="toolData.base64Mode === 'encode'">
+    <label for="data">Data</label>
+    <input  type="file" ref="fileEncodeUpload" @change="encode" />
+  </div>
+  <div class="input-group" v-if="toolData.base64Mode === 'decode'">
+    <label for="data">Data</label>
+    <textarea id="data" v-model="toolData.data"></textarea>
+  </div>
+
+  <div class="input-group" v-if="toolData.base64Mode === 'encode'">
+    <label>Strip mime/type</label>
+
+    <div>
+      <input id="strip_mime" name="strip_mime" v-model="toolData.stripMime" v-on:change="encode" type="checkbox"> <label for="strip_mime">strip mime</label>
+    </div>
+  </div>
+
+  <div class="input-group">
+    <label>Mode</label>
+
+    <div>
+      <input id="base64_mode_encode" value="encode" name="base64_mode" v-model="toolData.base64Mode" type="radio"> <label for="base64_mode_encode">file -> base64</label><br>
+      <input id="base64_mode_decode" value="decode" name="base64_mode" v-model="toolData.base64Mode" type="radio"> <label for="base64_mode_decode">base64 -> file</label>
+    </div>
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group" v-if="toolData.base64Mode === 'encode'">
+    <label for="result">Result</label>
+    <MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
+  </div>
+  <div class="input-group" v-if="toolData.base64Mode === 'decode'">
+    <label for="result">Result</label>
+    <button v-on:click="decode">Decode & download</button>
+  </div>
+</template>
+
+<script>
+import MonacoEditor from "@/components/MonacoEditor.vue";
+
+export default {
+  components: {
+    MonacoEditor
+  },
+  data() {
+    return {
+      toolData: {
+        data: '',
+        base64Mode: 'encode',
+        stripMime: true,
+      },
+      toolResult: '',
+    };
+  },
+  methods: {
+    encode() {
+      const file = this.$refs.fileEncodeUpload.files[0];
+      const reader = new FileReader();
+
+      reader.onload = () => {
+        if (this.toolData.stripMime) {
+          this.toolResult = reader.result.split(',')[1];
+        } else {
+          this.toolResult = reader.result;
+        }
+      };
+
+      if (file) {
+        reader.readAsDataURL(file);
+      }
+    },
+    decode() {
+      const byteCharacters = atob(this.toolData.data.split(',')[1] ?? this.toolData.data);
+      const byteNumbers = new Array(byteCharacters.length);
+
+      // create file
+      for (let i = 0; i < byteCharacters.length; i++) {
+        byteNumbers[i] = byteCharacters.charCodeAt(i);
+      }
+
+      const byteArray = new Uint8Array(byteNumbers);
+      const blob = new Blob([byteArray], { type: 'application/octet-stream' });
+
+      // download
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = 'file';
+      link.click();
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+
+</style>

src/views/HumansTxt.vue

@@ -351,13 +351,6 @@ export default {
 </script>
 
 <style lang="scss">
-button {
-  display: inline-block;
-  padding: 0 5px;
-  margin: 0 2px;
-  @apply text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 text-sm dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700;
-}
-
 .humans-group {
   padding: 10px 0;
 }