React-File Uploading with FilePond

2018, Dec 03    

FilePond is a relatively new JavaScript file upload libary.

Install FilePond

npm install filepond react-filepond --save

Import Project

import { FilePond } from 'react-filepond';
import 'filepond/dist/filepond.min.css';

Next step is to add the component to the HTML.

<FilePond
    onupdatefiles={(fileItems) => {
        this.setState({files: fileItems.map(fileItem => fileItem.file)});}}
    onDrop={this.handleUploadImages}/>

onupdatefiles will change our state.

constructor(props){
    super(props)
    this.state = {
        files: []
    }
}

By default FilePond only accepts one file. But if we want, we can increase this properties. We can see filepond component. If you want, you can use preview option. Install package and import it inside component.

npm install filepond-plugin-image-preview --save

Now, you can use this package.

Redux Firebase

import { FilePond, registerPlugin } from 'react-filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
registerPlugin(FilePondPluginImagePreview);

Resources:

Filepond Int.

If you wonder, how to use filepond inside to react project. You can check this link. And if you want to upload these file cloudinar. You can check this post.