restoring state after page submit

[kmanley]

I have a page with the filepond control and some other controls.
Suppose the user uploads a couple files, and the filepond control shows them in green.
Then the user submits the page and there is a validation error, so all the controls are shown again.
My server knows the current state of the uploads; how can I update the filepond UI on the client to show the files that were uploaded previously?

[rikschennink]

It's best to use the files property for this when creating the FilePond instance. It can be configured to restore server files. See Setting initial files for instructions.

[kmanley]

Thanks, this is really helpful and it's working.
The only issue now is when I do this the file size is displayed as "1 KB". Is there a way I can just hide the file size for files that were previously uploaded before the page refresh?

[rikschennink]

@kmanley Good point, I'll run some tests on Monday, will get back to you on this (currently there's no way to disable file size).

There's no way to disabled file size ( you could hide it with CSS ). But file size should be returned by the server restore method. See answer below.

[rikschennink]

Hi @kmanley, does your server return the content-length, content-type and content-disposition headers? You can see them implemented in the handleRestore method of the PHP API.

FilePond uses these headers to determine what file it has just restored.

[CatCodeMe]

restor mutiple files failed ! Only echo the last file's name.

[rikschennink]

Hi @drtf, can you share your options object?

[CatCodeMe]

The circumstance like this.

1. create form： upload multiple file to server. And Database save file infos use JsonArray.
2. modify form: I want to use modal_info (springmvc) directly that with the JsonArray.
3. like this
   
4. The method server.load only return true. Because I just want to display "file_name" and
   delete the file_name. Then I can only update JsonArray...

[rikschennink]

@drtf You need to set the files as a property of the options object, addFiles is for adding new files ( files that the user has inputted elsewhere ).

FilePond.create({
    files: files,
    server: {
        load: 'xxxx/xxxx/load'
    }
});

[NicholasBertazzonAga]

@rikschennink And, is there a possibility to inject an already uploaded file wihout re-create the instance everytime?

Thanks.

[rikschennink]

I'm not sure I follow @NichAga

[NicholasBertazzonAga]

@rikschennink I have a modal, where there is my filepond instance. The problem is that I use the same modal for multiple insert/modify of multiple elements (for example X restaurants). Everytime I open the modal, I do a "removeFiles()" to remove all the files from the filepond instance, but I seems to not find a solution for insert some files of this X resturant that I previously uploaded. (When I open the modal, I do an ajax request to get the info of this resturant, and I also have all ther server ids of the images, of course)

[rikschennink]

I think setting the files property with your previously uploaded files should work.

[NicholasBertazzonAga]

The files property of the filepond instance?
Example, I have the filepond instance already created long time ago as this.filepond
I enter the modal, and I do a this.filepond.files = [...] ?

[rikschennink]

Yes, it should update the file list with the newly supplied files

[NicholasBertazzonAga]

Thanks @rikschennink , gonna try it this evening.

EDIT: it works! Thanks!

[gianpietro1]

Hi @rikschennink, what happened to the Setting initial files section? Thanks!

[rikschennink]

You can now find it here: https://pqina.nl/filepond/docs/api/instance/properties/#files

[gianpietro1]

You can now find it here: https://pqina.nl/filepond/docs/api/instance/properties/#files

Thanks!!