2 files changed, 81 insertions, 0 deletions
diff --git a/src/components/importer/importer.js b/src/components/importer/importer.js
new file mode 100644
index 00000000..c5f9e4d2
--- /dev/null
+++ b/src/components/importer/importer.js
@@ -0,0 +1,53 @@
+const Importer = {
+  props: {
+    submitHandler: {
+      type: Function,
+      required: true
+    },
+    submitButtonLabel: {
+      type: String,
+      default () {
+        return this.$t('importer.submit')
+      }
+    },
+    successMessage: {
+      type: String,
+      default () {
+        return this.$t('importer.success')
+      }
+    },
+    errorMessage: {
+      type: String,
+      default () {
+        return this.$t('importer.error')
+      }
+    }
+  },
+  data () {
+    return {
+      file: null,
+      error: false,
+      success: false,
+      submitting: false
+    }
+  },
+  methods: {
+    change () {
+      this.file = this.$refs.input.files[0]
+    },
+    submit () {
+      this.dismiss()
+      this.submitting = true
+      this.submitHandler(this.file)
+        .then(() => { this.success = true })
+        .catch(() => { this.error = true })
+        .finally(() => { this.submitting = false })
+    },
+    dismiss () {
+      this.success = false
+      this.error = false
+    }
+  }
+}
+
+export default Importer
diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue
new file mode 100644
index 00000000..0c5aa93d
--- /dev/null
+++ b/src/components/importer/importer.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="importer">
+    <form>
+      <input type="file" ref="input" v-on:change="change" />
+    </form>
+    <i class="icon-spin4 animate-spin importer-uploading" v-if="submitting"></i>
+    <button class="btn btn-default" v-else @click="submit">{{submitButtonLabel}}</button>
+    <div v-if="success">
+      <i class="icon-cross" @click="dismiss"></i>
+      <p>{{successMessage}}</p>
+    </div>
+    <div v-else-if="error">
+      <i class="icon-cross" @click="dismiss"></i>
+      <p>{{errorMessage}}</p>
+    </div>
+  </div>
+</template>
+
+<script src="./importer.js"></script>
+
+<style lang="scss">
+.importer {
+  &-uploading {
+    font-size: 1.5em;
+    margin: 0.25em;
+  }
+}
+</style>