Vue.js and Firebase / Firestore - Adding a image from a Form

I am going to show my code for a single image, I'll be expanding this to multiple images shortly.   One thing that was a sticking point for me was how to retrieve the File from the forms 'Event' .  

The recommended path on event.target.file was not working. In the end the solution was to log.console the event item, and painfully search through it.
I found it at var selected_file = event.target.form[7].files[0];

Here’s the code that will work in principle.

HTML

1 <form id="add-survey-form"> 2 <div id="input-group-7" role="group" class="form-group"> 3 <label id="input-group-7__BV_label_" for="input-7" class="d-block">Images:</label><div> 4 <input id="survey_images" type="file" placeholder="Images" class="form-control" aria-describedby="input-group-7__BV_description_"><!----><!----> 5 <small tabindex="-7" id="input-group-7__BV_description_" class="form-text text-muted">Survey images.</small></div></div> 6 7 <button v-on:click="addSurvey">Add Survey</button> 8 </form>

VUE.JS

1 methods: { 2 async addSurvey(event) { 3 const auth = await firebase.auth(); 4 const db = await firebase.firestore(); 5 event.preventDefault(); 6... 78 var selected_file = event.target.form[7].files[0]; 9 firebase.storage().ref('survey/UID-FOLDER/image.jpg').put(selected_file).then(function (){ 10 console.log('succesfully uploaded') 11 }).catch(error => { 12 console.log(error.message); 13 })