7 changed files with 164 additions and 60 deletions
@ -0,0 +1,124 @@ |
|||||
|
<template> |
||||
|
<div v-if="visible" class="dialog-overlay z-[60]"> |
||||
|
<div class="dialog relative"> |
||||
|
<div class="text-lg text-center font-light relative z-50"> |
||||
|
<div |
||||
|
id="ViewHeading" |
||||
|
class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-0.5 bg-black/50 text-white leading-none" |
||||
|
> |
||||
|
Camera or Other? |
||||
|
</div> |
||||
|
<div |
||||
|
class="text-lg text-center px-2 py-0.5 leading-none absolute right-0 top-0 text-white" |
||||
|
@click="close()" |
||||
|
> |
||||
|
<fa icon="xmark" class="w-[1em]"></fa> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<div class="text-center mt-8"> |
||||
|
<div class> |
||||
|
<fa |
||||
|
icon="camera" |
||||
|
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md" |
||||
|
@click="openPhotoDialog()" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="mt-4"> |
||||
|
<input type="file" @change="uploadImageFile" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<PhotoDialog ref="photoDialog" /> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { ref } from "vue"; |
||||
|
import { Component, Vue } from "vue-facing-decorator"; |
||||
|
|
||||
|
import PhotoDialog from "@/components/PhotoDialog.vue"; |
||||
|
|
||||
|
const inputImageFileNameRef = ref<Blob>(); |
||||
|
|
||||
|
@Component({ |
||||
|
components: { PhotoDialog }, |
||||
|
}) |
||||
|
export default class ImageMethodDialog extends Vue { |
||||
|
claimType: string; |
||||
|
crop: boolean = false; |
||||
|
imageCallback: (imageUrl?: string) => void = () => {}; |
||||
|
visible = false; |
||||
|
|
||||
|
open(setImageFn: (arg: string) => void, claimType: string, crop?: boolean) { |
||||
|
this.claimType = claimType; |
||||
|
this.crop = !!crop; |
||||
|
this.imageCallback = setImageFn; |
||||
|
|
||||
|
this.visible = true; |
||||
|
} |
||||
|
|
||||
|
openPhotoDialog(blob?: Blob, fileName?: string) { |
||||
|
this.visible = false; |
||||
|
|
||||
|
(this.$refs.photoDialog as PhotoDialog).open( |
||||
|
this.imageCallback, |
||||
|
this.claimType, |
||||
|
this.crop, |
||||
|
blob, |
||||
|
fileName, |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
async uploadImageFile(event: Event) { |
||||
|
this.visible = false; |
||||
|
|
||||
|
inputImageFileNameRef.value = event.target.files[0]; |
||||
|
// https://developer.mozilla.org/en-US/docs/Web/API/File |
||||
|
// ... plus it has a `type` property from my testing |
||||
|
const file = inputImageFileNameRef.value; |
||||
|
if (file != null) { |
||||
|
const reader = new FileReader(); |
||||
|
reader.onload = async (e) => { |
||||
|
const data = e.target?.result as ArrayBuffer; |
||||
|
if (data) { |
||||
|
const blob = new Blob([new Uint8Array(data)], { |
||||
|
type: file.type, |
||||
|
}); |
||||
|
this.openPhotoDialog(blob, file.name as string); |
||||
|
} |
||||
|
}; |
||||
|
reader.readAsArrayBuffer(file as Blob); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
close() { |
||||
|
this.visible = false; |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.dialog-overlay { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
padding: 1.5rem; |
||||
|
} |
||||
|
|
||||
|
.dialog { |
||||
|
background-color: white; |
||||
|
padding: 1rem; |
||||
|
border-radius: 0.5rem; |
||||
|
width: 100%; |
||||
|
max-width: 700px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue