feat: add paste file feature for base64 file converter

This commit is contained in:
liudonghua 2024-06-06 06:32:27 +00:00
parent b430baef40
commit 5580f00dc3
2 changed files with 15 additions and 3 deletions

View file

@ -76,6 +76,18 @@ async function onUpload(file: File) {
fileInput.value = 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> </script>
<template> <template>
@ -121,8 +133,8 @@ async function onUpload(file: File) {
</div> </div>
</c-card> </c-card>
<c-card title="File to base64"> <c-card title="File to base64" @paste="onPaste">
<c-file-upload title="Drag and drop a file here, or click to select a file" @file-upload="onUpload" /> <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 /> <c-input-text :value="fileBase64" multiline readonly placeholder="File in base64 will be here" rows="5" my-2 />
<div flex justify-center> <div flex justify-center>

View file

@ -3,7 +3,7 @@
"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "**/*.d.ts", "node_modules/vite-plugin-pwa/client.d.ts"], "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "**/*.d.ts", "node_modules/vite-plugin-pwa/client.d.ts"],
"exclude": ["src/**/__tests__/*"], "exclude": ["src/**/__tests__/*"],
"compilerOptions": { "compilerOptions": {
"lib": ["ES2022"], "lib": ["ES2022", "DOM.Iterable"],
"target": "es2022", "target": "es2022",
"module": "es2022", "module": "es2022",
"moduleResolution": "Node", "moduleResolution": "Node",