Resetting the FileUpload componente on uploaded event

UI Components for Vue
Post Reply
topper81
Posts: 1
Joined: 06 Jun 2021, 15:41

06 Jun 2021, 16:05

I am using FileUpload in basic mode and custom upload function, like so:

Code: Select all

<FileUpload name="file" mode="basic" :customUpload="true" @uploader="uploadFile" />

Code: Select all

uploadFile(event){
axios({
          //call hapens here
        }).then(
          (response) => {
           // all good
          },
          (error) => {
           // oops!
          }
        );
}
thing is after the upload completed, the file is still kept in the component. How can I remove it, resetting the component in a way?

GavynSykes
Posts: 6
Joined: 10 Mar 2021, 18:03

21 Jun 2021, 08:11

I'm facing the same issue. Any clue?

Thanks

GavynSykes
Posts: 6
Joined: 10 Mar 2021, 18:03

24 Jun 2021, 08:40

Unfortunately, I think this is not possible just with the component.

I resolved by creating a new component based on FileUpload that suits my needs

daBigR--
Posts: 3
Joined: 16 Jun 2021, 20:40

24 Jun 2021, 20:41

I'm having the same issue. I tried returning different values from the uploader callback -- i.e. return true, event.files, etc -- and it didn't help. Could it be considered a bug?

GavynSykes
Posts: 6
Joined: 10 Mar 2021, 18:03

26 Jun 2021, 17:50

I don't think so.

It was designed to work like that.

If You need another behaviour, it's better to write your own component

daBigR--
Posts: 3
Joined: 16 Jun 2021, 20:40

03 Jul 2021, 16:54

Hi,
I don't agree with GavynSykes, I don't think it's a designed behavior I can't believe the intent was to only let you process a single file. It might be a design limitation, meaning it can't be done within the limitations of the framework. But I stil think it's a bug. Anyway, I looked at the components' code and found that when it's used without a custom uploader it calls an internal clear() function after the call to the API, but when it has a custom uploader it only emits the event. You can see it here in the FileUpload.vue upload() function:

Code: Select all

        upload() {
            if (this.customUpload) {
                if (this.fileLimit) {
                    this.uploadedFileCount += this.files.length;
                }

                this.$emit('uploader', {files: this.files});
            }
            else {
                let xhr = new XMLHttpRequest();
                let formData = new FormData();

                this.$emit('before-upload', {
                    'xhr': xhr,
                    'formData': formData
                });

                for (let file of this.files) {
                    formData.append(this.name, file, file.name);
                }

                xhr.upload.addEventListener('progress', (event) => {
                    if (event.lengthComputable) {
                        this.progress = Math.round((event.loaded * 100) / event.total);
                    }

                    this.$emit('progress', {
                        originalEvent: event,
                        progress: this.progress
                    });
                });

                xhr.onreadystatechange = () => {
                    if (xhr.readyState === 4) {
                        this.progress = 0;

                        if (xhr.status >= 200 && xhr.status < 300) {
                            if (this.fileLimit) {
                                this.uploadedFileCount += this.files.length;
                            }

                            this.$emit('upload', {
                                xhr: xhr,
                                files: this.files
                            });
                        }
                        else {
                            this.$emit('error', {
                                xhr: xhr,
                                files: this.files
                            });
                        }

                        this.clear();
                    }
                };

                xhr.open('POST', this.url, true);

                this.$emit('before-send', {
                    'xhr': xhr,
                    'formData': formData
                });

                xhr.withCredentials = this.withCredentials;

                xhr.send(formData);
            }
        },
Seing that, I thought what if I called the FileUpload clear() function after I call my own upload API? I made a little test app and it works, it resets the component and allows you to process a new file. This is my App.vue, no real upload API call just a log, but the main thing is you're able to reset the FileUpload component.

Code: Select all

<template>
  <FileUpload
    ref="fileupload"
    name="demo[]"
    :customUpload="true"
    @uploader="uploadFile"
  />
</template>

<script>
import FileUpload from 'primevue/fileupload';

export default {
  name: 'App',
  components: {
    FileUpload
  },
  methods: {
    uploadFile(e) {
      console.log(e.files[0]);
      this.$refs.fileupload.clear();
    }
  }
};
</script>

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests