fix image cropping for editor uploads + editor embeds

Author: aguingand

resources/js/form/components/fields/upload/Upload.vue

@@ -68,6 +68,7 @@
     }>();
     const form = useParentForm();
     const transformedImg = ref<string>();
+    const persistedEditableImg = ref<string>();
     const playablePreviewUrl = ref<string>();
     const uppyFile = ref<UppyFile<{}, {}>>();
     const isEditable = computed(() => {
@@ -131,10 +132,16 @@
                     });
                     await onImageTransform(cropper);
                     cropper.destroy();
-                } else if(props.persistThumbnailUrl) {
-                    const response = await fetch(preview);
+                }
+                if(props.persistThumbnailUrl) {
+                    if(!transformedImg.value) {
+                        const response = await fetch(preview);
+                        const blob = await response.blob();
+                        transformedImg.value = URL.createObjectURL(blob);
+                    }
+                    const response = await fetch(await createThumbnail(uppyFile.value, { width: 1200, height: 1000 }));
                     const blob = await response.blob();
-                    transformedImg.value = URL.createObjectURL(blob);
+                    persistedEditableImg.value = URL.createObjectURL(blob);
                 }
             } else if(file.type?.startsWith('video/') || file.type?.startsWith('audio/')) {
                 playablePreviewUrl.value = URL.createObjectURL(file.data);
@@ -154,13 +161,15 @@
                 ...props.value,
                 ...response.body,
                 thumbnail: transformedImg?.value ?? uppyFile.value.preview,
+                editable_thumbnail: persistedEditableImg.value,
                 mime_type: file.type,
                 size: file.size,
             });
             emit('success', {
                 ...props.value,
                 ...response.body,
                 thumbnail: transformedImg?.value ?? uppyFile.value.preview,
+                editable_thumbnail: persistedEditableImg.value,
                 mime_type: file.type,
                 size: file.size,
             });
@@ -267,26 +276,27 @@
                 }
 
                 editModalImageUrl.value = data.thumbnail;
-
-                await new Promise<void>(resolve => {
-                    const image = new Image();
-                    image.src = data.thumbnail;
-                    image.onload = () => {
-                        editModalCropperData.value = getCropDataFromFilters({
-                            filters: props.value.filters,
-                            imageWidth: image.naturalWidth,
-                            imageHeight: image.naturalHeight,
-                        });
-                        resolve();
-                    }
-                    image.onerror = () => {
-                        editModalImageUrl.value = props.value.thumbnail;
-                        resolve();
-                    }
-                });
+            } else if(props.value?.editable_thumbnail) {
+                editModalImageUrl.value = props.value.editable_thumbnail;
             } else if(uppyFile.value) {
                 editModalImageUrl.value = await createThumbnail(uppyFile.value, { width: 1200, height: 1000 });
             }
+            await new Promise<void>(resolve => {
+                const image = new Image();
+                image.src = editModalImageUrl.value;
+                image.onload = () => {
+                    editModalCropperData.value = getCropDataFromFilters({
+                        filters: props.value.filters,
+                        imageWidth: image.naturalWidth,
+                        imageHeight: image.naturalHeight,
+                    });
+                    resolve();
+                }
+                image.onerror = () => {
+                    editModalImageUrl.value = props.value.thumbnail;
+                    resolve();
+                }
+            });
         }
 
         editModalOpen.value = true;
@@ -352,7 +362,17 @@
         if(uppyFile.value) {
             uppy.removeFile(uppyFile.value.id);
             uppyFile.value = null;
+            if(transformedImg.value) {
+                URL.revokeObjectURL(transformedImg.value);
+            }
+            if(persistedEditableImg.value) {
+                URL.revokeObjectURL(playablePreviewUrl.value);
+            }
+            if(playablePreviewUrl.value) {
+                URL.revokeObjectURL(playablePreviewUrl.value);
+            }
             transformedImg.value = null;
+            persistedEditableImg.value = null;
             playablePreviewUrl.value = null;
             editModalImageUrl.value = null;
         }

resources/js/types/generated.d.ts

@@ -626,6 +626,7 @@ export type FormUploadFieldValueData = {
   mime_type: string;
   size: number;
   thumbnail: string | null;
+  editable_thumbnail: string | null;
   playable_preview_url: string | null;
   uploaded: boolean | null;
   transformed: boolean | null;