I have been on this for a full day and I just cannot find an answer to it.

Imagine a form with an upload file input field. Next to it there is also a button called "select template". The user can either upload his own image or select an image from a given template.

Here is the problem, I am unable to send the selected image to the input field(so I can process it in my axios post later on).

This is the table where all the template files are showing up:

<table class="table table-borderless table-hover">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="item in image_gallery">
<td class="align-middle">{{ item.id }}</td>
<td class="align-middle">{{ item.title }}</td>
<td><img :src="'/storage/images/' + item_image" class="img-thumbnail" alt="" style="width: 75px;" @click="selectImage(item.id, $event)">
</td>
</tr>
</tbody>
</table>

When the user clicks on the above image, I would like the file to be set to this input field(which is the same input where the user can upload his own file).

<label class="btn btn-info btn-block btn-sm">
<i class="fas fa-upload text-white"></i>
<input
type="file"
id="file"
@change="onFileAttached(1)"
ref="file"
accept="image/png, image/jpeg"
hidden/>
</label>

I tried this:

selectImage(id, event){

this.$refs.files[0].src = event.files[0].src;
//or
this.$refs.files[0].src = event.target.src;
}

But no luck.....I am not understanding what I am missing :-(

Is there a way to manually take a URL from a given image to set this image to an input field?

Thanks in advance for guiding me a bit.