add a share_target for people to add a photo #115
Merged
trentlarson
merged 3 commits from share-photo into master 7 months ago
18 changed files with 553 additions and 132 deletions
@ -0,0 +1,13 @@ |
|||||
|
// for ephemeral uses, eg. passing a blob from the service worker to the main thread
|
||||
|
|
||||
|
export type Temp = { |
||||
|
id: string; |
||||
|
blob?: Blob; |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* Schema for the Temp table in the database. |
||||
|
*/ |
||||
|
export const TempSchema = { |
||||
|
temp: "id", |
||||
|
}; |
||||
@ -0,0 +1,188 @@ |
|||||
|
<template> |
||||
|
<QuickNav /> |
||||
|
<!-- CONTENT --> |
||||
|
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto"> |
||||
|
<!-- Heading --> |
||||
|
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8"> |
||||
|
Image |
||||
|
</h1> |
||||
|
<div v-if="imageBlob"> |
||||
|
<div v-if="uploading" class="text-center mb-4"> |
||||
|
<fa icon="spinner" class="fa-spin-pulse" /> |
||||
|
</div> |
||||
|
<div v-else> |
||||
|
<div class="text-center mb-4">Choose how to use this image</div> |
||||
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> |
||||
|
<button |
||||
|
@click="recordGift" |
||||
|
class="text-center text-md font-bold 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-3 rounded-md" |
||||
|
> |
||||
|
<fa icon="gift" class="fa-fw" /> |
||||
|
Record a Gift |
||||
|
</button> |
||||
|
<button |
||||
|
@click="recordProfile" |
||||
|
class="text-center text-md font-bold 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-3 rounded-md" |
||||
|
> |
||||
|
<fa icon="circle-user" class="fa-fw" /> |
||||
|
Save as Profile Image |
||||
|
</button> |
||||
|
<button |
||||
|
@click="cancel" |
||||
|
class="text-center text-md font-bold bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md" |
||||
|
> |
||||
|
<fa icon="ban" class="fa-fw" /> |
||||
|
Cancel |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex justify-center"> |
||||
|
<img |
||||
|
:src="URL.createObjectURL(imageBlob)" |
||||
|
alt="Shared Image" |
||||
|
class="rounded mt-4" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-else class="text-center mb-4"> |
||||
|
<p>No image found.</p> |
||||
|
</div> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Component, Vue } from "vue-facing-decorator"; |
||||
|
|
||||
|
import QuickNav from "@/components/QuickNav.vue"; |
||||
|
import { |
||||
|
DEFAULT_IMAGE_API_SERVER, |
||||
|
IMAGE_TYPE_PROFILE, |
||||
|
NotificationIface, |
||||
|
} from "@/constants/app"; |
||||
|
import { db } from "@/db/index"; |
||||
|
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings"; |
||||
|
import { getIdentity } from "@/libs/util"; |
||||
|
import { accessToken } from "@/libs/crypto"; |
||||
|
import axios from "axios"; |
||||
|
|
||||
|
@Component({ components: { QuickNav } }) |
||||
|
export default class SharedPhotoView extends Vue { |
||||
|
$notify!: (notification: NotificationIface, timeout?: number) => void; |
||||
|
|
||||
|
activeDid: string | undefined = undefined; |
||||
|
imageBlob: Blob | undefined = undefined; |
||||
|
imageFileName: string | undefined = undefined; |
||||
|
uploading = false; |
||||
|
|
||||
|
URL = window.URL || window.webkitURL; |
||||
|
|
||||
|
// 'created' hook runs when the Vue instance is first created |
||||
|
async mounted() { |
||||
|
try { |
||||
|
await db.open(); |
||||
|
const settings = await db.settings.get(MASTER_SETTINGS_KEY); |
||||
|
this.activeDid = settings?.activeDid as string; |
||||
|
|
||||
|
const temp = await db.temp.get("shared-photo"); |
||||
|
if (temp) { |
||||
|
this.imageBlob = temp.blob; |
||||
|
|
||||
|
// clear the temp image |
||||
|
db.temp.delete("shared-photo"); |
||||
|
|
||||
|
this.imageFileName = this.$route.query.fileName as string; |
||||
|
} |
||||
|
} catch (err: unknown) { |
||||
|
console.error("Got an error loading an identifier:", err); |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: "Got an error loading this data.", |
||||
|
}, |
||||
|
-1, |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async recordGift() { |
||||
|
await this.sendToImageServer("GiveAction").then((url) => { |
||||
|
if (url) { |
||||
|
this.$router.push({ |
||||
|
name: "gifted-details", |
||||
|
query: { |
||||
|
destinationNameAfter: "home", |
||||
|
hideBackButton: true, |
||||
|
imageUrl: url, |
||||
|
recipientDid: this.activeDid, |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
async recordProfile() { |
||||
|
await this.sendToImageServer(IMAGE_TYPE_PROFILE).then((url) => { |
||||
|
if (url) { |
||||
|
db.settings.update(MASTER_SETTINGS_KEY, { |
||||
|
profileImageUrl: url, |
||||
|
}); |
||||
|
this.$router.push({ name: "account" }); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
async cancel() { |
||||
|
this.imageBlob = undefined; |
||||
|
this.imageFileName = undefined; |
||||
|
this.$router.push({ name: "home" }); |
||||
|
} |
||||
|
|
||||
|
async sendToImageServer(imageType: string) { |
||||
|
this.uploading = true; |
||||
|
|
||||
|
let result; |
||||
|
try { |
||||
|
// send the image to the server |
||||
|
const identifier = await getIdentity(this.activeDid as string); |
||||
|
const token = await accessToken(identifier); |
||||
|
const headers = { |
||||
|
Authorization: "Bearer " + token, |
||||
|
}; |
||||
|
const formData = new FormData(); |
||||
|
formData.append( |
||||
|
"image", |
||||
|
this.imageBlob as Blob, |
||||
|
this.imageFileName as string, |
||||
|
); |
||||
|
formData.append("claimType", imageType); |
||||
|
|
||||
|
const response = await axios.post( |
||||
|
DEFAULT_IMAGE_API_SERVER + "/image", |
||||
|
formData, |
||||
|
{ headers }, |
||||
|
); |
||||
|
this.imageBlob = undefined; |
||||
|
this.imageFileName = undefined; |
||||
|
|
||||
|
this.uploading = false; |
||||
|
result = response.data.url as string; |
||||
|
} catch (error) { |
||||
|
console.error("Error uploading the image", error); |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: "There was an error saving the picture. Please try again.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
this.uploading = false; |
||||
|
} |
||||
|
return result; |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue