Using multiple filepond instance in laravel 10 and vue 3 componetns

Question

I have a project in Laravel 10 and Vue 3. I make use of FilePond to upload profile-image and blog-image in 2 different components. The problem is when I want to upload a profile image, FilePond uses the blog-image-upload-temparary-file route instead of profile-image-upload-temparary-file route! That's really strange! In the meanwhile, what I have discovered is. In app.js if I import blogForm component first, then he takes the Profile Image route for both and if I import ProfileForm component first, then he takes the Blog Image route for both. How can I solve the problem?

setOptions({
    server: {
        headers: {
            'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content
        }, process: {
            url: '/profile/temporary_image_upload',
        }, revert: {
            url: '/profile/temporary_image_delete'
        }
    }
});

setOptions({
    server: {
        headers: {
            'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content
        },
        process: {
            url: '/blog/temporary_image_upload',

        },
        revert: {
            url: '/blog/temporary_image_delete'
        }
    }
});

Filepond has a param where you specify the post route I this it is server option — Mihai, Jul 19 '23 at 17:24
I have done that. but it still take the wrong one. If I remove blog component, then he does the right thing — Mohsen, Jul 19 '23 at 17:32

score 0 · Answer 1 · answered Sep 02 '23 at 07:56

Try to use :key in your filepond components

<file-pond
  @init="handleFilePondInit"
  :acceptedFileTypes="`image/jpeg, image/png, image/webp`"
  :key="1"
/>

<file-pond
  @init="handleFilePondInit2"
  :acceptedFileTypes="`image/jpeg, image/png, image/webp`"
  :key="2"
/>

Using multiple filepond instance in laravel 10 and vue 3 componetns

1 Answers1