Mercurial > gemma
changeset 1152:7cb06f85a905
feat: Import sounding results display filename in uploadbox
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 13 Nov 2018 12:03:05 +0100 |
parents | a499f450420e |
children | 16d42e8183b3 |
files | client/src/imports/Imports.vue |
diffstat | 1 files changed, 19 insertions(+), 4 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/imports/Imports.vue Tue Nov 13 11:50:14 2018 +0100 +++ b/client/src/imports/Imports.vue Tue Nov 13 12:03:05 2018 +0100 @@ -49,10 +49,15 @@ >{{option}}</option> </select> </div> - <div class="input-group mb-5"> + <div class="d-flex flex-row input-group mb-5"> <div class="custom-file"> - <input type="file" class="custom-file-input" id="inputGroupFile04"> - <label class="custom-file-label" for="inputGroupFile04">Choose file</label> + <input + type="file" + @change="fileSelected" + class="custom-file-input" + id="inputGroupFile04" + > + <label class="custom-file-label" for="inputGroupFile04">{{uploadLabel}}</label> </div> </div> <div class="downloadbtn"> @@ -70,15 +75,25 @@ </template> <script> +const defaultLabel = "Choose file"; + export default { name: "imports", data() { return { depthReference: "", bottleneck: "", - importDate: "" + importDate: "", + uploadLabel: defaultLabel }; }, + methods: { + fileSelected(e) { + const files = e.target.files || e.dataTransfer.files; + if (!files) return; + this.uploadLabel = files[0].name; + } + }, computed: { dataLink() { return (