feat(new tool) multi-link-downloader

Author: gitmotion

components.d.ts

@@ -129,6 +129,7 @@ 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']
+    MultiLinkDownloader: typeof import('./src/tools/multi-link-downloader/multi-link-downloader.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']

locales/en.yml

@@ -391,3 +391,7 @@ tools:
   text-to-binary:
     title: Text to ASCII binary
     description: Convert text to its ASCII binary representation and vice-versa.
+
+  multi-link-downloader:
+    title: Multi link downloader
+    description: Asynchronously downloads from multiple links into a zip file while a single link downloads directly.

package.json

@@ -70,6 +70,7 @@
     "ibantools": "^4.3.3",
     "js-base64": "^3.7.6",
     "json5": "^2.2.3",
+    "jszip": "^3.10.1",
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",
     "lodash": "^4.17.21",

pnpm-lock.yaml

@@ -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 multiLinkDownloader } from './multi-link-downloader';
 import { tool as emailNormalizer } from './email-normalizer';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
@@ -188,7 +189,11 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Data',
-    components: [phoneParserAndFormatter, ibanValidatorAndParser],
+    components: [
+      phoneParserAndFormatter,
+      ibanValidatorAndParser,
+      multiLinkDownloader,
+    ],
   },
 ];
 

src/tools/index.ts

@@ -0,0 +1,12 @@
+import { FileDownload } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Multi link downloader',
+  path: '/multi-link-downloader',
+  description: '',
+  keywords: ['multi', 'link', 'downloader'],
+  component: () => import('./multi-link-downloader.vue'),
+  icon: FileDownload,
+  createdAt: new Date('2024-10-18'),
+});

src/tools/multi-link-downloader/index.ts

@@ -0,0 +1,108 @@
+import JSZip from 'jszip';
+
+export async function downloadLinks(links: string): Promise<void> {
+  // Split links by newline and filter out empty ones
+  const linksArray: string[] = links.split('\n').filter(link => link.trim() !== '');
+
+  // Helper function to handle duplicate filenames
+  function getUniqueFileName(existingNames: Set<string>, originalName: string): string {
+    let fileName = originalName;
+    let fileExtension = '';
+
+    // Split filename and extension (if any)
+    const lastDotIndex = originalName.lastIndexOf('.');
+    if (lastDotIndex !== -1) {
+      fileName = originalName.substring(0, lastDotIndex);
+      fileExtension = originalName.substring(lastDotIndex);
+    }
+
+    let counter = 1;
+    let uniqueName = originalName;
+
+    // Append a counter to the filename if it already exists in the map
+    while (existingNames.has(uniqueName)) {
+      uniqueName = `${fileName} (${counter})${fileExtension}`;
+      counter++;
+    }
+
+    existingNames.add(uniqueName);
+    return uniqueName;
+  }
+
+  if (linksArray.length === 1) {
+    // Single link: download directly
+    const linkUrl: string = linksArray[0];
+    try {
+      const response: Response = await fetch(linkUrl);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch ${linkUrl}`);
+      }
+
+      // Get file as blob
+      const blob: Blob = await response.blob();
+
+      // Extract filename from URL
+      const fileName: string = linkUrl.split('/').pop() || 'downloaded_file';
+
+      // Trigger download
+      const a: HTMLAnchorElement = document.createElement('a');
+      const downloadUrl: string = window.URL.createObjectURL(blob);
+      a.href = downloadUrl;
+      a.download = fileName;
+      document.body.appendChild(a);
+      a.click();
+
+      // Clean up
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(downloadUrl);
+    }
+    catch (error) {
+      console.error('Error downloading the file:', error);
+    }
+  }
+  else if (linksArray.length > 1) {
+    // Multiple links: create a zip file
+    const zip = new JSZip();
+    const fileNamesSet = new Set<string>(); // To track file names for duplicates
+
+    await Promise.all(
+      linksArray.map(async (linkUrl: string) => {
+        try {
+          const response: Response = await fetch(linkUrl);
+          if (!response.ok) {
+            throw new Error(`Failed to fetch ${linkUrl}`);
+          }
+          const blob: Blob = await response.blob();
+
+          // Extract filename from URL
+          let fileName: string = linkUrl.split('/').pop() || 'file';
+
+          // Get unique filename if duplicate exists
+          fileName = getUniqueFileName(fileNamesSet, fileName);
+
+          // Add file to the zip
+          zip.file(fileName, blob);
+        }
+        catch (error) {
+          console.error(`Error downloading file from ${linkUrl}:`, error);
+        }
+      }),
+    );
+
+    // Generate the zip file and trigger download
+    zip.generateAsync({ type: 'blob' }).then((zipBlob: Blob) => {
+      const downloadUrl: string = window.URL.createObjectURL(zipBlob);
+
+      // Trigger download of the zip file
+      const a: HTMLAnchorElement = document.createElement('a');
+      a.href = downloadUrl;
+      a.download = 'downloaded_files.zip';
+      document.body.appendChild(a);
+      a.click();
+
+      // Clean up
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(downloadUrl);
+    });
+  }
+}

src/tools/multi-link-downloader/multi-link-downloader.service.ts

@@ -0,0 +1,52 @@
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { downloadLinks } from './multi-link-downloader.service';
+
+export default defineComponent({
+  setup() {
+    const links = ref<string>('');
+    const downloadMultiLinks = () => {
+      if (links.value) {
+        downloadLinks(links.value);
+      }
+    };
+
+    const clearInput = () => {
+      links.value = '';
+    };
+
+    return {
+      links,
+      downloadMultiLinks,
+      clearInput,
+    };
+  },
+});
+</script>
+
+<template>
+  <c-card>
+    <div class="mb-4 flex justify-between">
+      <c-button
+        class="mr-2"
+        :disabled="!links"
+        @click="downloadMultiLinks"
+      >
+        Start Download
+      </c-button>
+      <c-button
+        class="ml-2"
+        @click="clearInput"
+      >
+        Clear
+      </c-button>
+    </div>
+
+    <c-input-text
+      v-model:value="links"
+      placeholder="Add links separated by new lines..."
+      multiline
+      :rows="20"
+    />
+  </c-card>
+</template>