feat: add-download-button closes #3429 (#3609)

packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrary.js

@@ -210,6 +210,36 @@ class MediaLibrary extends React.Component {
     });
   };
 
+  /**
+   * Downloads the selected file.
+   */
+  handleDownload = () => {
+    const { selectedFile } = this.state;
+    const { displayURLs } = this.props;
+    const url = displayURLs.getIn([selectedFile.id, 'url']) || selectedFile.url;
+    if (!url) {
+      return;
+    }
+
+    const filename = selectedFile.name;
+
+    const element = document.createElement('a');
+    element.setAttribute('href', url);
+    element.setAttribute('download', filename);
+
+    element.style.display = 'none';
+    document.body.appendChild(element);
+
+    element.click();
+
+    document.body.removeChild(element);
+    this.setState({ selectedFile: {} });
+  };
+
+  /**
+   *
+   */
+
   handleLoadMore = () => {
     const { loadMedia, dynamicSearchQuery, page, privateUpload } = this.props;
     loadMedia({ query: dynamicSearchQuery, page: page + 1, privateUpload });
@@ -302,6 +332,7 @@ class MediaLibrary extends React.Component {
         handlePersist={this.handlePersist}
         handleDelete={this.handleDelete}
         handleInsert={this.handleInsert}
+        handleDownload={this.handleDownload}
         setScrollContainerRef={ref => (this.scrollContainerRef = ref)}
         handleAssetClick={this.handleAssetClick}
         handleLoadMore={this.handleLoadMore}

packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryActions.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import { FileUploadButton } from 'UI';
-import { buttons, shadows, zIndex } from 'netlify-cms-ui-default';
+import { buttons, colors, colorsRaw, shadows, zIndex } from 'netlify-cms-ui-default';
 
 const styles = {
   button: css`
@@ -61,6 +61,24 @@ const InsertButton = styled.button`
   ${buttons.green};
 `;
 
+const DownloadButton = styled.button`
+  ${styles.button};
+  background-color: ${colors.button};
+  color: ${colors.buttonText};
+
+  ${props =>
+    props.focused === true &&
+    css`
+      &:focus,
+      &:hover {
+        color: ${colorsRaw.white};
+        background-color: #555a65;
+      }
+    `}
+`;
+
+const UpperActionsContainer = styled.div``;
+
 const LowerActionsContainer = styled.div`
   margin-top: 30px;
 `;
@@ -69,22 +87,30 @@ const MediaLibraryActions = ({
   uploadButtonLabel,
   deleteButtonLabel,
   insertButtonLabel,
+  downloadButtonLabel,
   uploadEnabled,
   deleteEnabled,
   insertEnabled,
+  downloadEnabled,
   insertVisible,
   imagesOnly,
   onPersist,
   onDelete,
   onInsert,
+  onDownload,
 }) => (
   <ActionsContainer>
-    <StyledUploadButton
-      label={uploadButtonLabel}
-      imagesOnly={imagesOnly}
-      onChange={onPersist}
-      disabled={!uploadEnabled}
-    />
+    <UpperActionsContainer>
+      <DownloadButton onClick={onDownload} disabled={!downloadEnabled} focused={downloadEnabled}>
+        {downloadButtonLabel}
+      </DownloadButton>
+      <StyledUploadButton
+        label={uploadButtonLabel}
+        imagesOnly={imagesOnly}
+        onChange={onPersist}
+        disabled={!uploadEnabled}
+      />
+    </UpperActionsContainer>
     <LowerActionsContainer>
       <DeleteButton onClick={onDelete} disabled={!deleteEnabled}>
         {deleteButtonLabel}
@@ -102,14 +128,17 @@ MediaLibraryActions.propTypes = {
   uploadButtonLabel: PropTypes.string.isRequired,
   deleteButtonLabel: PropTypes.string.isRequired,
   insertButtonLabel: PropTypes.string.isRequired,
+  downloadButtonLabel: PropTypes.string.isRequired,
   uploadEnabled: PropTypes.bool,
   deleteEnabled: PropTypes.bool,
   insertEnabled: PropTypes.bool,
   insertVisible: PropTypes.bool,
+  downloadEnabled: PropTypes.bool,
   imagesOnly: PropTypes.bool,
   onPersist: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onInsert: PropTypes.func.isRequired,
+  onDownload: PropTypes.func.isRequired,
 };
 
 export default MediaLibraryActions;

packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryModal.js

@@ -92,6 +92,7 @@ const MediaLibraryModal = ({
   handlePersist,
   handleDelete,
   handleInsert,
+  handleDownload,
   setScrollContainerRef,
   handleAssetClick,
   handleLoadMore,
@@ -141,22 +142,25 @@ const MediaLibraryModal = ({
           uploadButtonLabel={
             isPersisting
               ? t('mediaLibrary.mediaLibraryModal.uploading')
-              : t('mediaLibrary.mediaLibraryModal.uploadNew')
+              : t('mediaLibrary.mediaLibraryModal.upload')
           }
           deleteButtonLabel={
             isDeleting
               ? t('mediaLibrary.mediaLibraryModal.deleting')
               : t('mediaLibrary.mediaLibraryModal.deleteSelected')
           }
+          downloadButtonLabel={t('mediaLibrary.mediaLibraryModal.download')}
           insertButtonLabel={t('mediaLibrary.mediaLibraryModal.chooseSelected')}
           uploadEnabled={!shouldShowButtonLoader}
           deleteEnabled={!shouldShowButtonLoader && hasSelection}
           insertEnabled={hasSelection}
+          downloadEnabled={hasSelection}
           insertVisible={canInsert}
           imagesOnly={forImage}
           onPersist={handlePersist}
           onDelete={handleDelete}
           onInsert={handleInsert}
+          onDownload={handleDownload}
         />
       </LibraryTop>
       {!shouldShowEmptyMessage ? null : (