From 8ebb37a5963c020bd49f1bda940efd6776f069fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.com>
Date: Fri, 9 Jul 2021 11:29:01 +0200
Subject: [PATCH] add vm.model.onValueChanged callback

---
 .../umbMediaPicker3PropertyEditor.component.js    | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js
index 96f3126288..02b9f0b928 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js
@@ -98,6 +98,10 @@
 
             vm.model.value.forEach(mediaEntry => updateMediaEntryData(mediaEntry));
 
+            // set the onValueChanged callback, this will tell us if the media picker model changed on the server
+            // once the data is submitted. If so we need to re-initialize
+            vm.model.onValueChanged = onServerValueChanged;
+
             userService.getCurrentUser().then(function (userData) {
 
                 if (!vm.model.config.startNodeId) {
@@ -120,6 +124,15 @@
 
         };
 
+        function onServerValueChanged(newVal, oldVal) {
+            if(newVal === null || !Array.isArray(newVal)) {
+                newVal = [];
+                vm.model.value = newVal;
+            }
+
+            vm.model.value.forEach(mediaEntry => updateMediaEntryData(mediaEntry));
+        }
+
         function setDirty() {
             if (vm.propertyForm) {
                 vm.propertyForm.$setDirty();
@@ -259,7 +272,7 @@
         function setActiveMedia(mediaEntryOrNull) {
             vm.activeMediaEntry = mediaEntryOrNull;
         }
-        
+
         function editMedia(mediaEntry, options, $event) {
 
             if($event)