CODEWITHSUNDEEP
vue.jsfilepond
tomePale
tomePale

Reputation: 51

Preview of already uploaded file in vue-filepond component

I hope you can enlighten me what I am doing wrong here with vue-filepond. 



So my problem is when I want to edit my form I cant get preview of file I uploaded earlier, strange thing is that I used all the same code for Vue 2 and it worked without problem, but on Vue 3 it doesn’t work(I am sure I’m missing something and I did install v6 for Vue 2 and newer version for Vue 3).

My file is there when I am editing my form but not visible in Filepond component

This is how Filepond component looks like:

<file-pond
      ref="pond"
      credits="false"
      allow-multiple="true"
      allowFileTypeValidation="false"
      allowFileSizeValidation="false"
      fileValidateTypeDetectType="false"
      allowRemove="true"
      checkValidity="false"
      instant-upload="false"
      v-bind:files="myFiles"
      :beforeRemoveFile="handleFilePondRemoveFiles"
      v-on:updatefiles="handleFilePondUpdateFiles"
      v-on:init="handleFilePondInit"
   />

So when I am editing a form (using Laravel for backend and passing a data to Vue component in blade file...) in mounted method in Vue, this code works fine with Vue 2, I can see then file which I uploaded earlier (img or pdf) but on Vue 3 not, but its actually there:

mounted() {

        if (this.isEdit) {
            for (let file in this.files) {
                let f = new File([this.files[file]], this.files[file].name, {
                    type: 'application/pdf'
                });
                this.myFiles.push(f)
            }
        }

    },

I went through your docs but could not find any proper info or code example that would work for me...

Thx for help!

Upvotes: 1

Views: 1948

Answers (1)

tomePale
tomePale

Reputation: 51

I came up with this solution and it works, feel free to correct me if I am wrong :)

     mounted() {
        if (this.isEdit) {
            for (let file in this.files) {
               this.getUploadedFile(this.files[file].original_url, this.files[file].name, this.myFiles)
            }
        }
    },

and method

methods: {
        async getUploadedFile(url, fileName, arr) {
            await fetch(url)
                .then(res => res.blob())
                .then(blob => {
                    arr.push(new File([blob], fileName, {
                        type: blob.type
                    }))
                });
        },

and in filepond component I binded files like this:

 v-bind:files="[...myFiles]"

Now I can see my uploaded file in FilePond component and delete it or upload new one...

Upvotes: 2

Related Questions