[Nuxt] Remove function error: Cannot read properties of undefined (reading 'name')

[isuke01]

Hi,

I have problem with remove function. Version: "vue-upload-component": "^2.8.22",

I copied remove function form example: https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Full.vue And I'm listing files like in example and tried to use remove like in example, but it produce error: Cannot read properties of undefined (reading 'name'). I tried to pass just file.name, but same problem. File contain name and all file data when I tried to log it. clear function works correctly, but I need to remove selected file.

My component setup:

  <ul class="gform_upload_filelist" v-if="files.length">
     <li class="gform_upload_filelist_item" v-for="file in files" :key="file.id">
        <span class="gform_upload_filename">{{file.name}}</span>
        <a class="dropdown-item" href="#" @click.prevent="$refs.upload.remove(file)">Remove</a>
        <button  class="gform_file_btn gform_remove_btn" type="button" @click.prevent="removeFile(file)">Remove 2</button>
      </li>
</ul>
<file-upload
          :multiple="useMultiple"
          :input-id="fieldID(field)"
          :name="inputName"
          :maximum="maxFilesCount"
          :drop="true"
          @input-filter="inputFilter"
          @input-file="inputFile"
          v-model="files"
          ref="upload">
 </file-upload>

import FileUpload from 'vue-upload-component/dist/vue-upload-component.part.js'

export default {
    name: 'gf-input-files',
    components: {
        FileUpload,
    },
    data() {
        return {
            files: [],
            errorValidationMsg: '',
            bytes: 1048576 //1MB
        }
    },
    methods: {
        removeFile(file){
          console.log('to remove', file)
          this.$refs.upload.remove(file)
        },
    }
}

EDIT: Basically I find out the remove function inside /node_modules/vue-upload-component/dist/vue-upload-component.part.js The line 1332

if (this.emitFilter(undefined, file)) {
   return false;
}

Without this piece of code everything work correctly. But I don't know If I can just remove this or maybe this is important part of the code for some other elements?

So for now I made in my component function like:

 removeFile(item){
          const upl = this.$refs.upload
          const file = upl.get(item)
          if (file) {
            /* the piece which made the error
            if (upl.emitFilter(undefined, file)) {
              return false;
            }*/
            const files = upl.files.concat([]);
            const index = files.indexOf(file);
            if (index === -1) {
              console.error('remove', file);
              return false;
            }
            files.splice(index, 1);
            upl.files = files;

            // 定位
            delete upl.maps[file.id];

            // 事件
            upl.emitInput();
            upl.emitFile(undefined, file);
          }
          
},

[lian-yue]

Remove rejected by inputFilter

Calling the prevent function will refuse to modify any data

function inputFilter(newFile, oldFile, prevent) {
  if (!newFile) {
     return
  }
 //...
}

[isuke01]

Actually I tried without prevent, and the issue is still there. And I'm not sure how inputFilter has anything to do with it but I treid to add your condition to my code, and there is still the very same exact error that I described.