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)