From b69fcec3a4f2b2b35f035c55f699bb71b9887528 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Thu, 25 Feb 2021 16:01:32 +0100
Subject: [PATCH] Add download buttons to files interface (#4287)

* add download button to files interface

* Update app/src/interfaces/files/files.vue

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
---
 app/src/interfaces/files/files.vue | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/src/interfaces/files/files.vue b/app/src/interfaces/files/files.vue
index 014fc55253..95388a8581 100644
--- a/app/src/interfaces/files/files.vue
+++ b/app/src/interfaces/files/files.vue
@@ -26,6 +26,7 @@
 			</template>
 
 			<template #item-append="{ item }" v-show="!disabled">
+				<v-icon name="save_alt" v-tooltip="$t('download')" class="download" @click.stop="downloadItem(item)" />
 				<v-icon name="close" v-tooltip="$t('deselect')" class="deselect" @click.stop="deleteItem(item)" />
 			</template>
 		</v-table>
@@ -78,6 +79,8 @@ import DrawerCollection from '@/views/private/components/drawer-collection';
 import DrawerItem from '@/views/private/components/drawer-item';
 import { get } from 'lodash';
 import i18n from '@/lang';
+import { getRootPath } from '@/utils/get-root-path';
+import { addTokenToURL } from '@/api';
 
 import useActions from '@/interfaces/many-to-many/use-actions';
 import useRelation from '@/interfaces/many-to-many/use-relation';
@@ -209,8 +212,14 @@ export default defineComponent({
 			sort,
 			sortItems,
 			sortedItems,
+			downloadItem
 		};
 
+		function downloadItem(item: any) {
+			const filePath = addTokenToURL(getRootPath() + `assets/${item.directus_files_id.id}?download`);
+			window.open(filePath, '_blank');
+		}
+
 		function useUpload() {
 			const showUpload = ref(false);
 
@@ -244,12 +253,13 @@ export default defineComponent({
 .existing {
 	margin-left: 12px;
 }
+.download {
+	--v-icon-color: var(--foreground-subdued);
+	margin-right: 8px;
+}
 
 .deselect {
 	--v-icon-color: var(--foreground-subdued);
-
-	&:hover {
-		--v-icon-color: var(--danger);
-	}
+	--v-icon-color-hover: var(--danger);
 }
 </style>