FIX Ensure files can be removed from elemental blocks

src/Controllers/ElementalAreaController.php

@@ -138,7 +138,9 @@ public function save(array $data, Form $form): HTTPResponse
         // Remove the namespace prefixes that were added by EditFormFactory
         $dataWithoutNamespaces = static::removeNamespacesFromFields($data, $element->ID);
 
-        // Update and write the data object which will trigger model validation
+        // Update and write the data object which will trigger model validation.
+        // Would usually be handled by $form->saveInto($element) but since the field names
+        // in the form have been namespaced, we need to handle it ourselves.
         $element->updateFromFormData($dataWithoutNamespaces);
         if ($element->isChanged()) {
             try {

src/Models/BaseElement.php

@@ -656,15 +656,9 @@ public function getRenderTemplates($suffix = '')
      */
     public function updateFromFormData($data)
     {
-        $cmsFields = $this->getCMSFields();
-
-        foreach ($data as $field => $datum) {
-            $field = $cmsFields->dataFieldByName($field);
-
-            if (!$field) {
-                continue;
-            }
-
+        $cmsFields = $this->getCMSFields()->saveableFields();
+        foreach ($cmsFields as $fieldName => $field) {
+            $datum = $data[$fieldName] ?? null;
             $field->setSubmittedValue($datum);
             $field->saveInto($this);
         }

tests/Behat/features/file-upload.feature

@@ -0,0 +1,45 @@
+@retry @job2
+Feature: Files can be saved in and removed from elemental blocks
+  As a CMS user
+  I want to attach and remove files from elemental blocks
+
+  Background:
+    Given I add an extension "DNADesign\Elemental\Extensions\ElementalPageExtension" to the "Page" class
+    And I add an extension "SilverStripe\FrameworkTest\Elemental\Extension\FileElementalExtension" to the "DNADesign\Elemental\Models\ElementContent" class
+    And I go to "/dev/build?flush"
+    And a "image" "file1.jpg"
+    And a "page" "Blocks Page" with a "My title" content element with "My content" content
+    And the "group" "EDITOR" has permissions "Access to 'Pages' section"
+    And I am logged in as a member of "EDITOR" group
+    And I go to "/admin/pages"
+    And I follow "Blocks Page"
+
+  Scenario: Add a file and save the block, then remove the file and save the block
+    # Add a file to the block
+    Given I click on the caret button for block 1
+    Then I should not see "file1"
+    Given I take a screenshot after every step
+    When I click "Choose existing" in the "#Form_ElementForm_1 .uploadfield" element
+    And I press the "Back" HTML field button
+    And I click on the file named "file1" in the gallery
+    And I press the "Insert" button
+    And I press the "View actions" button
+    And I click on the ".element-editor__actions-save" element
+    Then I should see a "Saved 'My title' successfully" success toast
+    # Check we see the file both in the current page load (react state is correct) and after reloading the form
+    Then I should see "file1"
+    When I go to "/admin/pages"
+    And I follow "Blocks Page"
+    And I click on the caret button for block 1
+    Then I should see "file1"
+    # Then remove the file from the block
+    And I click on the "#Form_ElementForm_1 .uploadfield-item__remove-btn" element
+    And I press the "View actions" button
+    And I click on the ".element-editor__actions-save" element
+    Then I should see a "Saved 'My title' successfully" success toast
+    # Check we don't see the file anymore
+    Then I should not see "file1"
+    When I go to "/admin/pages"
+    And I follow "Blocks Page"
+    And I click on the caret button for block 1
+    Then I should not see "file1"