[React] Can't load File preview from URL about filepond

[rikschennink]

@LivioGama If you remove the type="local" from the File component it should work. FilePond will now load the file by URL.

The type="local" is only for files that are inaccessible from the web. When type is set to local the file is requested via the server load end point ( which by default returns a webpage in a react app, which is also why the file is so tiny ).

If you inspect the network tab of your developer tools you'll see the request load?=filename.png.

[rikschennink]

Have you tried implementing the load API end point? It basically loads the file and returns it from the server, you can find and example here: https://github.com/pqina/filepond-boilerplate-php/blob/master/public/api/index.php#L45

I'm thinking of making this optional ( as when the file is accessible from the browser it's unnecessary ).

[rikschennink]

@LivioGama Okay, I seem to have reproduced the problem here, working on a fix.

[rikschennink]

Hey! That’s a bit odd, I’m currently on a short trip, will look into this when I get back later this week.

[LivioGama]

There is no picture preview in the solution you gave me. I would expect the remote image to have the same look than the ‘just uploaded successfully’ picture

[rikschennink]

Have you removed the type="local"?

[LivioGama]

Removing the type=local will cause the file to upload, then the model will change and the page will re-render, then the file upload again, in an infinite loop. I will try to disable auto upload to see what it does, I'm coming back to you.

[rikschennink]

Hi!

It's explained on the server page in the docs.

So this would be the default:

<FilePond allowMultiple={true}
          maxFiles={3}
          server={{
              load: "load.php?id="
          }}>
</FilePond>

You could try using a custom function and getting the file with fetch. I haven't tested this but it should work.

<FilePond allowMultiple={true}
          maxFiles={3}
          server={{
              load: (uniqueFileId, load, error) => {
                  fetch(uniqueFileId)
                    .then(res => res.blob())
                    .then(load)
                    .catch(error)
              }
          }}>
</FilePond>

[LivioGama]

Thanks a lot for your patience !
Unfortunately it is not working, the load function is never called. Here is my ready to use example :

<FilePond allowMultiple={false}
    server={{
        load: (uniqueFileId, load, error) => {
            console.log('TEST')
            fetch(uniqueFileId)
                .then(res => res.blob())
                .then(load)
                .catch(error)
        }
    }}>
    <File source='http://liviogama.com/img/livio.png'/>
</FilePond>

No "TEST" is shown in the log. Note that if I add a process function, and drop a file, it will upload successfully !

[LivioGama]

Actually I tried :

<FilePond allowMultiple={false}
                    server={{
                      process: this.handleProcessing,
                      revert: this.handleRevert,
                      fetch: this.handleFetch,
                      restore: this.handleRestore,
                      load: this.handleLoad
                    }}>
            <File source='http://liviogama.com/img/livio.png'/>
</FilePond>

And only the process method is called :(

[rikschennink]

@LivioGama Sorry for the confusion, the type="local" needs to be present on the File for the load method to be called.

[LivioGama]

Even with type="local" no other method than process are called for me. I'm using the latest "react-filepond": "^2.0.4" version

[rikschennink]

@LivioGama Just publish version 2.0.6 of the react adapter and version 1.4.0 of the core library. Please let me know if this fixes the issue.

[ivaqmo123]

@rikschennink - please your help on this.

1. I am using something similar to below code as recommended above. Load method is called, however image is not loaded in preview mode. It only shows image name in a box with dark background .
2. When I click in "Remove" for an initial file, I realized that server.revert method is not called, please would you tell why?
3. Is there any way we can allow users to download initial files from filepond component?

<FilePond allowMultiple={true} maxFiles={3} server={{ revert: this.handleRevert, load: this.handleLoad }} > <File key={123} source={imageURL1} origin='local' /> <File key={456} source={imageURL2} origin='local' /> </FilePond>

[rikschennink]

Hi!

1. Does your load method return the file data?

2. Revert is only called for temporary files, you can set up a custom remove method in true onremovefile callback.

3. There’s currently no default functionality for this, but maybe a click handler on the filepond root will give you the target element clicked and you can use that to get the matching file from FilePond and serve that file to the user as a download?

[ivaqmo123]

hi @rikschennink , pls your help with question #1 & #3

1.- Yes, it does.
2.- Got it.
3.- Just added onClick={this.handleClick} as property in FilePond, and defined the handler below but it is not called. Any suggestion please?

handleClick = e => {
console.log(e);
}

[rikschennink]

1. No errors in dev console? If not, can you past the load function here?

2. Great!

3. Then I'm not sure, maybe you can use JavaScript addEventListener to catch events that bubble up the DOM tree.

[mverstegen]

Hi there, is there an example for the jquery adapter as well? I can't get the image fetched after dragdropping it form google image search for instance.

[rikschennink]

@mverstegen Please post questions to StackOverflow

[m-nur]

Does anyone solve this issue?

[dashawk]

Have you tried implementing the load API end point? It basically loads the file and returns it from the server, you can find and example here: https://github.com/pqina/filepond-boilerplate-php/blob/master/public/api/index.php#L45

I'm thinking of making this optional ( as when the file is accessible from the browser it's unnecessary ).

i also have this issue, but the given link is not even public.

[rikschennink]

@dashawk The link indeed doesn't work.

Should be: https://github.com/pqina/filepond-server-php/blob/master/index.php

[akshay-1707]

@rikschennink The image is not getting preview

code

<FilePond
style={{ marginTop: "10px" }}
files={files}
allowMultiple={true}
allowReorder={true}
onupdatefiles={setFiles}
onreorderfiles={setFiles}
onremovefile={(error, file) =>
deleteRoomTypeImgs(file.filename)
}
imagePreviewHeight="125px"
credits={("", "")}
labelIdle='Drag and Drop your files or Browse'
server={{
load: "https://picsum.photos/200/300",
}}
/>

tried this code also still facing same issue

        <FilePond
            style={{ marginTop: "10px" }}
            files={files}
            allowMultiple={true}
            allowReorder={true}
            onupdatefiles={setFiles}
            onreorderfiles={setFiles}
            onremovefile={(error, file) =>
              deleteRoomTypeImgs(file.filename)
            }
            imagePreviewHeight="125px"
            credits={("", "")}
            type="local"
            labelIdle='Drag and Drop your files or <span class="filepond--label-action">Browse</span>'
            server={{
              load: "https://picsum.photos/200/300",
            }}
          >
            <File source="https://picsum.photos/200/300" type="local" />
          </FilePond>

[akshay-1707]

@LivioGama is your issue resolved? i m still facing the same issue