feat(new tool): File Hasher

Fix #528

components.d.ts

@@ -78,6 +78,7 @@ declare module '@vue/runtime-core' {
     Encryption: typeof import('./src/tools/encryption/encryption.vue')['default']
     EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default']
     FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']
+    FileHasher: typeof import('./src/tools/file-hasher/file-hasher.vue')['default']
     FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']
     GitMemo: typeof import('./src/tools/git-memo/git-memo.vue')['default']
     'GitMemo.content': typeof import('./src/tools/git-memo/git-memo.content.md')['default']
@@ -127,23 +128,18 @@ declare module '@vue/runtime-core' {
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
-    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NFormItem: typeof import('naive-ui')['NFormItem']
-    NGi: typeof import('naive-ui')['NGi']
-    NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
-    NInputNumber: typeof import('naive-ui')['NInputNumber']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
-    NLabel: typeof import('naive-ui')['NLabel']
+    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
-    NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSpin: typeof import('naive-ui')['NSpin']
     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']

package.json

@@ -61,10 +61,11 @@
     "figlet": "^1.7.0",
     "figue": "^1.2.0",
     "fuse.js": "^6.6.2",
+    "hash-wasm": "^4.11.0",
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",
-    "js-base64": "^3.7.6",
+    "js-base64": "^3.7.7",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",

pnpm-lock.yaml

@@ -83,6 +83,9 @@ dependencies:
   fuse.js:
     specifier: ^6.6.2
     version: 6.6.2
+  hash-wasm:
+    specifier: ^4.11.0
+    version: 4.11.0
   highlight.js:
     specifier: ^11.7.0
     version: 11.7.0
@@ -93,7 +96,7 @@ dependencies:
     specifier: ^4.3.3
     version: 4.3.3
   js-base64:
-    specifier: ^3.7.6
+    specifier: ^3.7.7
     version: 3.7.7
   json5:
     specifier: ^2.2.3
@@ -3354,7 +3357,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.8.0(vue@3.3.4)
+      '@vueuse/shared': 10.10.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -3987,19 +3990,19 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.3.0(vue@3.3.4):
+  /@vueuse/shared@10.10.0(vue@3.3.4):
-    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
+    resolution: {integrity: sha512-2aW33Ac0Uk0U+9yo3Ypg9s5KcR42cuehRWl7vnUHadQyFvCktseyxxEPBi1Eiq4D2yBGACOnqLZpx1eMc7g5Og==}
     dependencies:
-      vue-demi: 0.14.5(vue@3.3.4)
+      vue-demi: 0.14.7(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/shared@10.8.0(vue@3.3.4):
+  /@vueuse/shared@10.3.0(vue@3.3.4):
-    resolution: {integrity: sha512-dUdy6zwHhULGxmr9YUg8e+EnB39gcM4Fe2oKBSrh3cOsV30JcMPtsyuspgFCUo5xxFNaeMf/W2yyKfST7Bg8oQ==}
+    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
     dependencies:
-      vue-demi: 0.14.7(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -5972,6 +5975,10 @@ packages:
       function-bind: 1.1.2
     dev: true
 
+  /hash-wasm@4.11.0:
+    resolution: {integrity: sha512-HVusNXlVqHe0fzIzdQOGolnFN6mX/fqcrSAOcTBXdvzrXVHwTz11vXeKRmkR5gTuwVpvHZEIyKoePDvuAR+XwQ==}
+    dev: false
+
   /hasown@2.0.0:
     resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==}
     engines: {node: '>= 0.4'}
@@ -9449,6 +9456,7 @@ packages:
 
   /workbox-google-analytics@7.0.0:
     resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==}
+    deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
     dependencies:
       workbox-background-sync: 7.0.0
       workbox-core: 7.0.0

src/composable/queryParams.ts

@@ -1,7 +1,8 @@
 import { useRouteQuery } from '@vueuse/router';
 import { computed } from 'vue';
+import { useStorage } from '@vueuse/core';
 
-export { useQueryParam };
+export { useQueryParam, useQueryParamOrStorage };
 
 const transformers = {
   number: {
@@ -33,3 +34,31 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
     },
   });
 }
