Skip to content

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

Open
@kskrlinnorth2

Description

@kskrlinnorth2

Is there an existing issue for this?

  • I have searched the existing issues

Have you updated FilePond and its plugins?

  • 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:
Clipboard01

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):
image

Reproduction

x

Environment

- OS: Windows 11
- Browser: Chrome 105

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions