mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-25 01:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: FileUploader + Base64

Browse source 
Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
Corentin Thomasset 2020-05-31 22:31:14 +02:00
parent da092a9bd3
commit 1876db0ddc
7 changed files with 251 additions and 205 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/routes/tools/FileToBase64.vue
View file

@ -4,21 +4,21 @@
<v-card>
<v-card-title>File to Base64</v-card-title>
<v-card-text>
<FileUploader v-model="imageFile"/>
<FileUploader v-model="file"/>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" lg="4" md="6" sm="12" v-if="base64">
<v-col cols="12" lg="4" md="6" sm="12" v-if="base64 || loading">
<v-card>
<v-card-title>Result</v-card-title>
<v-card-text>
<v-img :src="base64" class="mb-4" v-if="isImage"/>
<v-textarea
label="File in base 64"
outlined
readonly
v-model="base64"
hide-details
:loading="loading"
/>
<div class="text-center mt-4">
<v-btn @click="copyBase64()" depressed>Copy base64</v-btn>
@ -32,34 +32,36 @@
<script>
import FileUploader from '../../components/FileUploader'
import {copyToClipboard, fileIsImage} from "../../utils/helpers";
import {copyToClipboard} from "../../utils/helpers";
export default {
name: "FileToBase64",
components: {FileUploader},
data() {
return {
imageFile: undefined,
file: undefined,
loading: false,
base64: '',
isImage: false,
copyBase64(){
copyBase64() {
copyToClipboard(this.base64)
this.$toast.success('Copied to clipboard.')
}
}
},
methods:{
handleBase64(base64){
this.base64 = base64;
this.loading = false;
}
},
watch: {
imageFile() {
this.isImage = fileIsImage(this.imageFile);
file() {
this.loading = true;
this.base64 = '';
const reader = new FileReader();
reader.readAsDataURL(this.imageFile);
reader.onload = () => {
this.base64 = reader.result;
}
reader.onerror = () => {
this.base64 = '[An error as occurred]';
}
reader.onload = () => this.handleBase64(reader.result);
reader.onerror = () => this.handleBase64('[An error as occurred]');
reader.readAsDataURL(this.file);
}
}
}