react-filepond
v7.1.3TypeScript
A handy FilePond adapter component for React
0/weekUpdated 1 years agoMITUnpacked: 25.6 KB
Published by PQINA
npm install react-filepondReact FilePond
React FilePond is a handy wrapper component for 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.
!npm
---
Buy me a Coffee / Use FilePond with Pintura / Dev updates on Twitter
---
$3
* 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.
---
$3
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.
---
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 (
onupdatefiles={setFiles}
allowMultiple={true}
maxFiles={3}
server="/api"
name="files" / sets the file input name, it's filepond by default /
labelIdle='Drag & Drop your files or Browse'
/>
)
}
`
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 (
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)
});
}}
/>
);
}
}``