Get data from filepond object instance

Question

I have a submit form in my React project, where I'm using the filepond API, so users can submit files to the form

I'm just using the standard FilePond component taken from the documentation so far.

   <FilePond ref={ref => this.pond = ref}
                      allowMultiple={true} 
                      maxFiles={4} 
                      oninit={() => this.handleInit() }
                      onupdatefiles={(fileItems) => {
                          // Set current file objects to this.state
                          this.setState({
                              files: fileItems.map(fileItem => fileItem.file)
                          });
                      }}>

                {/* Update current files  */}
                {this.state.files.map(file => (
                    <File key={file} src={file} origin="local" 
                 />
                ))}

            </FilePond>

I'm sending the entire request to a backend REST server in java, and therefore I want to send along to types of information, the data (base64 encoded), and the extension of the file.

I do this by creating an array of objects in my request

  result: this.state.files.map(file => ({
            "file": this.findFileTypeHandler(file.name), 
            "data": this.encodeFileHandler(file)
        }))
    }

in my encodeFileHandler, I need a way to convert the data to base64, but I can't see a property, that has the raw data, on the file object.

Is there a way to access it, or does anybody have a better alternative I could use?

Braca · Accepted Answer · 2019-01-25T16:39:04.707

5

Try File encode plugin for filepond, it's doing exactly what you need:

... it encodes a dropped file as a base64 string and stores the string in a hidden input field as a JSON string. It uses a JSON string so it can also add the file size, type, name and metadata.

Usage(React):
Import the plugin code:

import FilePondPluginFileEncode from 'filepond-plugin-file-encode';

Register the plugin:

registerPlugin(FilePondPluginFileEncode);

More details here

edited Jan 25 '19 at 16:39

answered Jan 25 '19 at 16:01

Braca

2,685
17
28

Should i just add the property inside my react project? – Kristoffer Tølbøll Jan 25 '19 at 16:05

score 4 · Answer 2 · answered May 20 '21 at 13:28

For whose who are looking for a way to get file blob out of a FilePond object, here is what worked for me. I kept a reference to FilePond object like this:

pond = FilePond.create(
    document.querySelector('#file'), {
        allowMultiple: true,
        instantUpload: false,
        allowProcess: false
    });

And then used pond.getFiles() method to get FilePond files' object. This is different from blob file objects,

A FilePond File is not the same a JavaScript File or Blob. The FilePond File is a wrapper around a JavaScript file object. FilePond docs

However, you can use file property to get the blob file like this,

pondFiles = pond.getFiles();
for (var i = 0; i < pondFiles.length; i++) {
    // todo get file blob with pondFiles[i].file
}

Get data from filepond object instance

2 Answers2