Vue.js + Element-ui Upload: how call method ClearFiles or Abort

Question

I'm using vue.js and element-ui.

I'd like to use the upload-file component to send files to my server.

I want to stop loading a file to the server, if such file already exists. I want to use the claimed method abort or clearFiles, but can't. What's my mistake?

HTML

<el-upload
     action="",
     :http-request="addAttachment",
     :on-remove="deleteAttachment",
     :before-upload="handleBeforeUpload",
     :file-list="fileList">
</el-upload>
<el-button size="small" type="success" @click="clearFiles">clear</el-button>

JAVASCRIPT

var vm = new Vue({
    data() {
        return {
            fileList: []
        };
    },
    methods: {
        handleBeforeUpload(file) {
            //if loading file exists in fileList - abort 
            if (findIndexInFileList(file) >= 0) {
                clearFiles(); //error
                this.clearFiles(); //.. and error
                vm.clearFiles(); //.. and also error
            }
        }
    }
}).$mount('#app');

vm.clearFiles(); //error!

@franiis, "vue.js:6 ReferenceError: clearFiles is not defined" — Anna Sh
– Anna Sh, Commented Sep 3, 2018 at 10:59

Jankrloz Navarrete · Accepted Answer · 2018-10-26 05:05:40Z

7

With refs! add ref attribute to el-upload

<el-upload
 ref="upload">
</el-upload>

Then call via $refs object

this.$refs.upload.clearFiles()

answered Oct 26, 2018 at 5:05

Jankrloz Navarrete

862 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anna Sh Over a year ago

Ok, thanks, but what about abort() ? It's not work, fileList not updated.

ptrckdev Over a year ago

in case someone finds this 1 year later like me: fileList just holds the default values NOT the files you upload. clearFiles() seems to just clean up the UI

Collectives™ on Stack Overflow

Vue.js + Element-ui Upload: how call method ClearFiles or Abort

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related