Image Upload on button click.

Hi, I am trying to upload an image using vue js inline template on blade. I am uploading an image, it works fine but the image upload as soon as i select the image, I want to click on a button then only the image uploads. below is my code m using:

Vue method

         uploadImage(event) {

            const URL = 'api/v1/chats/image';

            let data = new FormData();
            data.append('name', 'my-picture');
            data.append('file', event.target.files[0]);
            data.append('chatid', this.chat);
            data.append('senderid', this.auth_id);

            let config = {
                header: {
                    'Content-Type': 'image/png'
                }
            };
      
            axios.post(URL, data, config).then(
                response => {
                    console.log('image upload response > ', response)
                  }
              )
          },

Blade

        <input type="file" accept="image/*" @change="uploadImage($event)" 
                                     id="file-input">

as soon as i upload an image it calls the api as my api is inside the method. but how do i call the api with my image on button click?. would really appreciate if someone could help. Thanks