Merge 2b6b523be6 into b430baef40

Fix #1045

components.d.ts

@@ -64,6 +64,7 @@ declare module '@vue/runtime-core' {
     'CTextCopyable.demo': typeof import('./src/ui/c-text-copyable/c-text-copyable.demo.vue')['default']
     CTooltip: typeof import('./src/ui/c-tooltip/c-tooltip.vue')['default']
     'CTooltip.demo': typeof import('./src/ui/c-tooltip/c-tooltip.demo.vue')['default']
+    DataStorageUnitConverter: typeof import('./src/tools/data-storage-unit-converter/data-storage-unit-converter.vue')['default']
     DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']
     'DemoHome.page': typeof import('./src/ui/demo/demo-home.page.vue')['default']
     DemoWrapper: typeof import('./src/ui/demo/demo-wrapper.vue')['default']
@@ -89,17 +90,28 @@ declare module '@vue/runtime-core' {
     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
     IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
     'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
+    'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
+    IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
+    IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
+    IconMdiCamera: typeof import('~icons/mdi/camera')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IconMdiClose: typeof import('~icons/mdi/close')['default']
     IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
+    IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
+    IconMdiDownload: typeof import('~icons/mdi/download')['default']
     IconMdiEye: typeof import('~icons/mdi/eye')['default']
     IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
     IconMdiHeart: typeof import('~icons/mdi/heart')['default']
+    IconMdiPause: typeof import('~icons/mdi/pause')['default']
+    IconMdiPlay: typeof import('~icons/mdi/play')['default']
+    IconMdiRecord: typeof import('~icons/mdi/record')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
     IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
     IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
+    IconMdiVideo: typeof import('~icons/mdi/video')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
     Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
@@ -126,25 +138,41 @@ declare module '@vue/runtime-core' {
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDivider: typeof import('naive-ui')['NDivider']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
+    NH2: typeof import('naive-ui')['NH2']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NImage: typeof import('naive-ui')['NImage']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
+    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NLabel: typeof import('naive-ui')['NLabel']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NProgress: typeof import('naive-ui')['NProgress']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
+    NSlider: typeof import('naive-ui')['NSlider']
     NSpin: typeof import('naive-ui')['NSpin']
+    NStatistic: typeof import('naive-ui')['NStatistic']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTable: typeof import('naive-ui')['NTable']
+    NTag: typeof import('naive-ui')['NTag']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']

locales/en.yml

@@ -340,6 +340,10 @@ tools:
     title: String obfuscator
     description: Obfuscate a string (like a secret, an IBAN, or a token) to make it shareable and identifiable without revealing its content.
 
+  data-storage-unit-converter:
+    title: Data storage unit converter
+    description: Convert data storage units (bytes, kilobytes, megabytes, gigabytes, terabytes, petabytes)
+
   base-converter:
     title: Integer base converter
     description: Convert a number between different bases (decimal, hexadecimal, binary, octal, base64, ...)

locales/zh.yml

@@ -336,6 +336,10 @@ tools:
     title: 字符串混淆器
     description: 混淆字符串（如秘密、IBAN 或令牌），使其可共享和可识别，而不泄露其内容。
 
+  data-storage-unit-converter:
+    title: 数据存储单位转换器
+    description: 在不同数据存储单位（字节、千字节、兆字节、千兆字节、太字节、拍字节）之间转换数字
+
   base-converter:
     title: 整数基转换器
     description: 在不同的基数（十进制、十六进制、二进制、八进制、base64…）之间转换数字

package.json

@@ -64,6 +64,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",

pnpm-lock.yaml

@@ -92,6 +92,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
@@ -3351,7 +3354,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:
@@ -3993,10 +3996,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
@@ -6472,6 +6475,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'}
@@ -9151,8 +9158,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

src/components/FormatTransformer.vue

@@ -48,7 +48,7 @@ const output = computed(() => transformer.value(input.value));
     monospace
   />
 
-  <div>
+  <div overflow-auto>
     <div mb-5px>
       {{ outputLabel }}
     </div>

src/composable/downloadBase64.ts

@@ -1,8 +1,13 @@
-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,
+  previewImageFromBase64,
+};
 
 const commonMimeTypesSignatures = {
   'JVBERi0': 'application/pdf',
@@ -36,30 +41,78 @@ function getFileExtensionFromMimeType({
   defaultExtension?: string
 }) {
   if (mimeType) {
-    return getExtensionFromMime(mimeType) ?? defaultExtension;
+    return getExtensionFromMimeType(mimeType) ?? defaultExtension;
   }
 
   return defaultExtension;
 }
 
-function useDownloadFileFromBase64({ source, filename }: { source: Ref<string>; filename?: string }) {
+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 a = document.createElement('a');
+  a.href = base64String;
+  a.download = cleanFileName;
+  a.click();
+}
+
+function useDownloadFileFromBase64(
+  { source, filename, extension, fileMimeType }:
+  { source: Ref<string>; filename?: string; extension?: string; fileMimeType?: string }) {
   return {
     download() {
-      if (source.value === '') {
-        throw new Error('Base64 string is empty');
-      }
-
-      const { mimeType } = getMimeTypeFromBase64({ base64String: source.value });
-      const base64String = mimeType
-        ? source.value
-        : `data:text/plain;base64,${source.value}`;
-
-      const cleanFileName = filename ?? `file.${getFileExtensionFromMimeType({ mimeType })}`;
-
-      const a = document.createElement('a');
-      a.href = base64String;
-      a.download = cleanFileName;
-      a.click();
+      downloadFromBase64({ sourceValue: source.value, filename, extension, fileMimeType });
     },
   };
 }
+
+function useDownloadFileFromBase64Refs(
+  { source, filename, extension }:
+  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  return {
+    download() {
+      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+    },
+  };
+}
+
+function previewImageFromBase64(base64String: string): HTMLImageElement {
+  if (base64String === '') {
+    throw new Error('Base64 string is empty');
+  }
+
+  const img = document.createElement('img');
+  img.src = base64String;
+
+  const container = document.createElement('div');
+  container.appendChild(img);
+
+  const previewContainer = document.getElementById('previewContainer');
+  if (previewContainer) {
+    previewContainer.innerHTML = '';
+    previewContainer.appendChild(container);
+  }
+  else {
+    throw new Error('Preview container element not found');
+  }
+
+  return img;
+}

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>

src/tools/data-storage-unit-converter/data-storage-unit-converter.model.ts

@@ -0,0 +1,10 @@
+export function convertStorage({ value, fromUnit, toUnit }: { value: number; fromUnit: string; toUnit: string }): string {
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+  const factor = 1024;
+  const fromIndex = units.indexOf(fromUnit);
+  const toIndex = units.indexOf(toUnit);
+  const exponent = fromIndex - toIndex;
+
+  const result = value * factor ** exponent;
+  return result.toString();
+}

src/tools/data-storage-unit-converter/data-storage-unit-converter.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import InputCopyable from '../../components/InputCopyable.vue';
+import { convertStorage } from './data-storage-unit-converter.model';
+
+const inputProps = {
+  'labelPosition': 'left',
+  'labelWidth': '170px',
+  'labelAlign': 'right',
+  'readonly': true,
+  'mb-2': '',
+} as const;
+
+const input = ref('1024');
+const inputUnit = ref('KB');
+
+function errorlessConvert(...args: Parameters<typeof convertStorage>) {
+  try {
+    return convertStorage(...args);
+  }
+  catch (err) {
+    return '';
+  }
+}
+</script>
+
+<template>
+  <div>
+    <c-card>
+      <c-input-text v-model:value="input" :min="0" label="Input number" placeholder="Put your number here (ex: 1024)" label-position="left" label-width="110px" mb-2 label-align="right" />
+
+      <n-form-item label="Input unit" label-placement="left" label-width="110" :show-feedback="false">
+        <n-select
+          v-model:value="inputUnit"
+          :options="[
+            { label: 'Bytes', value: 'B' },
+            { label: 'Kilobytes', value: 'KB' },
+            { label: 'Megabytes', value: 'MB' },
+            { label: 'Gigabytes', value: 'GB' },
+            { label: 'Terabytes', value: 'TB' },
+            { label: 'Petabytes', value: 'PB' },
+          ]"
+          placeholder="Select unit"
+          w-full
+        />
+      </n-form-item>
+
+      <n-divider />
+
+      <InputCopyable
+        label="Bytes"
+        v-bind="inputProps"
+        :value="errorlessConvert({ value: Number(input), fromUnit: inputUnit, toUnit: 'B' })"
+        placeholder="Bytes will be here..."
+      />
+
+      <InputCopyable
+        label="KB"
+        v-bind="inputProps"
+        :value="errorlessConvert({ value: Number(input), fromUnit: inputUnit, toUnit: 'KB' })"
+        placeholder="Kilobytes will be here..."
+      />
+
+      <InputCopyable
+        label="MB"
+        v-bind="inputProps"
+        :value="errorlessConvert({ value: Number(input), fromUnit: inputUnit, toUnit: 'MB' })"
+        placeholder="Megabytes will be here..."
+      />
+
+      <InputCopyable
+        label="GB"
+        v-bind="inputProps"
+        :value="errorlessConvert({ value: Number(input), fromUnit: inputUnit, toUnit: 'GB' })"
+        placeholder="Gigabytes will be here..."
+      />
+
+      <InputCopyable
+        label="TB"
+        v-bind="inputProps"
+        :value="errorlessConvert({ value: Number(input), fromUnit: inputUnit, toUnit: 'TB' })"
+        placeholder="Terabytes will be here..."
+      />
+
+      <InputCopyable
+        label="PB"
+        v-bind="inputProps"
+        :value="errorlessConvert({ value: Number(input), fromUnit: inputUnit, toUnit: 'PB' })"
+        placeholder="Petabytes will be here..."
+      />
+    </c-card>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.n-input-group:not(:first-child) {
+  margin-top: 5px;
+}
+</style>

src/tools/data-storage-unit-converter/index.ts

@@ -0,0 +1,12 @@
+import { ArrowsLeftRight } from '@vicons/tabler';
+import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
+
+export const tool = defineTool({
+  name: translate('tools.data-storage-unit-converter.title'),
+  path: '/data-storage-unit-converter',
+  description: translate('tools.data-storage-unit-converter.description'),
+  keywords: ['data', 'storage', 'unit', 'conversion', 'bytes', 'KB', 'MB', 'GB', 'TB', 'PB'],
+  component: () => import('./data-storage-unit-converter.vue'),
+  icon: ArrowsLeftRight,
+});

src/tools/index.ts

@@ -57,6 +57,7 @@ import { tool as gitMemo } from './git-memo';
 import { tool as hashText } from './hash-text';
 import { tool as hmacGenerator } from './hmac-generator';
 import { tool as htmlEntities } from './html-entities';
+import { tool as storageUnitConverter } from './data-storage-unit-converter';
 import { tool as baseConverter } from './integer-base-converter';
 import { tool as jsonViewer } from './json-viewer';
 import { tool as jwtParser } from './jwt-parser';
@@ -92,6 +93,7 @@ export const toolsByCategory: ToolCategory[] = [
     components: [
       dateTimeConverter,
       baseConverter,
+      storageUnitConverter,
       romanNumeralConverter,
       base64StringConverter,
       base64FileConverter,

src/tools/jwt-parser/jwt-parser.vue

@@ -39,7 +39,7 @@ const validation = useValidation({
             {{ section.title }}
           </th>
           <tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value">
-            <td class="claims">
+            <td class="claims" style="vertical-align: top;">
               <span font-bold>
                 {{ claim }}
               </span>
@@ -47,7 +47,7 @@ const validation = useValidation({
                 ({{ claimDescription }})
               </span>
             </td>
-            <td>
+            <td style="word-wrap: break-word;word-break: break-all;">
               <span>{{ value }}</span>
               <span v-if="friendlyValue" ml-2 op-70>
                 ({{ friendlyValue }})

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);
     });
   });
 

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;