iview ui how to clear files after successfully uploaded?

Question

I am trying to clear the file lists as iview ui by default show file list. The problem is, user can upload file different times and ivew ui upload component keeps the old files in the list. I don't from where the list is coming. I saw there is a method clearFiles but not sure how to use it. There is no example in doc. This is how I am using. One thing, if I make :show-upload-list to false the list doesn't show but the progress bar also doesn't show. I want the progress bar to stay and list shouldn't show up.

<Upload
   :multiple="false"

   :show-upload-list="true"
   :on-success="handleSuccess"
   :format="['jpg','jpeg','png', 'pdf', 'docx', 'txt', 'mp4', 'mp3', 'zip']"
   :max-size="21048"
   :on-format-error="handleFormatError"
   :on-exceeded-size="handleMaxSize"
   type="drag"
   :action="isFileUpload.url"
   :data="isFileUpload.meta"

>
<div style="padding: 20px 0">
    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
    <p>Click or drag files here to upload</p>
</div>

Thank you.

Answer 1

You can add ref="upload" to vue component and clear file with this.$refs.upload.clearFiles()

<template>
  <Upload
     ref="upload"
     :multiple="false"
     :show-upload-list="true"
     :on-success="handleSuccess"
     :format="['jpg','jpeg','png', 'pdf', 'docx', 'txt', 'mp4', 'mp3', 'zip']"
     :max-size="21048"
     :on-format-error="handleFormatError"
     :on-exceeded-size="handleMaxSize"
     type="drag"
     :action="isFileUpload.url"
     :data="isFileUpload.meta"

  >
  <div style="padding: 20px 0">
      <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
      <p>Click or drag files here to upload</p>
  </div>
</template>


<script>
export default {
  ...
  methods: {
    handleSuccess () {
      this.$refs.upload.clearFiles()
    }
  }
  ...
}
</script>