diff options
Diffstat (limited to 'src/tools/base64-file-converter/base64-file-converter.vue')
-rw-r--r-- | src/tools/base64-file-converter/base64-file-converter.vue | 67 |
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> |