mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-25 01:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(base64): Base64 enhancements (#905)

Browse source 
* 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)
This commit is contained in:
sharevb 2024-05-20 22:13:55 +02:00 • committed by GitHub
parent e876d03608
commit 30144aa3f5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 164 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/tools/base64-file-converter/base64-file-converter.vue
View file

@ -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>