Fix: Download images with .webp extension properly.

svsticky · Feb 19, 2024 · f0a0447 · f0a0447
1 parent 96e22ba
commit f0a0447
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 20 deletions.
diff --git a/frontend/src/views/photo/PhotoDetailView.vue b/frontend/src/views/photo/PhotoDetailView.vue
@@ -80,14 +80,19 @@ export default Vue.extend({
     methods: {
         async downloadOriginal() {
             this.loading.original = true;
-            const result = await getPhoto(this.photo.id, Quality.ORIGINAL);
+            const photo = await getPhoto(this.photo.id, Quality.ORIGINAL, true);
 
-            if(result == undefined) {
+            if(photo == undefined) {
                 this.snackbar = errorText;
                 this.loading.original = false;
+                return;
             }
 
-            result?.downloadOrNewTab();
+            const file = new File([photo.photoBytes!], `${photo.id}.webp`, { type: "application/webp"}, );
+            const exportUrl = URL.createObjectURL(file);
+
+            window.open(exportUrl, "_blank");
+
             this.loading.original = false;
         },
         async loadHighQuality() {

diff --git a/frontend/src/views/photo/photo.ts b/frontend/src/views/photo/photo.ts
@@ -40,20 +40,6 @@ export class PhotoModel {
             }
         }
     }
-
-    downloadOrNewTab() {
-        switch(this.dataKind) {
-            case PhotoDataKind.URL: {
-                window.open(this.photoUrl!, "_blank");
-                break;
-            }
-            case PhotoDataKind.BYTES: {
-                const file = new File([this.photoBytes!], `${this.id}.webp`, { type: "application/webp"}, );
-                const exportUrl = URL.createObjectURL(file);
-                window.location.assign(exportUrl);
-            }
-        }
-    }
 }
 
 /**
@@ -124,7 +110,7 @@ export enum Quality {
     ORIGINAL,
 }
 
-export async function getPhoto(photoId: string, quality: Quality): Promise<PhotoModel | null | undefined> {
+export async function getPhoto(photoId: string, quality: Quality, forceBytes = false): Promise<PhotoModel | null | undefined> {
 
     let qualityString;
     switch(quality) {
@@ -142,7 +128,7 @@ export async function getPhoto(photoId: string, quality: Quality): Promise<Photo
         }
     }
 
-    const query = `id=${photoId}&quality_preference=${qualityString}`;
+    const query = `id=${photoId}&quality_preference=${qualityString}&force_bytes=${forceBytes}`;
     const result = await Http.getBody<GetPhotoResponse>(`/api/v1/photo?${query}`, null, GetPhotoResponse);
     if(result instanceof Response) {
         if(result.status == 404) {

diff --git a/server/chroma/src/routes/v1/photo/get.rs b/server/chroma/src/routes/v1/photo/get.rs
@@ -27,6 +27,11 @@ pub struct Query {
     /// E.g., WebP or PNG
     #[serde(default)]
     format: ImageFormat,
+    /// By the default the server may choose to return the image bytes or return a signed S3 URL.
+    /// By setting this to true the service will return the image bytes.
+    /// Defaults to false.
+    #[serde(default)]
+    force_bytes: bool,
 }
 
 #[derive(Eq, PartialEq, Debug, Default, Deserialize)]
@@ -52,7 +57,7 @@ pub async fn get(
         .await?
         .ok_or(Error::NotFound)?;
 
-    if query.format.eq(&ImageFormat::WebP) {
+    if query.format.eq(&ImageFormat::WebP) && !query.force_bytes {
         match photo
             .clone()
             .photo_to_proto_url(&data.storage, query.quality_preference.clone().into())