+
+function useQueryParamOrStorage<T>({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue?: T }) {
+  const type = typeof defaultValue;
+  const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
+
+  const storageRef = useStorage(storageName, defaultValue);
+  const storageDefaultValue = storageRef.value ?? defaultValue;
+
+  const proxy = useRouteQuery(name, transformer.toQuery(storageDefaultValue as never));
+
+  const ref = computed<T>({
+    get() {
+      return transformer.fromQuery(proxy.value) as unknown as T;
+    },
+    set(value) {
+      proxy.value = transformer.toQuery(value as never);
+    },
+  });
+
+  watch(
+    ref,
+    (newValue) => {
+      storageRef.value = newValue;
+    },
+  );
+
+  return ref;
+}

src/tools/file-hasher/file-hasher.vue

@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import {
+  createAdler32, // (): Promise<IHasher>
+  createBLAKE2b, // (bits?: number, key?: IDataType): Promise<IHasher> // default is 512 bits
+  createBLAKE2s, // (bits?: number, key?: IDataType): Promise<IHasher> // default is 256 bits
+  createBLAKE3, // (bits?: number, key?: IDataType): Promise<IHasher> // default is 256 bits
+  createCRC32, // (): Promise<IHasher>
+  createCRC32C, // (): Promise<IHasher>
+  createKeccak, // (bits?: 224 | 256 | 384 | 512): Promise<IHasher> // default is 512 bits
+  createMD4, // (): Promise<IHasher>
+  createMD5, // (): Promise<IHasher>
+  createRIPEMD160, // (): Promise<IHasher>
+  createSHA1, // (): Promise<IHasher>
+  createSHA224, // (): Promise<IHasher>
+  createSHA256, // (): Promise<IHasher>
+  createSHA3, // (bits?: 224 | 256 | 384 | 512): Promise<IHasher> // default is 512 bits
+  createSHA384, // (): Promise<IHasher>
+  createSHA512, // (): Promise<IHasher>
+  createSM3, // (): Promise<IHasher>
+  createWhirlpool, // (): Promise<IHasher>
+// createXXHash32, //(seed: number): Promise<IHasher>
+// createXXHash64, //(seedLow: number, seedHigh: number): Promise<IHasher>
+// createXXHash3, //(seedLow: number, seedHigh: number): Promise<IHasher>
+// createXXHash128, //(seedLow: number, seedHigh: number): Promise<IHasher>
+} from 'hash-wasm';
+import type { lib } from 'crypto-js';
+import { enc } from 'crypto-js';
+
+import type { IHasher } from 'hash-wasm/dist/lib/WASMInterface';
+import InputCopyable from '../../components/InputCopyable.vue';
+import { convertHexToBin } from '../hash-text/hash-text.service';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
+import { withDefaultOnError } from '@/utils/defaults';
+
+const status = ref<'idle' | 'done' | 'error' | 'processing'>('idle');
+const file = ref<File | null>(null);
+
+async function getHashersAsync() {
+  return {
+    adler32: await createAdler32(), // (): Promise<IHasher>
+    BLAKE2b: await createBLAKE2b(), // (bits?: number, key?: IDataType): Promise<IHasher> // default is 512 bits
+    BLAKE2s: await createBLAKE2s(), // (bits?: number, key?: IDataType): Promise<IHasher> // default is 256 bits
+    BLAKE3: await createBLAKE3(), // (bits?: number, key?: IDataType): Promise<IHasher> // default is 256 bits
+    CRC32: await createCRC32(), // (): Promise<IHasher>
+    CRC32C: await createCRC32C(), // (): Promise<IHasher>
+    Keccak_224: await createKeccak(224), // (bits?: 224 | 256 | 384 | 512): Promise<IHasher> // default is 512 bits
+    Keccak_256: await createKeccak(256), // (bits?: 224 | 256 | 384 | 512): Promise<IHasher> // default is 512 bits
+    Keccak_384: await createKeccak(384), // (bits?: 224 | 256 | 384 | 512): Promise<IHasher> // default is 512 bits
+    Keccak_512: await createKeccak(512), // (bits?: 224 | 256 | 384 | 512): Promise<IHasher> // default is 512 bits
+    MD4: await createMD4(), // (): Promise<IHasher>
+    MD5: await createMD5(), // (): Promise<IHasher>
+    RIPEMD160: await createRIPEMD160(), // (): Promise<IHasher>
+    SHA1: await createSHA1(), // (): Promise<IHasher>
+    SHA224: await createSHA224(), // (): Promise<IHasher>
+    SHA256: await createSHA256(), // (): Promise<IHasher>
+    SHA3_224: await createSHA3(224), // (bits?: 224 | 256 | 384 | 512): Promise<IHasher> // default is 512 bits
+    SHA3_256: await createSHA3(256), // (bits?: 224 | 256 | 384 | 512): Promise<IHasher> // default is 512 bits
+    SHA3_384: await createSHA3(384), // (bits?: 224 | 256 | 384 | 512): Promise<IHasher> // default is 512 bits
+    SHA3_512: await createSHA3(512), // (bits?: 224 | 256 | 384 | 512): Promise<IHasher> // default is 512 bits
+    SHA384: await createSHA384(), // (): Promise<IHasher>
+    SHA512: await createSHA512(), // (): Promise<IHasher>
+    SM3: await createSM3(), // (): Promise<IHasher>
+    Whirlpool: await createWhirlpool(), // (): Promise<IHasher>
+  };
+}
+
+const defaultHashWasmValues = {
+  adler32: '',
+  BLAKE2b: '',
+  BLAKE2s: '',
+  BLAKE3: '',
+  CRC32: '',
+  CRC32C: '',
+  Keccak_224: '',
+  Keccak_256: '',
+  Keccak_384: '',
+  Keccak_512: '',
+  MD4: '',
+  MD5: '',
+  RIPEMD160: '',
+  SHA1: '',
+  SHA224: '',
+  SHA256: '',
+  SHA3_224: '',
+  SHA3_256: '',
+  SHA3_384: '',
+  SHA3_512: '',
+  SHA384: '',
+  SHA512: '',
+  SM3: '',
+  Whirlpool: '',
+};
+const chunkSize = 64 * 1024 * 1024;
+const fileReader = new FileReader();
+
+async function hashChunkAsync(chunk: Blob, hashers: IHasher[]) {
+  return new Promise<void>((resolve, _reject) => {
+    fileReader.onload = async (e) => {
+      const view = new Uint8Array((e.target?.result as ArrayBuffer)!);
+      for (const hasher of hashers) {
+        hasher.update(view);
+      }
+      resolve();
+    };
+
+    fileReader.readAsArrayBuffer(chunk);
+  });
+}
+
+type AlgoWasmNames = keyof typeof defaultHashWasmValues;
+const algoWasmNames = Object.keys(defaultHashWasmValues) as AlgoWasmNames[];
+
+async function hashFileAsync(file: File) {
+  const chunkNumber = Math.floor(file.size / chunkSize);
+
+  const hashers = await getHashersAsync();
+  for (let i = 0; i <= chunkNumber; i++) {
+    const chunk = file.slice(
+      chunkSize * i,
+      Math.min(chunkSize * (i + 1), file.size),
+    );
+    await hashChunkAsync(chunk, Object.values(hashers));
+  }
+
+  const ret = { ...defaultHashWasmValues };
+  for (const algo of algoWasmNames) {
+    ret[algo as AlgoWasmNames] = hashers[algo as AlgoWasmNames].digest();
+  }
+  return Promise.resolve(ret);
+}
+
+const hashes = ref(defaultHashWasmValues);
+async function onUpload(uploadedFile: File) {
+  file.value = uploadedFile;
+
+  status.value = 'processing';
+  try {
+    status.value = 'done';
+
+    hashes.value = await hashFileAsync(uploadedFile);
+  }
+  catch (e) {
+    status.value = 'error';
+  }
+}
+
+type Encoding = keyof typeof enc | 'Bin';
+
+const encoding = useQueryParamOrStorage<Encoding>({ defaultValue: 'Hex', storageName: 'hash-text:encoding', name: 'encoding' });
+
+function formatWithEncoding(words: lib.WordArray, encoding: Encoding) {
+  if (encoding === 'Bin') {
+    return convertHexToBin(words.toString(enc.Hex));
+  }
+
+  return words.toString(enc[encoding]);
+}
+
+const hashWasmValues = computed(() => withDefaultOnError(() => {
+  const encodingValue = encoding.value;
+  const hashesValue = hashes.value;
+
+  const ret = defaultHashWasmValues;
+  for (const algo of algoWasmNames) {
+    ret[algo] = formatWithEncoding(enc.Hex.parse(hashesValue[algo]), encodingValue);
+  }
+  return ret;
+}, defaultHashWasmValues));
+</script>
+
+<template>
+  <div>
+    <c-card>
+      <c-file-upload
+        title="Drag and drop a file here, or click to select a file"
+        @file-upload="onUpload"
+      />
+
+      <n-divider />
+
+      <c-select
+        v-model:value="encoding"
+        mb-4
+        label="Digest encoding"
+        :options="[
+          {
+            label: 'Binary (base 2)',
+            value: 'Bin',
+          },
+          {
+            label: 'Hexadecimal (base 16)',
+            value: 'Hex',
+          },
+          {
+            label: 'Base64 (base 64)',
+            value: 'Base64',
+          },
+          {
+            label: 'Base64url (base 64 with url safe chars)',
+            value: 'Base64url',
+          },
+        ]"
+      />
+    </c-card>
+
+    <div mt-3 flex justify-center>
+      <c-alert v-if="status === 'error'" type="error">
+        An error occured hashing file '{{ file?.name }}'.
+      </c-alert>
+      <n-spin
+        v-if="status === 'processing'"
+        size="small"
+      />
+    </div>
+
+    <c-card v-if="status === 'done'" :title="`Hashes of ${file?.name}`">
+      <div v-for="algo in algoWasmNames" :key="algo" style="margin: 5px 0">
+        <n-input-group>
+          <n-input-group-label style="flex: 0 0 120px">
+            {{ algo.toUpperCase() }}
+          </n-input-group-label>
+          <InputCopyable :value="hashWasmValues[algo]" readonly />
+        </n-input-group>
+      </div>
+    </c-card>
+  </div>
+</template>

src/tools/file-hasher/index.ts

@@ -0,0 +1,38 @@
+import { EyeOff } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'File Hasher',
+  path: '/file-hasher',
+  description: 'Compute Hash of files',
+  keywords: ['file', 'hash',
+    'digest',
+    'crypto',
+    'security',
+    'text',
+    'MD5',
+    'SHA1',
+    'SHA256',
+    'SHA224',
+    'SHA512',
+    'SHA384',
+    'SHA3',
+    'RIPEMD160',
+    'ADLER32',
+    'BLAKE2B',
+    'BLAKE2S',
+    'BLAKE3',
+    'CRC32',
+    'CRC32C',
+    'KECCAK',
+    'PBKDF2',
+    'SM3',
+    'WHIRLPOOL',
+    'XXHASH128',
+    'XXHASH3',
+    'XXHASH32',
+    'XXHASH64'],
+  component: () => import('./file-hasher.vue'),
+  icon: EyeOff,
+  createdAt: new Date('2024-05-11'),
+});

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as fileHasher } from './file-hasher';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -85,7 +86,20 @@ import { tool as yamlViewer } from './yaml-viewer';
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser, pdfSignatureChecker],
+    components: [
+      tokenGenerator,
+      hashText,
+      fileHasher,
+      bcrypt,
+      uuidGenerator,
+      ulidGenerator,
+      cypher,
+      bip39,
+      hmacGenerator,
+      rsaKeyPairGenerator,
+      passwordStrengthAnalyser,
+      pdfSignatureChecker,
+    ],
   },
   {
     name: 'Converter',