CorentinTh/it-tools
1
1
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2024-09-20 15:06:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): replaced legacy n-upload with c-file-upload (#747)

Browse source
This commit is contained in:
Corentin THOMASSET 2023-11-13 00:56:51 +01:00 committed by GitHub
parent 16ffe6b5c9
commit 7fe47b3be4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/tools/base64-file-converter/base64-file-converter.vue
View file

@ -1,7 +1,5 @@
<script setup lang="ts">
import { Upload } from '@vicons/tabler';
import { useBase64 } from '@vueuse/core';
import type { UploadFileInfo } from 'naive-ui';
import type { Ref } from 'vue';
import { useCopy } from '@/composable/copy';
import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
@ -33,14 +31,12 @@ function downloadFile() {
}
}
const fileList = ref();
const fileInput = ref() as Ref<File>;
const { base64: fileBase64 } = useBase64(fileInput);
const { copy: copyFileBase64 } = useCopy({ source: fileBase64, text: 'Base64 string copied to the clipboard' });
async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
async function onUpload(file: File) {
if (file) {
fileList.value = [];
fileInput.value = file;
}
}
@ -65,18 +61,8 @@ async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
</c-card>
<c-card title="File to base64">
<n-upload v-model:file-list="fileList" :show-file-list="true" :on-before-upload="onUpload" list-type="image">
<n-upload-dragger>
<div mb-2>
<n-icon size="35" :depth="3" :component="Upload" />
</div>
<div op-60>
Click or drag a file to this area to upload
</div>
</n-upload-dragger>
</n-upload>
<c-input-text :value="fileBase64" multiline readonly placeholder="File in base64 will be here" rows="5" mb-2 />
<c-file-upload title="Drag and drop 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>
<c-button @click="copyFileBase64()">