feat(base64): Base64 enhancements (#905)

* fix(base64): use js-base64 to handle non ascii text

Use js-base64 to handle non ascii text and ignore whitespaces
Fix #879 and #409

* fix(base64): use js-base64 to handle non ascii text

Use js-base64 to handle non ascii text and ignore whitespaces
Fix #879 and #409

* feat(base64 file converter): add a filename and extension fields

Add filename and extension (auto filled if data url) to allow downloading with right extension and filename
Fix #788

* feat(base64 file converter): add a preview image

Fix #594. Taken from #595 (thanks @SAF2k)

1 files changed, 64 insertions, 3 deletions

diff --git a/src/tools/base64-file-converter/base64-file-converter.vue b/src/tools/base64-file-converter/base64-file-converter.vue
index 377625b..a489f9a 100644
--- a/src/tools/base64-file-converter/base64-file-converter.vue
+++ b/src/tools/base64-file-converter/base64-file-converter.vue
@@ -2,12 +2,19 @@
 import { useBase64 } from '@vueuse/core';
 import type { Ref } from 'vue';
 import { useCopy } from '@/composable/copy';
-import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+import { getExtensionFromMimeType, getMimeTypeFromBase64, previewImageFromBase64, useDownloadFileFromBase64Refs } from '@/composable/downloadBase64';
 import { useValidation } from '@/composable/validation';
 import { isValidBase64 } from '@/utils/base64';
 
+const fileName = ref('file');
+const fileExtension = ref('');
 const base64Input = ref('');
-const { download } = useDownloadFileFromBase64({ source: base64Input });
+const { download } = useDownloadFileFromBase64Refs(
+  {
+    source: base64Input,
+    filename: fileName,
+    extension: fileExtension,
+  });
 const base64InputValidation = useValidation({
   source: base64Input,
   rules: [
@@ -18,6 +25,35 @@ const base64InputValidation = useValidation({
   ],
 });
 
+watch(
+  base64Input,
+  (newValue, _) => {
+    const { mimeType } = getMimeTypeFromBase64({ base64String: newValue });
+    if (mimeType) {
+      fileExtension.value = getExtensionFromMimeType(mimeType) || fileExtension.value;
+    }
+  },
+);
+
+function previewImage() {
+  if (!base64InputValidation.isValid) {
+    return;
+  }
+  try {
+    const image = previewImageFromBase64(base64Input.value);
+    image.style.maxWidth = '100%';
+    image.style.maxHeight = '400px';
+    const previewContainer = document.getElementById('previewContainer');
+    if (previewContainer) {
+      previewContainer.innerHTML = '';
+      previewContainer.appendChild(image);
+    }
+  }
+  catch (_) {
+    //
+  }
+}
+
 function downloadFile() {
   if (!base64InputValidation.isValid) {
     return;
@@ -44,6 +80,24 @@ async function onUpload(file: File) {
 
 <template>
   <c-card title="Base64 to file">
+    <n-grid cols="3" x-gap="12">
+      <n-gi span="2">
+        <c-input-text
+          v-model:value="fileName"
+          label="File Name"
+          placeholder="Download filename"
+          mb-2
+        />
+      </n-gi>
+      <n-gi>
+        <c-input-text
+          v-model:value="fileExtension"
+          label="Extension"
+          placeholder="Extension"
+          mb-2
+        />
+      </n-gi>
+    </n-grid>
     <c-input-text
       v-model:value="base64Input"
       multiline
@@ -53,7 +107,14 @@ async function onUpload(file: File) {
       mb-2
     />
 
-    <div flex justify-center>
+    <div flex justify-center py-2>
+      <div id="previewContainer" />
+    </div>
+
+    <div flex justify-center gap-3>
+      <c-button :disabled="base64Input === '' || !base64InputValidation.isValid" @click="previewImage()">
+        Preview image
+      </c-button>
       <c-button :disabled="base64Input === '' || !base64InputValidation.isValid" @click="downloadFile()">
         Download file
       </c-button>