Почему не работает drag and drop?

Попробовал сделать drag and drop загрузку фото, но вместо того, чтобы она вставлялась на страницу сайта, она открывается по своему локальному пути.
Код

<div
          v-if="selectimage"
          id="box"
          class="inputBox"
          @click="inputActive"
          :class="drag ? 'drag' : ''"
          @ondragover="init"
          @dragenter="dragenter"
          @dragend="dragend"
          @dragleave="dragleave"
          @mouseenter="mouseenter"
          @mouseleave="mouseleave"
          
          >
            <v-layout class="pointer-events" align-center justify-center column>
            
            <v-icon id="upload" class="display-4">mdi-cloud-upload</v-icon>
            <span>Выберите изображение или перетащите его сюда </span>
            <input style="display: none" ref="inputfile" @change="init" id="inputFileToLoad" type="file"/>
            </v-layout>
          </div>


props: {
    showcolor: {
      type: Boolean,
      default: true
    },
    toggleselect: {
      type: Boolean,
      default: false
    },
    imagesrc: {
      type: String
    }
  },
  methods: {
    mouseenter: function(){
      document.getElementById('upload').style.color = '#1867c0';
    },
    mouseleave: function(){
      document.getElementById('upload').style.color = 'rgba(0,0,0,.54)';
    },
    dragenter: function(){
      document.getElementById('upload').style.color = '#1867c0';
      document.getElementById('box').style.backgroundColor = '#bbbbbb22';
    },
    dragend: function(){
      document.getElementById('upload').style.color = 'rgba(0,0,0,.54)';
      document.getElementById('box').style.backgroundColor = '';
    },
    dragleave: function(){
      document.getElementById('upload').style.color = 'rgba(0,0,0,.54)';
      document.getElementById('box').style.backgroundColor = '';
    },
    inputActive: function(){
      document.getElementById('inputFileToLoad').click()
    },
    toggleState: function () {
      this.isEnabled = !this.isEnabled
    },
    init: function () {
      this.selectimage = false
      this.encodeImageFileAsURL('imagePlaceHolder')
    },
encodeImageFileAsURL: function (container) {
      var filesSelected = this.$refs.inputfile.files
      var that = this
      if (filesSelected.length > 0) {
        var fileToLoad = filesSelected[ 0 ]
        var fileReader = new FileReader()
        fileReader.onload = function (fileLoadedEvent) {
          var srcData = fileLoadedEvent.target.result // <--- data: base64
          var newImage = document.createElement('img')
          newImage.src = srcData
          that.$refs.prevewImage.src = srcData
        }
        fileReader.readAsDataURL(fileToLoad)
      }
    }

Фото должно появится в canvas элементе. Самое интересное, что, если просто в ручную выбрать файл, а не перетаскивать, то всё работает как надо.