https://github.com/pqina/react-filepond
🔌 A handy FilePond adapter component for React
https://github.com/pqina/react-filepond
file filepond image-processing react upload
Last synced: 2 months ago
JSON representation
🔌 A handy FilePond adapter component for React
- Host: GitHub
- URL: https://github.com/pqina/react-filepond
- Owner: pqina
- License: mit
- Created: 2018-03-08T14:52:44.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-12-16T14:15:00.000Z (5 months ago)
- Last Synced: 2025-03-19T19:40:10.487Z (2 months ago)
- Topics: file, filepond, image-processing, react, upload
- Language: JavaScript
- Homepage: https://pqina.nl/filepond
- Size: 2.59 MB
- Stars: 1,901
- Watchers: 15
- Forks: 96
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - pqina/react-filepond - 🔌 A handy FilePond adapter component for React (JavaScript)
README
# React FilePond
React FilePond is a handy wrapper component for [FilePond](https://github.com/pqina/filepond), a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
[](https://github.com/pqina/react-filepond/blob/master/LICENSE)
[](https://www.npmjs.com/package/react-filepond)
---
[
](https://www.buymeacoffee.com/rikschennink/)
[Buy me a Coffee](https://www.buymeacoffee.com/rikschennink/) / [Use FilePond with Pintura](https://pqina.nl/pintura/?ref=github-filepond) / [Dev updates on Twitter](https://twitter.com/rikschennink/)
---
### Core Features
* Accepts **directories**, **files**, blobs, local URLs, **remote URLs** and Data URIs.
* **Drop files**, select on filesystem, **copy and paste files**, or add files using the API.
* **Async uploading** with AJAX, or encode files as base64 data and send along form post.
* **Accessible**, tested with AT software like VoiceOver and JAWS, **navigable by Keyboard**.
* **Image optimization**, automatic image resizing, **cropping**, and **fixes EXIF orientation**.
* **Responsive**, automatically scales to available space, is functional on both **mobile and desktop devices**.
[Learn more about FilePond](https://pqina.nl/filepond/)
---
### Also need Image Editing?
**Pintura the modern JavaScript Image Editor** is what you're looking for. Pintura supports setting **crop aspect ratios**, **resizing**, **rotating**, **cropping**, and **flipping** images. Above all, it integrates beautifully with FilePond.
[Learn more about Pintura](https://pqina.nl/pintura/?ref=github-react-filepond)
---
## Installation
```bash
npm install react-filepond filepond --save
```
Hooks:
```jsx
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
// Import React FilePond
import { FilePond, registerPlugin } from 'react-filepond'
// Import FilePond styles
import 'filepond/dist/filepond.min.css'
// Import the Image EXIF Orientation and Image Preview plugins
// Note: These need to be installed separately
// `npm i filepond-plugin-image-preview filepond-plugin-image-exif-orientation --save`
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css'
// Register the plugins
registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview)
// Our app
function App() {
const [files, setFiles] = useState([])
return (
)
}
```
Component:
```jsx
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
// Import React FilePond
import { FilePond, registerPlugin } from "react-filepond";
// Import FilePond styles
import "filepond/dist/filepond.min.css";
// Import the Image EXIF Orientation and Image Preview plugins
// Note: These need to be installed separately
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";
// Register the plugins
registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);
// Our app
class App extends Component {
constructor(props) {
super(props);
this.state = {
// Set initial files, type 'local' means this is a file
// that has already been uploaded to the server (see docs)
files: [
{
source: "index.html",
options: {
type: "local"
}
}
]
};
}
handleInit() {
console.log("FilePond instance has initialised", this.pond);
}
render() {
return (
(this.pond = ref)}
files={this.state.files}
allowMultiple={true}
allowReorder={true}
maxFiles={3}
server="/api"
name="files" /* sets the file input name, it's filepond by default */
oninit={() => this.handleInit()}
onupdatefiles={fileItems => {
// Set currently active file objects to this.state
this.setState({
files: fileItems.map(fileItem => fileItem.file)
});
}}
/>
);
}
}
```
[Read the docs for more information](https://pqina.nl/filepond/docs/patterns/frameworks/react/)
[Live Demo on Code Sandbox](https://codesandbox.io/s/react-filepond-live-demo-iw9ri)