{"library":"react-filepond","title":"FilePond Adapter for React","description":"React FilePond is an official adapter component that seamlessly integrates the FilePond file upload library into React applications. It provides a declarative API for handling file uploads, previews, and interactions, leveraging FilePond's core features such as drag-and-drop, image optimization, asynchronous uploading, and accessibility. The current stable version is 7.1.3, indicating a mature and actively maintained library. Release cadence typically aligns with FilePond's core library updates and React ecosystem changes. Key differentiators include its robust feature set for file handling, excellent user experience, and a plugin architecture that allows for extended functionalities like image previews and EXIF orientation correction. It's designed to be highly responsive and functional across both desktop and mobile devices, making it suitable for a wide range of web projects requiring advanced file upload capabilities.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-filepond"],"cli":null},"imports":["import { FilePond } from 'react-filepond';","import { registerPlugin } from 'react-filepond';","import 'filepond/dist/filepond.min.css';","import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { FilePond, registerPlugin } from 'react-filepond';\nimport 'filepond/dist/filepond.min.css';\nimport FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';\nimport FilePondPluginImagePreview from 'filepond-plugin-image-preview';\nimport 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';\n\n// Register the plugins (ensure they are installed via npm)\nregisterPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);\n\nfunction App() {\n  const [files, setFiles] = useState([]);\n\n  // Example of a dummy server endpoint for demonstration. \n  // In a real app, this would point to your backend upload API.\n  const serverEndpoint = process.env.REACT_APP_UPLOAD_API || '/api/upload'; \n\n  return (\n    <div className=\"App\" style={{ maxWidth: '500px', margin: '50px auto' }}>\n      <h1>Upload Files</h1>\n      <FilePond\n        files={files}\n        onupdatefiles={setFiles}\n        allowMultiple={true}\n        maxFiles={3}\n        server={serverEndpoint}\n        name=\"files\" \n        labelIdle='Drag & Drop your files or <span class=\"filepond--label-action\">Browse</span>'\n      />\n      {files.length > 0 && (\n        <div style={{ marginTop: '20px' }}>\n          <h3>Current Files:</h3>\n          <ul>\n            {files.map((fileItem, index) => (\n              <li key={index}>{fileItem.file.name}</li>\n            ))}\n          </ul>\n        </div>\n      )}\n    </div>\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);\n","lang":"typescript","description":"Demonstrates a basic FilePond setup in a React functional component, including state management for files, registering common plugins (Image EXIF Orientation, Image Preview), and configuring a server endpoint for uploads.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}