error 400

[mahyar33]

hi I want to preview my image from server in fileppond if the file was uploaded but I get 400 error this my code

<FilePond type={'remote'} allowMultiple={true} ref={ref => {  this.getRefFileComponent(ref) }}>
  {this.state.files.map(file => {
      return <File key={file}
        src={`${window.location.protocol}` + "//" + process.env.REACT_APP_BACKEND + file.address}/>
  })}
</FilePond>

[rikschennink]

Hi, see the entry on setting initial files in the react plugin docs: https://pqina.nl/filepond/docs/patterns/frameworks/react/

You have to tell FilePond that this is a local file (a file that has already been uploaded, otherwise, it will try to upload it again).

<FilePond>
    {/* a random file to load immidiately */}
    <File src="kitten.jpeg"/>

    {/* a temporary file already available on the server */}
    <File src="12345" origin="limbo"/>

    {/* a file already uploaded to the server */}
    <File src="12345" origin="local"/>

    {/* mock file data so the file is not downloaded from the server */}
    <File src="12345" origin="local" name="cat.jpeg" size={700100} type="image/jpeg"/>

    {/* add metadata */}
    <File src="12345" origin="local" metadata={{date:'2019-01-01T12:00'}}/>
</FilePond>

It will then try to load the file using the server.load endpoint, so probably need to configure that as well.

[mahyar33]

can you make an example plz? I want to show my image which I uploaded before now this is my code

 <File origin="local" key={'1'} src={`${window.location.protocol}` + "//" + process.env.REACT_APP_BACKEND + this.state.files[0].address}/>

which the src is a URL that my image uploaded there and I get the image from the server but also now I get the error so how can I show the image from the server?

[rikschennink]

Please format the code snippet.

[mahyar33]

sorry I did it

[rikschennink]

If the URL is always accessible you can configure your server like this:

const serverConfig = {
  load: (uniqueFileId, load, error) => {
    fetch(uniqueFileId)
      .then(res => res.blob())
      .then(load)
      .catch(error)
  }
  // additional server properties here
};
<FilePond server={ serverConfig }></FilePond>

[mahyar33]

No, the URL isn't always accessible my process is this: the user can upload some files with filepound in his profile after that when they goe back to his page if they uploaded their image before we show them so for each user, we have different URL and if the user didn't upload anything we don't show them anything I want to show their image with image preview in filepound if they had uploaded

[rikschennink]

If the profile image URL is accessible when the user is logged in, I guess the above fetch solution should work.

[mahyar33]

If the user hadn't uploaded anything before that We didn't have the URL for image in this situation can you suggest another solution?

[rikschennink]

In that situation you don't add the <File> tag and FilePond doesn't call the load method.

[mahyar33]

tnx and how can I call the load in serverConfig?

[rikschennink]

You don't, FilePond automatically calls it for every <File/> where the origin property is set to "local".

[mahyar33]

thanks, it works. I use axios in my project for handling HTTP request I couldn't find any solutions for res.blob() in axios would you mind implement load method with axios?

[mahyar33]

and now I have another problem with that solution if my user want to change the image they get error before that, I use this code for uploading the image first I get the image with this code

      this.fileComponent = ref
        this.fileComponent ? this.fileComponent._pond.on('addfile', (error, file) => {
            console.log(error,'>>>>',file)
            this.setState({form: {...this.state.form, documentList: file.file}})
        }) : null

and after I save to state I send it after the button submit but now I got an error when I want to change my image and upload a new one

[rikschennink]

You'll have to write the implementation yourself, I don't have any experience with Axios, but as it's quite a popular library there should be plenty of examples around.

Without any information about the error, there's no way for me to help you.

[mahyar33]

when a new image is uploaded it sends an http req to (the current path+ file names) how can I prevent this?

[rikschennink]

Is that when an image is dropped?

[mahyar33]

when I remove my previous image which I had gotten from the server and try to upload a new one exactly the time that I want to upload a new one

[rikschennink]

Can you post a code snippet?

[mahyar33]

this my filepond function:

<FilePond server={ serverConfig } ref={ref => {
his.getRefFileComponent(ref)
    }}>
  {this.state.files.address ?
<File
 src={"http://localhost:8080/" + this.state.files.address}
  key={1} origin={'local'}/> : null

   </FilePond>

this getRefFileComponenet function

 getRefFileComponent = (ref) => {
        this.fileComponent = ref
        this.fileComponent ? this.fileComponent._pond.on('addfile', (error, file) => {
            this.setState({form: {...this.state.form, documentList: file.file}})
        }) : null
    }

this is my serverConfig

const serverConfig = {
    load: (uniqueFileId, load, error) => {
        fetch(uniqueFileId, {
            credentials: 'include'
        })
            .then(res => {
                    return res.blob()
                }
            )
            .then(load)
            .catch(error)
    }
    // additional server properties here
};

[rikschennink]

There are some other problems with file diffing, so I'm working on a fix version, hopefully, it'll resolve this issue as well.

[rikschennink]

I've updated the React component to version 5.0.0 and updated FilePond to 3.1.0, please note that FilePond is now a peerDependency.

I have added the onupdatefiles callback which you can use to sync up the files list inside FilePond with the one in your component. I've extensively tested this, but still, there's a chance it might cause trouble in some situations, happy to help out if needed.

See docs for detailed information on changes: https://pqina.nl/filepond/docs/patterns/frameworks/react/