Implement downloadFile action to download files

Author: akolson

contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue

@@ -69,7 +69,7 @@
 
 <script>
 
-  import { mapGetters } from 'vuex';
+  import { mapActions, mapGetters } from 'vuex';
   import FileStatusText from 'shared/views/files/FileStatusText';
   import Uploader from 'shared/views/files/Uploader';
   import { constantsTranslationMixin, fileSizeMixin, fileStatusMixin } from 'shared/mixins';
@@ -159,7 +159,7 @@
             label: this.$tr('downloadMenuOptionLabel'),
             value: 'DOWNLOAD_FILE',
             onClick: () => {
-              this.downloadFile();
+              this.initiateFileDownload();
             },
             condition: this.fileDisplay,
           },
@@ -184,6 +184,8 @@
       },
     },
     methods: {
+      ...mapActions('file', ['downloadFile']),
+      ...mapActions(['showSnackbar']),
       completeUpload(fileUpload) {
         if (fileUpload.id === this.fileUploadId) {
           this.uploadCompleteHandler(fileUpload);
@@ -192,8 +194,17 @@
       uploadingHandler(fileUpload) {
         this.fileUploadId = fileUpload.id;
       },
-      downloadFile() {
-        window.open(this.fileDisplay.url, '_blank');
+      initiateFileDownload() {
+        try {
+          this.downloadFile({
+            url: this.fileDisplay.url,
+            fileName: this.formattedFileDisplay,
+          });
+        } catch (e) {
+          this.showSnackbar({
+            text: this.$tr('downloadFailed'),
+          });
+        }
       },
       removeFile() {
         this.$emit('remove', this.file);
@@ -204,6 +215,7 @@
       replaceFileMenuOptionLabel: 'Replace file',
       downloadMenuOptionLabel: 'Download',
       removeMenuOptionLabel: 'Remove',
+      downloadFailed: 'Failed to download file',
       /* eslint-disable kolibri/vue-no-unused-translations */
       removeFileButton: 'Remove',
       retryUpload: 'Retry upload',

contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/fileUpload.spec.js

@@ -11,7 +11,7 @@ const testFiles = [
     preset: {
       id: 'document',
       supplementary: false,
-      order: 1,
+      order: 2,
     },
   },
   {
@@ -71,8 +71,8 @@ describe('fileUpload', () => {
   });
   describe('computed', () => {
     it('should map the files to the correct presets', () => {
-      expect(wrapper.vm.primaryFileMapping[0].file.id).toBe('file-1');
-      expect(wrapper.vm.primaryFileMapping[1].file.id).toBe('file-3');
+      expect(wrapper.vm.primaryFileMapping[0].file.id).toBe('file-3');
+      expect(wrapper.vm.primaryFileMapping[1].file.id).toBe('file-1');
       expect(wrapper.vm.primaryFileMapping).toHaveLength(2);
     });
     it('should disallow file removal if there is only one primary file', () => {
@@ -98,11 +98,11 @@ describe('fileUpload', () => {
       uploadItem = wrapper.findAll(FileUploadItem).at(0);
     });
     it('should automatically select the first file on load', () => {
-      expect(wrapper.vm.selected).toBe('file-1');
+      expect(wrapper.vm.selected).toBe('file-3');
     });
     it('selectPreview should select the preview when items are selected in the list', () => {
       uploadItem.vm.$emit('selected');
-      expect(wrapper.vm.selected).toBe('file-1');
+      expect(wrapper.vm.selected).toBe('file-3');
     });
     it('emitted remove event should trigger removal dialog', () => {
       const deleteFile = jest.fn();

contentcuration/contentcuration/frontend/shared/vuex/file/actions.js

@@ -281,3 +281,29 @@ export function getAudioData(context, url) {
       .catch(reject);
   });
 }
+
+export function downloadFile(context, { url, fileName }) {
+  return new Promise((resolve, reject) => {
+    client
+      .get(url, {
+        responseType: 'blob',
+      })
+      .then(response => {
+        try {
+          const blobUrl = window.URL.createObjectURL(response.data);
+          const anchor = document.createElement('a');
+          anchor.href = blobUrl;
+          anchor.download = fileName;
+          anchor.style.display = 'none';
+          document.body.appendChild(anchor);
+          anchor.click();
+          document.body.removeChild(anchor);
+          window.URL.revokeObjectURL(blobUrl);
+          resolve(true);
+        } catch (error) {
+          reject(error);
+        }
+      })
+      .catch(reject);
+  });
+}