Show file name when uploading file

app/server/static/js/upload.js

@@ -0,0 +1,17 @@
+import Vue from 'vue';
+
+
+const vm = new Vue({
+  el: '#mail-app',
+  delimiters: ['[[', ']]'],
+  data: {
+    file: '',
+  },
+
+  methods: {
+    handleFileUpload() {
+      console.log(this.$refs.file.files);
+      this.file = this.$refs.file.files[0].name;
+    },
+  },
+});

app/server/templates/admin/dataset_upload.html

@@ -29,9 +29,9 @@
               <label class="radio" style="margin-bottom:10px;">
                 <input type="radio" name="format" checked> Upload a TXT file from your computer
               </label>
-              <div class="file is-small" style="margin-bottom:20px;">
+              <div class="file has-name is-small" style="margin-bottom:20px;">
                 <label class="file-label">
-                  <input class="file-input" type="file" name="csv_file" required>
+                  <input class="file-input" type="file" ref="file" name="csv_file" required v-on:change="handleFileUpload()">
                   <span class="file-cta">
                     <span class="file-icon">
                       <i class="fas fa-upload"></i>
@@ -40,6 +40,9 @@
                       Select a file…
                     </span>
                   </span>
+                  <span class="file-name">
+                    [[ file ]]
+                  </span>
                 </label>
               </div>
             </div>
@@ -58,4 +61,7 @@
     </div>
   </div>
 </div>
+{% endblock %}
+{% block footer %}
+<script src="{% static 'bundle/upload.js' %}"></script>
 {% endblock %}

app/server/webpack.config.js

@@ -12,7 +12,8 @@ module.exports = {
         'guideline': './static/js/guideline.js',
         'demo_text_classification': './static/js/demo/demo_text_classification.js',
         'demo_named_entity': './static/js/demo/demo_named_entity.js',
-        'demo_translation': './static/js/demo/demo_translation.js'
+        'demo_translation': './static/js/demo/demo_translation.js',
+        'upload': './static/js/upload.js'
     },
     output: {
         path: __dirname + '/static/bundle',