Changeset 35787

Timestamp:

2021-12-10T10:41:08+13:00 (2 years ago)

Author:

cstephen

Message:

Improve file downloading

Location:

main/trunk/model-interfaces-dev/atea/macron-restoration/src

Files:

• components/FileInput.vue (modified) (4 diffs)
• js/MacronRestorationModule.js (modified) (1 diff)

main/trunk/model-interfaces-dev/atea/macron-restoration/src/components/FileInput.vue

@@ +1 @@
+<script>
+import { mapState } from "vuex";
+import MacronRestorationService from "../js/MacronRestorationModule"
+import FileUpload from "./FileUpload.vue"
+
+const macronRestorer = new MacronRestorationService();
+
+export default {
+    name: "FileInput",
+    components: {
+        FileUpload
+    },
+    computed: {
+        ...mapState({
+            translations: state => state.translations,
+            fileInfos: state => state.macronisedFileInfos
+        })
+    },
+    methods: {
+        buildDownloadUrl(fileInfo) {
+            return macronRestorer.buildDownloadUrl(fileInfo.filePath, fileInfo.fileName);
+        }
+    }
+}
+</script>
+
 <template>
 <file-upload />
@@ -12 +38 @@
             {{ fileInfo.fileName }}
 
-            <button @click="download(fileInfo)" type="button" class="btn-primary theme-flat">
+            <a class="btn-primary theme-flat" :href="buildDownloadUrl(fileInfo)" download>
                 <span class="material-icons">download</span>
                 <span>{{ translations.get("FileInput_Download") }}</span>
-            </button>
+            </a>
         </div>
 
@@ -21 +47 @@
     </div>
 </div>
-
-<form ref="formDownload" method="post" target="_blank">
-    <input ref="inputFilePath" type="hidden" name="filepath" />
-    <input ref="inputFileName" type="hidden" name="filename" />
-</form>
 
 </template>
@@ -59 +80 @@
 }
 </style>
-
-<script>
-import { mapState } from "vuex";
-import MacronRestorationService from "../js/MacronRestorationModule"
-import FileUpload from "./FileUpload.vue"
-
-const macronRestorer = new MacronRestorationService();
-
-export default {
-    name: "FileInput",
-    components: {
-        FileUpload
-    },
-    computed: {
-        ...mapState({
-            translations: state => state.translations,
-            fileInfos: state => state.macronisedFileInfos
-        })
-    },
-    methods: {
-        download(fileInfo) {
-            this.$refs.inputFilePath.value = fileInfo.filePath;
-            this.$refs.inputFileName.value = fileInfo.fileName;
-            this.$refs.formDownload.submit();
-        }
-    },
-    mounted() {
-        this.$refs.formDownload.setAttribute("action", macronRestorer.rootQueryUrl + "download");
-    }
-}
-</script>

main/trunk/model-interfaces-dev/atea/macron-restoration/src/js/MacronRestorationModule.js

@@ -111 +111 @@
         }
     }
+
+    /**
+     * Builds a URL used to retrieve a file.
+     * @param {String} filePath The path of the file to download.
+     * @param {String} fileName The name to display in the download response.
+     */
+    buildDownloadUrl(filePath, fileName) {
+        return `${this.rootQueryUrl}download?filepath=${filePath}&filename=${fileName}`;
+    }
 }