NEW Add Download file action to file meatballs button

silverstripe · Oct 8, 2019 · 82070d6 · 82070d6
1 parent 48c072f
commit 82070d6
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 38 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/containers/Editor/Editor.js b/client/src/containers/Editor/Editor.js
@@ -17,6 +17,7 @@ class Editor extends Component {
 
     this.handleCancelKeyDown = this.handleCancelKeyDown.bind(this);
     this.handleClose = this.handleClose.bind(this);
+    this.handleDelete = this.handleDelete.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleAction = this.handleAction.bind(this);
     this.handleLoadingSuccess = this.handleLoadingSuccess.bind(this);
@@ -33,45 +34,30 @@ class Editor extends Component {
   }
 
   handleAction(event, data) {
-    const name = event.currentTarget.name;
+    switch (event.currentTarget.name) {
+      // intercept the Add to Campaign submit and open the modal dialog instead
+      case 'action_addtocampaign':
+        this.openModal();
+        event.preventDefault();
 
-    // intercept the Add to Campaign submit and open the modal dialog instead
-    if (name === 'action_addtocampaign') {
-      this.openModal();
-      event.preventDefault();
-      return;
-    }
+        break;
+      case 'action_replacefile':
+        this.replaceFile();
+        event.preventDefault();
 
-    if (name === 'action_replacefile') {
-      this.replaceFile();
-      event.preventDefault();
-      return;
-    }
+        break;
+      case 'action_downloadfile':
+        this.downloadFile();
+        event.preventDefault();
 
-    if (name === 'action_delete') {
-      // Customise message based on usage
-      let message = i18n._t('AssetAdmin.CONFIRMDELETE', 'Are you sure you want to delete this record?');
-      if (this.props.file && this.props.file.inUseCount > 0) {
-        message = i18n.sprintf(
-          i18n._t(
-            'AssetAdmin.BULK_ACTIONS_DELETE_SINGLE_CONFIRM',
-            'This file is currently used in %s place(s), are you sure you want to delete it?'
-          ),
-          this.props.file.inUseCount
-        );
-        message += '\n\n';
-        message += i18n._t(
-          'AssetAdmin.BULK_ACTIONS_DELETE_WARNING',
-          'Ensure files are removed from content areas prior to deleting them,'
-          + ' otherwise they will appear as broken links.'
-        );
-      }
-      // eslint-disable-next-line no-alert
-      if (confirm(message)) {
-        this.props.actions.unsavedForms.removeFormChanged('AssetAdmin.EditForm');
-        this.props.onDelete([data.ID]);
-      }
-      event.preventDefault();
+        break;
+      case 'action_delete':
+        this.handleDelete(event, data);
+        event.preventDefault();
+
+        break;
+      default:
+        break;
     }
   }
 
@@ -110,6 +96,32 @@ class Editor extends Component {
     }
   }
 
+  handleDelete(event, data) {
+    // Customise message based on usage
+    let message = i18n._t('AssetAdmin.CONFIRMDELETE', 'Are you sure you want to delete this record?');
+    if (this.props.file && this.props.file.inUseCount > 0) {
+      message = i18n.sprintf(
+        i18n._t(
+          'AssetAdmin.BULK_ACTIONS_DELETE_SINGLE_CONFIRM',
+          'This file is currently used in %s place(s), are you sure you want to delete it?'
+        ),
+        this.props.file.inUseCount
+      );
+      message += '\n\n';
+      message += i18n._t(
+        'AssetAdmin.BULK_ACTIONS_DELETE_WARNING',
+        'Ensure files are removed from content areas prior to deleting them,'
+        + ' otherwise they will appear as broken links.'
+      );
+    }
+    // eslint-disable-next-line no-alert
+    if (confirm(message)) {
+      this.props.actions.unsavedForms.removeFormChanged('AssetAdmin.EditForm');
+      this.props.onDelete([data.ID]);
+    }
+    event.preventDefault();
+  }
+
   openModal() {
     this.setState({
       openModal: true,
@@ -131,6 +143,20 @@ class Editor extends Component {
     }
   }
 
+  downloadFile() {
+    function downloadURI(uri, name) {
+      const link = document.createElement('a');
+      link.download = name;
+      link.href = uri;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+
+    downloadURI(this.props.file.url, this.props.file.name);
+    document.getElementById('Form_fileEditForm_PopoverActions').focus();
+  }
+
   handleLoadingError(exception) {
     this.setState({
       loadingForm: false,

diff --git a/code/Forms/FileFormFactory.php b/code/Forms/FileFormFactory.php
@@ -400,6 +400,25 @@ protected function getReplaceFileAction($record)
         return $action;
     }
 
+    /**
+     * Get Download file action
+     *
+     * @param File $record
+     * @return FormAction
+     */
+    protected function getDownloadFileAction($record)
+    {
+        // Check if record exists and user has correct permissions
+        if (!$record || !$record->isInDB() || !$record->canEdit()) {
+            return null;
+        }
+
+        $action = FormAction::create('downloadfile', _t(__CLASS__ . '.DOWNLOAD_FILE', 'Download file'))
+            ->setIcon('down-circled');
+
+        return $action;
+    }
+
     /**
      * Get actions that go into the Popover menu
      *
@@ -411,6 +430,7 @@ protected function getPopoverActions($record)
         $this->beforeExtending('updatePopoverActions', function (&$actions, $record) {
             // add the unpublish and replace file actions to the start of the array
             array_unshift($actions, $this->getUnpublishAction($record));
+            array_unshift($actions, $this->getDownloadFileAction($record));
             array_unshift($actions, $this->getReplaceFileAction($record));
         });