I won't submit form on upload Javascript

Question

Which part of function submit my form on upload image? I won't submit form on upload image. I want on submit button. Which part of code make mi problem? One think this code work okay , but I want submit form on upload photo automation. Also which part of my code maybe not need me for this time?

uploadFile(event) {
              const formData = new FormData()
                          formData.append('image', event.target.files[0])
              axios({
                method: "post",
                url: "linkmyapi",
                data: formData,
                headers: {
                  "Content-Type": "multipart/form-data"
                }
              })
                .then(response => {
                  this.items.push(response.data);
                  this.image = "";
                            this.profile_image = ''
                            this.loading = false
                            this.dragAndDropUpload = false
                            this.styleObject.backgroundColor = ''
                })
                .catch(error => {
                  this.loading = false;
            },
            onDropFile(e) {
                        this.dragAndDropUpload = true
                        e.stopPropagation()
                        e.preventDefault()
                        let files = e.dataTransfer.files
                        this.createFile(files[0])
                    },
                    onChangeFile(e) {
                        // this.manualUpload = true
                        let files = e.target.files;
                        this.createFile(files[0])
                    },
                    createFile(file) {
                        if (!file.type.match('image.*')) {
                            alert('Select an image')
                            return
                        }
                        let reader = new FileReader()
                        let vm = this
                        reader.onload = function (e) {
                            vm.profile_image = e.target.result
                        }
                        reader.readAsDataURL(file)
                        this.uploadFile(event)
                    },
                    removeFile() {
                        this.profile_image = ''
                        this.styleObject.backgroundColor = ''
                    },
                    onDragOver () {
                        this.styleObject.backgroundColor = 'rgba(0, 160, 223, 0.4)'
                    },
                    onDragLeave () {
                        this.styleObject.backgroundColor = ''


    },

HTML is

  <div class="upload-container">
    <div
        :style="styleObject"
        class="drop drop-profile"
        id="2"
        @dragover.prevent="onDragOver()"
        @dragleave.prevent="onDragLeave()"
        @drop="onDropFile($event)"
        :class="{ 'loading-image': loading }">

        <label v-if="!profile_image" class="label-text label-text-profile">
            Choose or drag
            <br> and drop your
             profile image
             here
             <br>
            <input
                type="file"
                name="profile_image"
                @change="onChangeFile($event)">
        </label>

        <div v-else class="hidden">
            <img :src="profile_image" alt="Profile image" class="image-profile" />

            <div v-if="!loading" class="lc-loupe-trash-container">
                <div @click="removeFile" class="lc-trash"></div>
            </div>
        </div>
    </div>

    <div v-if="loading" class="spinner-container">
        <i class="fa fa-spinner fa-spin"></i>
    </div>
</div>

Answer 1

Your question isn't so clear, can you try editing it to be a little clearer? Do you want to automatically upload onDrop into drop area or you want to upload onClick of submit button?