From 3f61e3569e218c15b8325e9e84137f9727b76853 Mon Sep 17 00:00:00 2001 From: sharevb Date: Sun, 25 Feb 2024 11:05:41 +0100 Subject: [PATCH 1/4] 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 --- package.json | 1 + src/utils/base64.test.ts | 13 +++++++------ src/utils/base64.ts | 11 +++++++---- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 65f29dbd89..99a9a7df3b 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "highlight.js": "^11.7.0", "iarna-toml-esm": "^3.0.5", "ibantools": "^4.3.3", + "js-base64": "^3.7.6", "json5": "^2.2.3", "jwt-decode": "^3.1.2", "libphonenumber-js": "^1.10.28", diff --git a/src/utils/base64.test.ts b/src/utils/base64.test.ts index 994f1b1be3..51d1523957 100644 --- a/src/utils/base64.test.ts +++ b/src/utils/base64.test.ts @@ -38,7 +38,8 @@ describe('base64 utils', () => { it('should throw for incorrect base64 string', () => { expect(() => base64ToText('a')).to.throw('Incorrect base64 string'); - expect(() => base64ToText(' ')).to.throw('Incorrect base64 string'); + // should not really be false because trimming of space is now implied + // expect(() => base64ToText(' ')).to.throw('Incorrect base64 string'); expect(() => base64ToText('é')).to.throw('Incorrect base64 string'); // missing final '=' expect(() => base64ToText('bG9yZW0gaXBzdW0')).to.throw('Incorrect base64 string'); @@ -56,17 +57,17 @@ describe('base64 utils', () => { it('should return false for incorrect base64 string', () => { expect(isValidBase64('a')).to.eql(false); - expect(isValidBase64(' ')).to.eql(false); expect(isValidBase64('é')).to.eql(false); expect(isValidBase64('data:text/plain;notbase64,YQ==')).to.eql(false); // missing final '=' expect(isValidBase64('bG9yZW0gaXBzdW0')).to.eql(false); }); - it('should return false for untrimmed correct base64 string', () => { - expect(isValidBase64('bG9yZW0gaXBzdW0= ')).to.eql(false); - expect(isValidBase64(' LTE=')).to.eql(false); - expect(isValidBase64(' YQ== ')).to.eql(false); + it('should return true for untrimmed correct base64 string', () => { + expect(isValidBase64('bG9yZW0gaXBzdW0= ')).to.eql(true); + expect(isValidBase64(' LTE=')).to.eql(true); + expect(isValidBase64(' YQ== ')).to.eql(true); + expect(isValidBase64(' ')).to.eql(true); }); }); diff --git a/src/utils/base64.ts b/src/utils/base64.ts index 16912ee333..44e59f41f5 100644 --- a/src/utils/base64.ts +++ b/src/utils/base64.ts @@ -1,7 +1,9 @@ +import { Base64 } from 'js-base64'; + export { textToBase64, base64ToText, isValidBase64, removePotentialDataAndMimePrefix }; function textToBase64(str: string, { makeUrlSafe = false }: { makeUrlSafe?: boolean } = {}) { - const encoded = window.btoa(str); + const encoded = Base64.encode(str); return makeUrlSafe ? makeUriSafe(encoded) : encoded; } @@ -16,7 +18,7 @@ function base64ToText(str: string, { makeUrlSafe = false }: { makeUrlSafe?: bool } try { - return window.atob(cleanStr); + return Base64.decode(cleanStr); } catch (_) { throw new Error('Incorrect base64 string'); @@ -34,10 +36,11 @@ function isValidBase64(str: string, { makeUrlSafe = false }: { makeUrlSafe?: boo } try { + const reEncodedBase64 = Base64.fromUint8Array(Base64.toUint8Array(cleanStr)); if (makeUrlSafe) { - return removePotentialPadding(window.btoa(window.atob(cleanStr))) === cleanStr; + return removePotentialPadding(reEncodedBase64) === cleanStr; } - return window.btoa(window.atob(cleanStr)) === cleanStr; + return reEncodedBase64 === cleanStr.replace(/\s/g, ''); } catch (err) { return false; From 3e27051f8fcf3b2406f103646420bcf13a6048ca Mon Sep 17 00:00:00 2001 From: sharevb Date: Sun, 25 Feb 2024 11:05:41 +0100 Subject: [PATCH 2/4] 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 --- pnpm-lock.yaml | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a6f7c32f3c..3a69dc327a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -86,6 +86,9 @@ dependencies: ibantools: specifier: ^4.3.3 version: 4.3.3 + js-base64: + specifier: ^3.7.6 + version: 3.7.7 json5: specifier: ^2.2.3 version: 2.2.3 @@ -3341,7 +3344,7 @@ packages: dependencies: '@unhead/dom': 0.5.1 '@unhead/schema': 0.5.1 - '@vueuse/shared': 10.7.2(vue@3.3.4) + '@vueuse/shared': 10.8.0(vue@3.3.4) unhead: 0.5.1 vue: 3.3.4 transitivePeerDependencies: @@ -3983,10 +3986,10 @@ packages: - vue dev: false - /@vueuse/shared@10.7.2(vue@3.3.4): - resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==} + /@vueuse/shared@10.8.0(vue@3.3.4): + resolution: {integrity: sha512-dUdy6zwHhULGxmr9YUg8e+EnB39gcM4Fe2oKBSrh3cOsV30JcMPtsyuspgFCUo5xxFNaeMf/W2yyKfST7Bg8oQ==} dependencies: - vue-demi: 0.14.6(vue@3.3.4) + vue-demi: 0.14.7(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -6456,6 +6459,10 @@ packages: hasBin: true dev: true + /js-base64@3.7.7: + resolution: {integrity: sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==} + dev: false + /js-beautify@1.14.6: resolution: {integrity: sha512-GfofQY5zDp+cuHc+gsEXKPpNw2KbPddreEo35O6jT6i0RVK6LhsoYBhq5TvK4/n74wnA0QbK8gGd+jUZwTMKJw==} engines: {node: '>=10'} @@ -9135,8 +9142,8 @@ packages: vue: 3.3.4 dev: false - /vue-demi@0.14.6(vue@3.3.4): - resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==} + /vue-demi@0.14.7(vue@3.3.4): + resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==} engines: {node: '>=12'} hasBin: true requiresBuild: true From 435d81281b1a4a2ed12e67c78b91bbe84b25bc0b Mon Sep 17 00:00:00 2001 From: sharevb Date: Sun, 25 Feb 2024 11:14:43 +0100 Subject: [PATCH 3/4] 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 --- src/composable/downloadBase64.ts | 65 ++++++++++++++----- .../base64-file-converter.vue | 39 ++++++++++- 2 files changed, 84 insertions(+), 20 deletions(-) diff --git a/src/composable/downloadBase64.ts b/src/composable/downloadBase64.ts index 37b0428d26..367c6a3e34 100644 --- a/src/composable/downloadBase64.ts +++ b/src/composable/downloadBase64.ts @@ -1,8 +1,12 @@ -import { extension as getExtensionFromMime } from 'mime-types'; +import { extension as getExtensionFromMimeType, extension as getMimeTypeFromExtension } from 'mime-types'; import type { Ref } from 'vue'; import _ from 'lodash'; -export { getMimeTypeFromBase64, useDownloadFileFromBase64 }; +export { + getMimeTypeFromBase64, + getMimeTypeFromExtension, getExtensionFromMimeType, + useDownloadFileFromBase64, useDownloadFileFromBase64Refs, +}; const commonMimeTypesSignatures = { 'JVBERi0': 'application/pdf', @@ -36,30 +40,55 @@ function getFileExtensionFromMimeType({ defaultExtension?: string }) { if (mimeType) { - return getExtensionFromMime(mimeType) ?? defaultExtension; + return getExtensionFromMimeType(mimeType) ?? defaultExtension; } return defaultExtension; } -function useDownloadFileFromBase64({ source, filename }: { source: Ref; filename?: string }) { - return { - download() { - if (source.value === '') { - throw new Error('Base64 string is empty'); - } +function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }: +{ sourceValue: string; filename?: string; extension?: string; fileMimeType?: string }) { + if (sourceValue === '') { + throw new Error('Base64 string is empty'); + } + + const defaultExtension = extension ?? 'txt'; + const { mimeType } = getMimeTypeFromBase64({ base64String: sourceValue }); + let base64String = sourceValue; + if (!mimeType) { + const targetMimeType = fileMimeType ?? getMimeTypeFromExtension(defaultExtension); + base64String = `data:${targetMimeType};base64,${sourceValue}`; + } + + const cleanExtension = extension ?? getFileExtensionFromMimeType( + { mimeType, defaultExtension }); + let cleanFileName = filename ?? `file.${cleanExtension}`; + if (extension && !cleanFileName.endsWith(`.${extension}`)) { + cleanFileName = `${cleanFileName}.${cleanExtension}`; + } - const { mimeType } = getMimeTypeFromBase64({ base64String: source.value }); - const base64String = mimeType - ? source.value - : `data:text/plain;base64,${source.value}`; + const a = document.createElement('a'); + a.href = base64String; + a.download = cleanFileName; + a.click(); +} - const cleanFileName = filename ?? `file.${getFileExtensionFromMimeType({ mimeType })}`; +function useDownloadFileFromBase64( + { source, filename, extension, fileMimeType }: + { source: Ref; filename?: string; extension?: string; fileMimeType?: string }) { + return { + download() { + downloadFromBase64({ sourceValue: source.value, filename, extension, fileMimeType }); + }, + }; +} - const a = document.createElement('a'); - a.href = base64String; - a.download = cleanFileName; - a.click(); +function useDownloadFileFromBase64Refs( + { source, filename, extension }: + { source: Ref; filename?: Ref; extension?: Ref }) { + return { + download() { + downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value }); }, }; } diff --git a/src/tools/base64-file-converter/base64-file-converter.vue b/src/tools/base64-file-converter/base64-file-converter.vue index 377625bd22..261d419a4b 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, 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,16 @@ const base64InputValidation = useValidation({ ], }); +watch( + base64Input, + (newValue, _) => { + const { mimeType } = getMimeTypeFromBase64({ base64String: newValue }); + if (mimeType) { + fileExtension.value = getExtensionFromMimeType(mimeType) || fileExtension.value; + } + }, +); + function downloadFile() { if (!base64InputValidation.isValid) { return; @@ -44,6 +61,24 @@ async function onUpload(file: File) {