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
+    <UpperActionsContainer>
-      label={uploadButtonLabel}
+      <DownloadButton onClick={onDownload} disabled={!downloadEnabled} focused={downloadEnabled}>
-      imagesOnly={imagesOnly}
+        {downloadButtonLabel}
-      onChange={onPersist}
+      </DownloadButton>
-      disabled={!uploadEnabled}
+      <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 : (

packages/netlify-cms-locales/src/ca/index.js

@@ -164,7 +164,7 @@ const ca = {
       mediaAssets: 'Arxius multimedia',
       search: 'Buscar...',
       uploading: 'Penjant...',
-      uploadNew: 'Penjar de nuevo',
+      upload: 'Penjar de nuevo',
       deleting: 'Eliminant...',
       deleteSelected: 'Eliminar selecció',
       chooseSelected: 'Confirmar selecció',

packages/netlify-cms-locales/src/cs/index.js

@@ -153,7 +153,7 @@ const cs = {
       mediaAssets: 'Média',
       search: 'Hledat…',
       uploading: 'Nahrávání…',
-      uploadNew: 'Nahrát nový',
+      upload: 'Nahrát nový',
       deleting: 'Vymazávání…',
       deleteSelected: 'Smazat označené',
       chooseSelected: 'Vybrat označené',

packages/netlify-cms-locales/src/de/index.js

@@ -161,7 +161,7 @@ const de = {
       mediaAssets: 'Medien',
       search: 'Suchen...',
       uploading: 'Hochladen...',
-      uploadNew: 'Hochladen',
+      upload: 'Hochladen',
       deleting: 'Löschen...',
       deleteSelected: 'Ausgewähltes Element löschen',
       chooseSelected: 'Ausgewähltes Element verwenden',

packages/netlify-cms-locales/src/en/index.js

@@ -176,7 +176,8 @@ const en = {
       mediaAssets: 'Media assets',
       search: 'Search...',
       uploading: 'Uploading...',
-      uploadNew: 'Upload new',
+      upload: 'Upload',
+      download: 'Download',
       deleting: 'Deleting...',
       deleteSelected: 'Delete selected',
       chooseSelected: 'Choose selected',

packages/netlify-cms-locales/src/es/index.js

@@ -180,7 +180,7 @@ const es = {
       mediaAssets: 'Archivos multimedia',
       search: 'Buscar...',
       uploading: 'Subiendo...',
-      uploadNew: 'Subir nuevo',
+      upload: 'Subir nuevo',
       deleting: 'Eliminando...',
       deleteSelected: 'Eliminar selección',
       chooseSelected: 'Confirmar selección',

packages/netlify-cms-locales/src/fr/index.js

@@ -135,7 +135,7 @@ const fr = {
       mediaAssets: 'Ressources',
       search: 'Recherche...',
       uploading: 'Téléversement...',
-      uploadNew: 'Téléverser une nouvelle ressource',
+      upload: 'Téléverser une nouvelle ressource',
       deleting: 'Suppression...',
       deleteSelected: 'Supprimer les éléments sélectionnés',
       chooseSelected: 'Choisir les éléments sélectionnés',

packages/netlify-cms-locales/src/gr/index.js

@@ -159,7 +159,7 @@ const gr = {
       mediaAssets: 'Αρχεία πολυμέσων',
       search: 'Αναζήτηση...',
       uploading: 'Φόρτωμα...',
-      uploadNew: 'Ανεβάστε νέα',
+      upload: 'Ανεβάστε νέα',
       deleting: 'Διαγραφή...',
       deleteSelected: 'Διαγραφή επιλεγμένου',
       chooseSelected: 'Επιλέξτε επιλεγμένο',

packages/netlify-cms-locales/src/hu/index.js

@@ -141,7 +141,7 @@ const hu = {
       mediaAssets: 'Média tartalmak',
       search: 'Keresés...',
       uploading: 'Feltöltés...',
-      uploadNew: 'Új feltöltés',
+      upload: 'Új feltöltés',
       deleting: 'Törlés...',
       deleteSelected: 'Kijelöltek törlése',
       chooseSelected: 'Kijelöl',

packages/netlify-cms-locales/src/it/index.js

@@ -156,7 +156,7 @@ const it = {
       mediaAssets: 'Media assets',
       search: 'Cerca...',
       uploading: 'Uploading...',
-      uploadNew: 'Upload new',
+      upload: 'Upload',
       deleting: 'Deleting...',
       deleteSelected: 'Cancella selezionato',
       chooseSelected: 'Prendi selezionato',

packages/netlify-cms-locales/src/ja/index.js

@@ -157,7 +157,7 @@ const ja = {
       mediaAssets: 'データ',
       search: '検索',
       uploading: 'アップロード中...',
-      uploadNew: 'アップロードする',
+      upload: 'アップロードする',
       deleting: '削除中...',
       deleteSelected: '削除する',
       chooseSelected: '選択する',

packages/netlify-cms-locales/src/nl/index.js

@@ -164,7 +164,7 @@ const nl = {
       mediaAssets: 'Media',
       search: 'Zoeken...',
       uploading: 'Uploaden...',
-      uploadNew: 'Nieuwe uploaden',
+      upload: 'Nieuwe uploaden',
       deleting: 'Verwijderen...',
       deleteSelected: 'Verwijder selectie',
       chooseSelected: 'Gebruik selectie',

packages/netlify-cms-locales/src/pl/index.js

@@ -174,7 +174,7 @@ const pl = {
       mediaAssets: 'Zasoby multimedialne',
       search: 'Szukaj...',
       uploading: 'Przesyłanie...',
-      uploadNew: 'Prześlij nowe',
+      upload: 'Prześlij nowe',
       deleting: 'Usuwanie...',
       deleteSelected: 'Usuń zaznaczone',
       chooseSelected: 'Wybierz zaznaczone',

packages/netlify-cms-locales/src/pt/index.js

@@ -140,7 +140,7 @@ const pt = {
       mediaAssets: 'Recursos de mídia',
       search: 'Pesquisar...',
       uploading: 'Enviando...',
-      uploadNew: 'Enviar novo',
+      upload: 'Enviar novo',
       deleting: 'Deletando...',
       deleteSelected: 'Excluir selecionado',
       chooseSelected: 'Escolher selecionado',

packages/netlify-cms-locales/src/ru/index.js

@@ -139,7 +139,7 @@ const ru = {
       mediaAssets: 'Медиаресурсы',
       search: 'Идёт поиск…',
       uploading: 'Загрузка…',
-      uploadNew: 'Загрузить новый',
+      upload: 'Загрузить новый',
       deleting: 'Удаление…',
       deleteSelected: 'Удалить помеченные',
       chooseSelected: 'Выбрать помеченные',

packages/netlify-cms-locales/src/tr/index.js

@@ -162,7 +162,7 @@ const tr = {
       mediaAssets: 'Medya dosyaları',
       search: 'Ara...',
       uploading: 'Yükleniyor...',
-      uploadNew: 'Yeni yükle',
+      upload: 'Yeni yükle',
       deleting: 'Siliniyor...',
       deleteSelected: 'Silme seçildi',
       chooseSelected: 'Seç',

packages/netlify-cms-locales/src/uk/index.js

@@ -135,7 +135,7 @@ const uk = {
       mediaAssets: 'Медіа матеріали',
       search: 'Пошук...',
       uploading: 'Завантаження...',
-      uploadNew: 'Завантажити',
+      upload: 'Завантажити',
       deleting: 'Видалення...',
       deleteSelected: 'Видалити обране',
       chooseSelected: 'Додати обране',

packages/netlify-cms-locales/src/zh_Hant/index.js

@@ -152,7 +152,7 @@ const zh_Hant = {
       mediaAssets: '媒體資產',
       search: '搜尋中...',
       uploading: '上傳中...',
-      uploadNew: '上傳新內容',
+      upload: '上傳新內容',
       deleting: '刪除中...',
       deleteSelected: '刪除已選擇的項目',
       chooseSelected: '選擇已選擇的項目',