Merge pull request #593 from maebeale/buefy-import-upload

Introduce FileUpload vue component and EntryPoint

Author: solebared

app/controllers/submission_response_imports_controller.rb

@@ -4,7 +4,7 @@ def new
   end
 
   def create
-    uploaded_file = params[:submission_response_import]
+    uploaded_file = params[:submission_response_import][:file]
 
     SubmissionResponseImportJob.perform_later(
       user_id: current_user.id,

app/javascript/components/forms/FileUpload.vue

@@ -0,0 +1,32 @@
+<template>
+  <b-field class="file has-name is-fullwidth">
+    <b-upload
+      v-model="file"
+      :name="fieldName"
+      accept=".csv,text/plain"
+      required
+      native
+      expanded
+    >
+      <a class="file-cta">
+        <b-icon class="file-icon" icon="upload"></b-icon>
+        <span class="file-label">Click to select file</span>
+      </a>
+    </b-upload>
+
+    <span class="file-name">
+      {{ file ? file.name : 'Select a file ...' }}
+    </span>
+  </b-field>
+</template>
+
+<script>
+export default {
+  props: {
+    fieldName: String,
+  },
+  data() {
+    return {file: null}
+  },
+}
+</script>

app/javascript/entry_points/fileUpload.js

@@ -0,0 +1,13 @@
+import Vue from 'vue_config'
+import FileUpload from '../components/forms/FileUpload'
+
+export default function(el, props) {
+  new Vue({
+    el,
+    render(h) {
+      return h(FileUpload, {
+        props: props,
+      })
+    }
+  })
+}

app/javascript/entry_points/index.js

@@ -1,4 +1,5 @@
 import ask         from './ask'
+import fileUpload  from './fileUpload'
 import offer       from './offer'
 import navBar      from './navBar'
 import notice      from './notice'
@@ -7,6 +8,7 @@ import orientation from './orientation'
 
 export {
   ask,
+  fileUpload,
   offer,
   navBar,
   notice,

app/views/submission_response_imports/new.html.erb

@@ -1,34 +1,16 @@
-<%= form_for :submission_response_import, url: submission_response_imports_path, multipart: true do |f| %>
-  <div class="title is-3">Submission Response Import</div>
+<h1 class="title is-3">Submission Response Import</h1>
 
-  <div id="file-js-example" class="file has-name">
-    <label class="file-label">
-      <input class="file-input" type="file" name="submission_response_import">
-      <span class="file-cta">
-      <span class="file-icon">
-        <i class="fas fa-upload"></i>
-      </span>
-      <span class="file-label">
-        Choose a file…
-      </span>
-    </span>
-      <span class="file-name" style="width: 50em;">
-      No file uploaded
-      <%= f.file_field :file %>
-    </span>
-    </label>
-    <%= f.submit "Upload",
-                 class: "button is-primary",
-                 name: nil %>
+<%= form_with url: submission_response_imports_path, multipart: true, local: true do |f| %>
+  <div id="upload">
   </div>
+
+  <%= f.submit "Import", class: "button is-primary" %>
 <% end  %>
 
 <script>
-    const fileInput = document.querySelector('#file-js-example input[type=file]');
-    fileInput.onchange = () => {
-        if (fileInput.files.length > 0) {
-            const fileName = document.querySelector('#file-js-example .file-name');
-            fileName.textContent = fileInput.files[0].name;
-        }
-    }
-</script>
+  document.addEventListener('DOMContentLoaded', () => {
+    EntryPoints.fileUpload('#upload', {
+      fieldName: 'submission_response_import[file]',
+    })
+  })
+</script>