From 192ade42a5bd44ebdd34e3a5c8befdd860b19ada Mon Sep 17 00:00:00 2001
From: busti <mbust@live.de>
Date: Sat, 28 Dec 2019 05:27:54 +0100
Subject: [PATCH] implement an image selection button (from files)

---
 src/components/inputs/InputPhoto.vue | 24 +++++++++++++++++++++++-
 src/main.js                          |  4 ++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/inputs/InputPhoto.vue b/src/components/inputs/InputPhoto.vue
index 801c551..6d12982 100644
--- a/src/components/inputs/InputPhoto.vue
+++ b/src/components/inputs/InputPhoto.vue
@@ -20,8 +20,12 @@
             </div>
         </div>
         <div class="row m-auto">
+            <label for="file" class="btn btn-info my-2">
+                <font-awesome-icon icon="save"/>&nbsp;Upload&nbsp;an&nbsp;image&nbsp;instead
+            </label>
+            <input type="file" id="file" accept="image/png" class="d-none" @change="onFileChange($event)">
             <button v-if="!capturing" class="btn my-2 ml-auto btn-secondary" @click="openStream()">
-                <font-awesome-icon icon="camera"/>
+              <font-awesome-icon icon="camera"/>
             </button>
             <div v-if="capturing" class="btn-group my-2 ml-auto">
                 <button class="btn btn-success" @click="captureVideoImage()">
@@ -40,6 +44,8 @@
 </template>
 
 <script>
+import { mapMutations } from 'vuex';
+
 export default {
   name: 'InputPhoto',
   props: [ 'model', 'field', 'onCapture' ],
@@ -50,6 +56,7 @@ export default {
     dataImage: undefined
   }),
   methods: {
+    ...mapMutations(['createToast']),
     openStream() {
       if (!this.capturing) {
         this.capturing = true;
@@ -82,6 +89,21 @@ export default {
         this.capturing = false;
         this.streaming = false;
       }
+    },
+    onFileChange({ target }) {
+      const file = target.files[0];
+      var reader = new FileReader();
+      reader.readAsDataURL(file);
+      const self = this;
+      reader.onload = function () {
+        self.dataImage = reader.result;
+        self.onCapture(this.dataImage);
+        self.closeStream();
+      };
+      reader.onerror = function (error) {
+        this.createToast({ title: 'Error: Failed to parse image file', message: error.toString(), color: 'danger' });
+        console.log('Error: ', error);
+      };
     }
   },
   mounted() {
diff --git a/src/main.js b/src/main.js
index a9d0535..da94c01 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,10 +11,10 @@ import 'bootstrap/dist/js/bootstrap.min.js';
 
 // fontawesome
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes, faSave } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
-library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes);
+library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes, faSave);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);