editor: improve edit propagation

Signed-off-by: Varun Patil <varunpatil@ucla.edu>

lib/Controller/ImageController.php

@@ -190,6 +190,10 @@ class ImageController extends GenericApiController
             // Get the image info
             $info = $this->timelineQuery->getInfoById($file->getId(), $basic);
 
+            // Add fileid and etag
+            $info['fileid'] = $file->getId();
+            $info['etag'] = $file->getEtag();
+
             // Allow these ony for logged in users
             if (null !== $this->userSession->getUser()) {
                 // Get list of tags for this file
@@ -347,10 +351,7 @@ class ImageController extends GenericApiController
             // Make sure the preview is updated
             \OC::$server->get(\OCP\IPreview::class)->getPreview($file);
 
-            return new JSONResponse([
-                'fileid' => $file->getId(),
-                'etag' => $file->getEtag(),
-            ], Http::STATUS_OK);
+            return $this->info((string) $file->getId(), true);
         });
     }
 

src/components/viewer/ImageEditor.vue

@@ -19,7 +19,7 @@ import { FilerobotImageEditorConfig } from "react-filerobot-image-editor";
 import translations from "./ImageEditorTranslations";
 
 import { API } from "../../services/API";
-import { IPhoto } from "../../types";
+import { IImageInfo, IPhoto } from "../../types";
 import * as utils from "../../services/Utils";
 import { fetchImage } from "../frame/XImgCache";
 
@@ -234,14 +234,17 @@ export default defineComponent({
       }
 
       try {
-        const res = await axios.put(API.IMAGE_EDIT(this.photo.fileid), {
-          name: name,
-          width: data.width,
-          height: data.height,
-          quality: data.quality,
-          extension: data.extension,
-          state: state,
-        });
+        const res = await axios.put<IImageInfo>(
+          API.IMAGE_EDIT(this.photo.fileid),
+          {
+            name: name,
+            width: data.width,
+            height: data.height,
+            quality: data.quality,
+            extension: data.extension,
+            state: state,
+          }
+        );
         const fileid = res.data.fileid;
 
         // Success, emit an appropriate event
@@ -250,6 +253,7 @@ export default defineComponent({
         if (fileid !== this.photo.fileid) {
           emit("files:file:created", { fileid });
         } else {
+          utils.updatePhotoFromImageInfo(this.photo, res.data);
           emit("files:file:updated", { fileid });
         }
         this.onClose(undefined, false);

src/components/viewer/Viewer.vue

@@ -398,8 +398,6 @@ export default defineComponent({
       const photo = this.currentPhoto;
       const isvideo = photo && photo.flag & this.c.FLAG_IS_VIDEO;
       if (photo && !isvideo && photo.fileid === fileid) {
-        photo.etag += "_";
-        photo.imageInfo = null;
         this.photoswipe.refreshSlideContent(this.currIndex);
       }
     },

src/services/utils/helpers.ts

@@ -1,4 +1,4 @@
-import { IPhoto } from "../../types";
+import { IImageInfo, IPhoto } from "../../types";
 import { API } from "../API";
 
 /** Get preview URL from photo object */
@@ -25,6 +25,21 @@ export function getPreviewUrl(
   });
 }
 
+/**
+ * Update photo object using imageInfo.
+ */
+export function updatePhotoFromImageInfo(photo: IPhoto, imageInfo: IImageInfo) {
+  photo.etag = imageInfo.etag;
+  photo.basename = imageInfo.basename;
+  photo.mimetype = imageInfo.mimetype;
+  photo.w = imageInfo.w;
+  photo.h = imageInfo.h;
+  photo.imageInfo = {
+    ...photo.imageInfo,
+    ...imageInfo,
+  };
+}
+
 /**
  * Get the path of the folder on folders route
  * This function does not check if this is the folder route

src/types.ts

@@ -76,6 +76,8 @@ export type IPhoto = {
 };
 
 export interface IImageInfo {
+  fileid: number;
+  etag: string;
   h: number;
   w: number;
   datetaken: number;