Saving an image as a new asset now automatically replaces the previou…

…s selected asset when editing assets in an assets field. Resolve #8974
craftcms · Oct 6, 2021 · 6764c9a · 6764c9a
1 parent 905fc5f
commit 6764c9a
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -113,6 +113,7 @@
 - All control panel templates end in `.twig` now. ([#9743](https://github.com/craftcms/cms/pull/9743))
 - The `users/save-user` action no longer includes a `unverifiedEmail` key in failure responses.
 - When using GraphQL to mutate entries, the `enabled` status is now affected on a per-site basis when specifying both the `enabled` and `siteId` parameters. ([#9771](https://github.com/craftcms/cms/issues/9771))
+- Saving an image as a new asset now automatically replaces the previous selected asset when editing assets in an assets field. ([#8974](https://github.com/craftcms/cms/discussions/8974))
 - Elements’ `searchScore` GraphQL fields are now returned as integers.
 - Plugins’ `$changelogUrl` properties must now have a `?string` type declaration.
 - Plugins’ `$description` properties must now have a `?string` type declaration.

diff --git a/src/controllers/AssetsController.php b/src/controllers/AssetsController.php
@@ -1035,6 +1035,8 @@ public function actionSaveImage(): Response
                 $image->saveAs($imageCopy);
             }
 
+            $output = [];
+
             if ($replace) {
                 $oldFocal = $asset->getHasFocalPoint() ? $asset->getFocalPoint() : null;
                 $focalChanged = $focal !== $oldFocal;
@@ -1065,12 +1067,15 @@ public function actionSaveImage(): Response
 
                 // Don't validate required custom fields
                 Craft::$app->getElements()->saveElement($newAsset);
+
+                $output['elementId'] = $newAsset->id;
             }
         } catch (Throwable $exception) {
             return $this->asErrorJson($exception->getMessage());
         }
 
-        return $this->asJson(['success' => true]);
+        $output['success'] = true;
+        return $this->asJson($output);
     }
 
     /**

diff --git a/src/web/assets/cp/dist/js/Craft.min.js b/src/web/assets/cp/dist/js/Craft.min.js
diff --git a/src/web/assets/cp/dist/js/Craft.min.js.map b/src/web/assets/cp/dist/js/Craft.min.js.map
diff --git a/src/web/assets/cp/src/js/AssetEditor.js b/src/web/assets/cp/src/js/AssetEditor.js
@@ -9,6 +9,7 @@ Craft.AssetEditor = Craft.BaseElementEditor.extend({
     originalBasename: null,
     originalExtension: null,
     reloadIndex: false,
+    replaceAsset: null,
 
     init: function(element, settings) {
         this.on('updateForm', () => {
@@ -24,7 +25,11 @@ Craft.AssetEditor = Craft.BaseElementEditor.extend({
                 if (this.settings.elementIndex) {
                     this.settings.elementIndex.updateElements();
                 } else if (this.settings.input) {
-                    this.settings.input.refreshThumbnail(this.$element.data('id'));
+                    if (this.replaceAsset) {
+                        this.settings.input.replaceElement(this.$element.data('id'), this.replaceAsset);
+                    } else {
+                        this.settings.input.refreshThumbnail(this.$element.data('id'));
+                    }
                 }
             }
         });
@@ -36,7 +41,12 @@ Craft.AssetEditor = Craft.BaseElementEditor.extend({
 
     showImageEditor: function() {
         new Craft.AssetImageEditor(this.$element.data('id'), {
-            onSave: () => {
+
+            onSave: (data) => {
+                if (data.elementId) {
+                    this.settings.elementId = this.replaceAsset = data.elementId;
+                }
+
                 this.reloadIndex = true;
                 this.load();
             },

diff --git a/src/web/assets/cp/src/js/AssetImageEditor.js b/src/web/assets/cp/src/js/AssetImageEditor.js
@@ -1308,7 +1308,7 @@ Craft.AssetImageEditor = Garnish.Modal.extend({
                 return;
             }
 
-            this.onSave();
+            this.onSave(data);
             this.hide();
             Craft.cp.runQueue();
         });
@@ -1448,8 +1448,8 @@ Craft.AssetImageEditor = Garnish.Modal.extend({
     /**
      * onSave callback.
      */
-    onSave: function() {
-        this.settings.onSave();
+    onSave: function(data) {
+        this.settings.onSave(data);
         this.trigger('save');
     },
 

diff --git a/src/web/assets/cp/src/js/AssetSelectInput.js b/src/web/assets/cp/src/js/AssetSelectInput.js
@@ -149,6 +149,25 @@ Craft.AssetSelectInput = Craft.BaseElementSelectInput.extend({
         }
     },
 
+    replaceElement: function(elementId, replaceWithId) {
+        var parameters = {
+            elementId: replaceWithId,
+            siteId: this.settings.criteria.siteId,
+            size: this.settings.viewMode
+        };
+
+        Craft.postActionRequest('elements/get-element-html', parameters, data => {
+            if (data.error) {
+                alert(data.error);
+            } else {
+                var $existing = this.$elements.filter('[data-id="' + elementId + '"]');
+                this.removeElement($existing);
+                let elementInfo = Craft.getElementInfo(data.html);
+                this.selectElements([elementInfo]);
+            }
+        });
+    },
+
     refreshThumbnail: function(elementId) {
         var parameters = {
             elementId: elementId,