Mercurial > gemma

changeset 1152:7cb06f85a905

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 (