Ignore:
Timestamp:
2021-12-10T10:41:08+13:00 (2 years ago)
Author:
cstephen
Message:

Improve file downloading

File:
1 edited

Legend:

Unmodified
Added
Removed
  • main/trunk/model-interfaces-dev/atea/macron-restoration/src/components/FileInput.vue

    r35781 r35787  
     1<script>
     2import { mapState } from "vuex";
     3import MacronRestorationService from "../js/MacronRestorationModule"
     4import FileUpload from "./FileUpload.vue"
     5
     6const macronRestorer = new MacronRestorationService();
     7
     8export default {
     9    name: "FileInput",
     10    components: {
     11        FileUpload
     12    },
     13    computed: {
     14        ...mapState({
     15            translations: state => state.translations,
     16            fileInfos: state => state.macronisedFileInfos
     17        })
     18    },
     19    methods: {
     20        buildDownloadUrl(fileInfo) {
     21            return macronRestorer.buildDownloadUrl(fileInfo.filePath, fileInfo.fileName);
     22        }
     23    }
     24}
     25</script>
     26
    127<template>
    228<file-upload />
     
    1238            {{ fileInfo.fileName }}
    1339
    14             <button @click="download(fileInfo)" type="button" class="btn-primary theme-flat">
     40            <a class="btn-primary theme-flat" :href="buildDownloadUrl(fileInfo)" download>
    1541                <span class="material-icons">download</span>
    1642                <span>{{ translations.get("FileInput_Download") }}</span>
    17             </button>
     43            </a>
    1844        </div>
    1945
     
    2147    </div>
    2248</div>
    23 
    24 <form ref="formDownload" method="post" target="_blank">
    25     <input ref="inputFilePath" type="hidden" name="filepath" />
    26     <input ref="inputFileName" type="hidden" name="filename" />
    27 </form>
    2849
    2950</template>
     
    5980}
    6081</style>
    61 
    62 <script>
    63 import { mapState } from "vuex";
    64 import MacronRestorationService from "../js/MacronRestorationModule"
    65 import FileUpload from "./FileUpload.vue"
    66 
    67 const macronRestorer = new MacronRestorationService();
    68 
    69 export default {
    70     name: "FileInput",
    71     components: {
    72         FileUpload
    73     },
    74     computed: {
    75         ...mapState({
    76             translations: state => state.translations,
    77             fileInfos: state => state.macronisedFileInfos
    78         })
    79     },
    80     methods: {
    81         download(fileInfo) {
    82             this.$refs.inputFilePath.value = fileInfo.filePath;
    83             this.$refs.inputFileName.value = fileInfo.fileName;
    84             this.$refs.formDownload.submit();
    85         }
    86     },
    87     mounted() {
    88         this.$refs.formDownload.setAttribute("action", macronRestorer.rootQueryUrl + "download");
    89     }
    90 }
    91 </script>
Note: See TracChangeset for help on using the changeset viewer.