From 5580f00dc3a89f80e373e024166d2adab5477290 Mon Sep 17 00:00:00 2001
From: liudonghua <liudonghua123@gmail.com>
Date: Thu, 6 Jun 2024 06:32:27 +0000
Subject: [PATCH 1/2] feat: add paste file feature for base64 file converter

---
 .../base64-file-converter.vue                    | 16 ++++++++++++++--
 tsconfig.app.json                                |  2 +-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/tools/base64-file-converter/base64-file-converter.vue b/src/tools/base64-file-converter/base64-file-converter.vue
index a489f9a1..c5a37ccb 100644
--- a/src/tools/base64-file-converter/base64-file-converter.vue
+++ b/src/tools/base64-file-converter/base64-file-converter.vue
@@ -76,6 +76,18 @@ async function onUpload(file: File) {
     fileInput.value = file;
   }
 }
+
+function onPaste(event: ClipboardEvent) {
+  if (event.clipboardData) {
+    const { items } = event.clipboardData;
+    for (const item of items) {
+      const file = item.getAsFile();
+      if (item.kind === 'file' && file) {
+        fileInput.value = file;
+      }
+    }
+  }
+}
 </script>
 
 <template>
@@ -121,8 +133,8 @@ async function onUpload(file: File) {
     </div>
   </c-card>
 
-  <c-card title="File to base64">
-    <c-file-upload title="Drag and drop a file here, or click to select a file" @file-upload="onUpload" />
+  <c-card title="File to base64" @paste="onPaste">
+    <c-file-upload title="Drag and drop a file here, Focus this card and paste a file here, or click to select a file" @file-upload="onUpload" />
     <c-input-text :value="fileBase64" multiline readonly placeholder="File in base64 will be here" rows="5" my-2 />
 
     <div flex justify-center>
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 181ee9ae..d8f8b7cb 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -3,7 +3,7 @@
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "**/*.d.ts", "node_modules/vite-plugin-pwa/client.d.ts"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
-    "lib": ["ES2022"],
+    "lib": ["ES2022", "DOM.Iterable"],
     "target": "es2022",
     "module": "es2022",
     "moduleResolution": "Node",

From 556db15cbee8d0d2fefa0f129215dbe6dcbb885f Mon Sep 17 00:00:00 2001
From: liudonghua <liudonghua123@gmail.com>
Date: Thu, 13 Jun 2024 01:40:32 +0000
Subject: [PATCH 2/2] improve: make paste behavior inteligence

---
 .../base64-file-converter.vue                      | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/tools/base64-file-converter/base64-file-converter.vue b/src/tools/base64-file-converter/base64-file-converter.vue
index c5a37ccb..1d626dde 100644
--- a/src/tools/base64-file-converter/base64-file-converter.vue
+++ b/src/tools/base64-file-converter/base64-file-converter.vue
@@ -81,9 +81,15 @@ function onPaste(event: ClipboardEvent) {
   if (event.clipboardData) {
     const { items } = event.clipboardData;
     for (const item of items) {
-      const file = item.getAsFile();
-      if (item.kind === 'file' && file) {
-        fileInput.value = file;
+      if (item.kind === 'file') {
+        fileInput.value = item.getAsFile()!;
+      }
+      else if (item.kind === 'string' && item.type.match('^text/plain')) {
+        item.getAsString(s => base64Input.value = s);
+      }
+      else {
+        // eslint-disable-next-line no-console
+        console.info('Unsupport clipboardData', item);
       }
     }
   }
@@ -91,7 +97,7 @@ function onPaste(event: ClipboardEvent) {
 </script>
 
 <template>
-  <c-card title="Base64 to file">
+  <c-card title="Base64 to file" @paste="onPaste">
     <n-grid cols="3" x-gap="12">
       <n-gi span="2">
         <c-input-text