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

First of all thanks for this component, it’s great!

On the React version, when uploading a picture, I get the preview and everything works great, then I store in my resource the picture url. But then when I consult my resource, I try to set up the initial state with a file, but somehow I can’t get the preview of that image url.

My code :

<FilePond allowMultiple={false} server={{process: this.handleProcessing.bind(this)}}>
    <File source='http://liviogama.com/img/Pioneer-CDJ2000-Nexus.png' type='local'/>
</FilePond>

Result : capture d ecran 2018-04-21 a 02 07 51

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 24

Most upvoted comments

@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.

screen shot 2018-04-26 at 14 11 57

rikschennink on Apr 26, 2018

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

rikschennink on Apr 27, 2018

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 on Apr 27, 2018