Add import functionality to voice recorder

src/components/VoiceRecorder.vue

@@ -11,6 +11,20 @@
             <v-btn v-show="state == states.RECORDED" icon @click.stop="redo">
               <v-icon color="white">undo</v-icon>
             </v-btn>
+            <v-btn v-show="state == states.INITIAL" icon @click.stop="importAudio">
+              <v-icon color="white">$vuetify.icons.audio_import</v-icon>
+              <input
+              ref="audio_import"
+              type="file"
+              name="audio_import"
+              @change="handleAudioImport($event)"
+              accept="audio/*"
+              class="d-none"
+            />
+            </v-btn>
+            <v-btn v-show="state == states.IMPORTED" icon @click.stop="previewAudio">
+              <v-icon color="white">$vuetify.icons.audio_import_play</v-icon>
+            </v-btn>
           </v-col>
           <v-col cols="4" align="center">
             <v-btn
@@ -23,7 +37,7 @@
               <v-icon color="white">stop</v-icon>
             </v-btn>
             <v-btn
-              v-else-if="state == states.RECORDED"
+              v-else-if="state == states.RECORDED || state == states.IMPORTED"
               id="btn-send"
               class="voice-recorder-btn recorded"
               icon
@@ -145,6 +159,7 @@ const State = {
   RECORDING: "recording",
   RECORDED: "recorded",
   ERROR: "error",
+  IMPORTED: "imported"
 };
 import util from "../plugins/utils";
 import VoiceRecorderLock from "./VoiceRecorderLock";
@@ -192,7 +207,8 @@ export default {
       recordingLocked: false,
       recordedFile: null,
       errorMessage: null,
-      recorder: null
+      recorder: null,
+      previewPlayer: null,
     };
   },
   watch: {
@@ -242,8 +258,10 @@ export default {
           this.startRecording();
         } else {
           console.log("Not PTT");
+          if (this.micButtonRef) {
           //eslint-disable-next-line
           this.micButtonRef.$el.style.display = "none";
+          }
         }
       } else {
         // Remove listeners
@@ -257,10 +275,17 @@ export default {
         this.startCoordinateX = null;
         this.startCoordinateY = null;
         this.recordingLocked = false;
+        if (this.micButtonRef) {
         //eslint-disable-next-line
         this.micButtonRef.$el.style.display = "block";
+        }
       }
     },
+    state() {
+      if (this.state != State.IMPORTED && this.previewPlayer) {
+        this.previewPlayer.pause();
+      }
+    }
   },
   computed: {
     lockButtonStyle() {
@@ -351,10 +376,10 @@ export default {
     },
     cancelRecording() {
       if(this.recorder) {
-        this.state = State.INITIAL;
         this.recorder.stop();
         this.recorder = null;
       }
+      this.state = State.INITIAL;
       this.close();
     },
     pauseRecording() {
@@ -433,6 +458,37 @@ export default {
         }
       });
     },
+
+    /**
+     * Show import picker to select file
+     */
+     importAudio() {
+      this.$refs.audio_import.click();
+    },
+
+    /**
+     * Handle picked audio file
+     */
+    handleAudioImport(event) {
+      if (event.target.files && event.target.files[0]) {
+        this.recordedFile = event.target.files[0];
+        this.state = State.IMPORTED;
+      }
+    },
+
+    previewAudio() {
+      if (this.recordedFile) {
+        if (!this.previewPlayer) {
+          this.previewPlayer = new Audio();
+        }
+        var reader = new FileReader();
+        reader.onload = (e) => {
+        this.previewPlayer.src = e.target.result;
+        this.previewPlayer.play();
+        };
+        reader.readAsDataURL(this.recordedFile);
+      }
+    }
   },
 };
 </script>