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: 3 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 (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-25T19:24:33.000Z (10 months ago)
• Last Synced: 2024-10-07T13:06:17.745Z (4 months ago)
• Topics: file, filepond, image-processing, react, upload
• Language: JavaScript
• Homepage: https://pqina.nl/filepond
• Size: 2.59 MB
• Stars: 1,845
• Watchers: 16
• Forks: 90
• Open Issues: 33
• 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.

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/pqina/react-filepond/blob/master/LICENSE)

[![npm version](https://badge.fury.io/js/react-filepond.svg)](https://www.npmjs.com/package/react-filepond)

![npm](https://img.shields.io/npm/dt/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)