NEW Move the replace file into the more options action set

client/src/components/AssetDropzone/AssetDropzone.js

@@ -40,7 +40,7 @@ class AssetDropzone extends Component {
       ));
 
     // attach the name as a class to the hidden input for easier identification
-    const name = this.props.name;
+    const { name } = this.props;
     if (name) {
       this.dropzone.hiddenFileInput.classList.add(`dz-input-${name}`);
     }
@@ -70,6 +70,15 @@ class AssetDropzone extends Component {
     }
   }
 
+  componentDidUpdate() {
+    // Reattach name to hiddenFileInput as dropzone recreates this element after each upload
+    const { name } = this.props;
+
+    if (name) {
+      this.dropzone.hiddenFileInput.classList.add(`dz-input-${name}`);
+    }
+  }
+
   componentWillUnmount() {
     // Remove all dropzone event listeners.
     this.dropzone.disable();

client/src/components/PreviewImageField/PreviewImageField.js

@@ -48,7 +48,7 @@ class PreviewImageField extends Component {
       url: endpoint && endpoint.url,
       method: endpoint && endpoint.method,
       paramName: 'Upload',
-      clickable: '#preview-replace-button',
+      clickable: true,
       maxFiles: 1,
     };
     const preview = {
@@ -293,24 +293,6 @@ class PreviewImageField extends Component {
     }
     return (
       <div className="preview-image-field__toolbar fill-height">
-        { (this.props.data.url) ? (
-          <a
-            href={this.props.data.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className={this.getButtonClasses('link')}
-          >Open</a>
-        )
-        : null }
-        { (canEdit) ? (
-          <button
-            id="preview-replace-button"
-            onClick={this.preventDefault}
-            className={this.getButtonClasses('replace')}
-            type="button"
-          >Replace</button>
-        )
-        : null }
         { (this.props.upload.progress || this.props.upload.message) ? (
           <button
             onClick={this.handleCancelUpload}

client/src/containers/Editor/Editor.js

@@ -41,6 +41,12 @@ class Editor extends Component {
       return;
     }
 
+    if (name === 'action_replacefile') {
+      this.replaceFile();
+      event.preventDefault();
+      return;
+    }
+
     if (name === 'action_delete') {
       // Customise message based on usage
       let message = i18n._t('AssetAdmin.CONFIRMDELETE', 'Are you sure you want to delete this record?');
@@ -115,6 +121,15 @@ class Editor extends Component {
     });
   }
 
+  replaceFile() {
+    const hiddenFileInput = document.querySelector('.dz-input-PreviewImage');
+
+    // Trigger a click on Dropzone's hidden file input in order to upload an image
+    if (hiddenFileInput) {
+      hiddenFileInput.click();
+    }
+  }
+
   handleLoadingError(exception) {
     this.setState({
       loadingForm: false,

code/Forms/FileFormFactory.php

@@ -382,6 +382,25 @@ protected function getUnpublishAction($record)
         return $action;
     }
 
+    /**
+     * Get Replace file action
+     *
+     * @param File $record
+     * @return FormAction
+     */
+    protected function getReplaceFileAction($record)
+    {
+        // Check if record exists and user has correct permissions
+        if (!$record || !$record->isInDB() || !$record->canEdit()) {
+            return null;
+        }
+
+        $action = FormAction::create('replacefile', _t(__CLASS__ . '.REPLACE_FILE', 'Replace file'))
+            ->setIcon('upload');
+
+        return $action;
+    }
+
     /**
      * Get actions that go into the Popover menu
      *
@@ -391,8 +410,9 @@ protected function getUnpublishAction($record)
     protected function getPopoverActions($record)
     {
         $this->beforeExtending('updatePopoverActions', function (&$actions, $record) {
-            // add the unpublish action to the start of the array
+            // add the unpublish and replace file actions to the start of the array
             array_unshift($actions, $this->getUnpublishAction($record));
+            array_unshift($actions, $this->getReplaceFileAction($record));
         });
 
         return parent::getPopoverActions($record);

lang/en.yml

@@ -80,6 +80,7 @@ en:
     LINKOPTIONS: 'Link options'
     LINKTEXT: 'Link text'
     OTHER_ACTIONS: 'Other actions'
+    REPLACE_FILE: 'Replace file'
     UNEMEDABLE_MESSAGE: '<p class="alert alert-info alert--no-border editor__top-message">This file type can only be inserted as a link. You can edit the link once it is inserted.</p>'
     USAGE: 'Used on'
   SilverStripe\AssetAdmin\Forms\FileHistoryFormFactory:

tests/php/Forms/FileFormBuilderTest.php

@@ -94,6 +94,7 @@ public function testEditFileForm()
         // Test actions exist
         $this->assertNotNull($form->Actions()->fieldByName('Actions.action_save'));
         $this->assertNotNull($form->Actions()->fieldByName('Actions.action_publish'));
+        $this->assertNotNull($form->Actions()->fieldByName('PopoverActions.action_replacefile'));
         $this->assertNotNull($form->Actions()->fieldByName('PopoverActions.action_delete'));
         $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_unpublish'));
 
@@ -130,32 +131,50 @@ public function testEditFileFormWithPermissions()
 
         FileExtension::$canDelete = false;
         FileExtension::$canPublish = false;
+        FileExtension::$canEdit = false;
         $form = $builder->getForm($controller, 'EditForm', ['Record' => $file, 'RequireLinkText' => false]);
         $this->assertNull($form->Actions()->fieldByName('PopoverActions'));
         $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_delete'));
+        $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_replacefile'));
+
         $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_addtocampaign'));
         $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_unpublish'));
 
         FileExtension::$canDelete = false;
         FileExtension::$canPublish = true;
+        FileExtension::$canEdit = false;
         $form = $builder->getForm($controller, 'EditForm', ['Record' => $file, 'RequireLinkText' => false]);
         $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_delete'));
+        $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_replacefile'));
         $this->assertNotNull($form->Actions()->fieldByName('PopoverActions.action_addtocampaign'));
         $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_unpublish'));
 
         FileExtension::$canDelete = true;
         FileExtension::$canPublish = false;
+        FileExtension::$canEdit = false;
         $form = $builder->getForm($controller, 'EditForm', ['Record' => $file]);
         $this->assertNotNull($form->Actions()->fieldByName('PopoverActions.action_delete'));
+        $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_replacefile'));
+        $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_addtocampaign'));
+        $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_unpublish'));
+
+        FileExtension::$canDelete = false;
+        FileExtension::$canPublish = false;
+        FileExtension::$canEdit = true;
+        $form = $builder->getForm($controller, 'EditForm', ['Record' => $file]);
+        $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_delete'));
+        $this->assertNotNull($form->Actions()->fieldByName('PopoverActions.action_replacefile'));
         $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_addtocampaign'));
         $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_unpublish'));
 
         FileExtension::$canDelete = true;
         FileExtension::$canPublish = true;
         FileExtension::$canUnpublish = true;
+        FileExtension::$canEdit = true;
         $file->publishSingle();
         $form = $builder->getForm($controller, 'EditForm', ['Record' => $file, 'RequireLinkText' => false]);
         $this->assertNotNull($form->Actions()->fieldByName('PopoverActions.action_delete'));
+        $this->assertNotNull($form->Actions()->fieldByName('PopoverActions.action_replacefile'));
         $this->assertNotNull($form->Actions()->fieldByName('PopoverActions.action_addtocampaign'));
         $this->assertNotNull($form->Actions()->fieldByName('PopoverActions.action_unpublish'));
 
@@ -323,6 +342,7 @@ public function testFolderForm()
         $this->assertNull($form->Actions()->fieldByName('action_publish'));
         $this->assertNull($form->Actions()->dataFieldByName('action_publish'));
         $this->assertNull($form->Actions()->dataFieldByName('action_unpublish'));
+        $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_replacefile'));
     }
 
     public function testScaffolderFactory()

tests/php/Forms/FileFormBuilderTest/FileExtension.php

@@ -15,6 +15,7 @@ class FileExtension extends DataExtension implements TestOnly
     public static $canDelete = false;
     public static $canPublish = true;
     public static $canUnpublish = true;
+    public static $canEdit = true;
 
     public function canDelete($member)
     {
@@ -30,4 +31,9 @@ public function canUnpublish($member = null)
     {
         return self::$canUnpublish;
     }
+
+    public function canEdit($member = null)
+    {
+        return self::$canEdit;
+    }
 }