[Bug] Can't load images for already uploaded files via files property

[kskrlinnorth2]

Is there an existing issue for this?

• [X] I have searched the existing issues

Have you updated FilePond and its plugins?

• [X] I have updated FilePond and its plugins

Describe the bug

I used filepond in my older projects and everything works great. Now we need gallery module on our new project and I thought Filepond will be the best solution, however, it doesn't work as expected anymore... The biggest issue is I can't load uploaded images via files property. I am currently using vue-filepond v7.0.3 (on my older project, where everything works great, it's vue-filepond v6.0.3).

All I get is 400 error "Can't load URL" without any useful error message to debug it. There are same issues reported regarding this, but they were just closed without proper solution, mentioning cors, which is not the problem here (browser would throw cors error in that case and it also wouldn't work on my old project which also doesn't have cors setup).

I am using it with Vue 3 and Inertia.js this time (older project is Vue 2) and this is my files property value:

Since the type is local It should trigger server load method, but it doesn't; it just triggers addfile event...

This is my filepond vue component:

<FilePond
        ref="filepondGalleryInput"
        allow-paste="false"
        allow-multiple="true"
        allow-reorder="true"
        :accepted-file-types="['image/jpeg']"
        style-item-panel-aspect-ratio="1"
        item-insert-location="before"
        :files="filepondFiles"
        @init="handleFilePondInit"
        @addfile="handleFilePondGalleryAdd"
        @removefile="handleFilePondGalleryRemoveFile"
        credits=""
        :label-idle="$t('filepond-label-idle')"
/>

handleFilePondInit:

handleFilePondInit: function () {
      // Set global options on filepond init
      setOptions({
        server: {
          process: "/filepond",
          load: (source, load) => {
            // This should trigger before addfile event and generate blobs for uploaded files, but it doesn't
            console.log("load", source);
            fetch(new Request(source)).then((response) => {
              response.blob().then((blob) => load(blob));
            });
          },
          headers: {
            "X-CSRF-TOKEN": this.props.csrfToken,
          },
        },
      });
},

On init it just logs this from my handleFilePondGalleryAdd method (you can see there is no log from load):

Reproduction

x

Environment

- OS: Windows 11
- Browser: Chrome 105

[kskrlinnorth2]

I "fixed" it by moving my server config to script setup part of code, instead setting it via init event and setOptions.

<FilePond
  ref="filepondGalleryInput"
  allow-paste="false"
  allow-multiple="true"
  allow-reorder="true"
  :accepted-file-types="['image/jpeg']"
  style-item-panel-aspect-ratio="1"
  item-insert-location="before"
  :server="filepondServer"
  :files="filepondFiles"
  @init="handleFilePondInit"
  @addfile="handleFilePondGalleryAddFile"
  @removefile="handleFilePondGalleryRemoveFile"
  credits=""
  :label-idle="$t('filepond-label-idle')"
/>

However, I would love to know why it doesn't work and how to make it work via the first approach (which I followed by authors Laravel Vue Inertiajs example for this package: https://github.com/rahulhaque/laravel-filepond-vue-inertia-example)

[rikschennink]

Okay, great. I can't investigate this right now. but am working on v5 of FilePond, it should make this easier.