57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
<template>
|
|
<div class="upload-modal">
|
|
<div class="backdrop" @click="$emit('close')"></div>
|
|
<div class="dialog">
|
|
<h3>Upload Preview</h3>
|
|
<input type="file" accept="image/*" @change="onFile" />
|
|
<div v-if="preview" class="preview">
|
|
<img :src="preview" alt="preview" />
|
|
</div>
|
|
<div class="actions">
|
|
<button @click="$emit('close')">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
defineProps({ selection: { type: Object, default: null } });
|
|
const preview = ref<string | null>(null);
|
|
|
|
function onFile(e: Event) {
|
|
const input = e.target as HTMLInputElement | null;
|
|
const file = input && input.files ? input.files[0] : null;
|
|
if (!file) return;
|
|
const reader = new FileReader();
|
|
reader.onload = (ev) => {
|
|
preview.value = ev.target && (ev.target as FileReader).result as string | null;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.upload-modal .backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.4);
|
|
}
|
|
.upload-modal .dialog {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: white;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
width: 90%;
|
|
max-width: 560px;
|
|
}
|
|
.preview img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
</style>
|