|
|
@ -28,6 +28,22 @@ |
|
|
|
<div class="mt-4"> |
|
|
|
<input type="file" @change="uploadImageFile" /> |
|
|
|
</div> |
|
|
|
<div class="mt-4"> |
|
|
|
<span class="mt-2"> |
|
|
|
... or paste a URL: |
|
|
|
<input type="text" v-model="imageUrl" class="border-2" /> |
|
|
|
</span> |
|
|
|
<span class="ml-2"> |
|
|
|
<fa |
|
|
|
v-if="imageUrl" |
|
|
|
icon="check" |
|
|
|
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 cursor-pointer" |
|
|
|
@click="acceptUrl" |
|
|
|
/> |
|
|
|
<!-- so that there's no shifting when it becomes visible --> |
|
|
|
<fa v-else icon="check" class="text-white bg-white px-2 py-2" /> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -36,10 +52,12 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
|
import axios from "axios"; |
|
|
|
import { ref } from "vue"; |
|
|
|
import { Component, Vue } from "vue-facing-decorator"; |
|
|
|
|
|
|
|
import PhotoDialog from "@/components/PhotoDialog.vue"; |
|
|
|
import { NotificationIface } from "@/constants/app"; |
|
|
|
|
|
|
|
const inputImageFileNameRef = ref<Blob>(); |
|
|
|
|
|
|
@ -47,9 +65,12 @@ const inputImageFileNameRef = ref<Blob>(); |
|
|
|
components: { PhotoDialog }, |
|
|
|
}) |
|
|
|
export default class ImageMethodDialog extends Vue { |
|
|
|
$notify!: (notification: NotificationIface, timeout?: number) => void; |
|
|
|
|
|
|
|
claimType: string; |
|
|
|
crop: boolean = false; |
|
|
|
imageCallback: (imageUrl?: string) => void = () => {}; |
|
|
|
imageUrl?: string; |
|
|
|
visible = false; |
|
|
|
|
|
|
|
open(setImageFn: (arg: string) => void, claimType: string, crop?: boolean) { |
|
|
@ -94,6 +115,38 @@ export default class ImageMethodDialog extends Vue { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
async acceptUrl() { |
|
|
|
this.visible = false; |
|
|
|
if (this.crop) { |
|
|
|
try { |
|
|
|
const urlBlobResponse: Blob = await axios.get(this.imageUrl as string, { |
|
|
|
responseType: "blob", // This ensures the data is returned as a Blob |
|
|
|
}); |
|
|
|
const fullUrl = new URL(this.imageUrl as string); |
|
|
|
const fileName = fullUrl.pathname.split("/").pop() as string; |
|
|
|
(this.$refs.photoDialog as PhotoDialog).open( |
|
|
|
this.imageCallback, |
|
|
|
this.claimType, |
|
|
|
this.crop, |
|
|
|
urlBlobResponse.data as Blob, |
|
|
|
fileName, |
|
|
|
); |
|
|
|
} catch (error) { |
|
|
|
this.$notify( |
|
|
|
{ |
|
|
|
group: "alert", |
|
|
|
type: "danger", |
|
|
|
title: "Error", |
|
|
|
text: "There was an error retrieving that image.", |
|
|
|
}, |
|
|
|
5000, |
|
|
|
); |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.imageCallback(this.imageUrl); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
close() { |
|
|
|
this.visible = false; |
|
|
|
} |
|
|
|