{"id":13456311,"url":"https://github.com/pqina/react-filepond","last_synced_at":"2025-06-19T03:49:25.880Z","repository":{"id":40293675,"uuid":"124406046","full_name":"pqina/react-filepond","owner":"pqina","description":"🔌 A handy FilePond adapter component for React","archived":false,"fork":false,"pushed_at":"2024-12-16T14:15:00.000Z","size":2716,"stargazers_count":1901,"open_issues_count":36,"forks_count":96,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-19T19:40:10.487Z","etag":null,"topics":["file","filepond","image-processing","react","upload"],"latest_commit_sha":null,"homepage":"https://pqina.nl/filepond","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pqina.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["https://www.buymeacoffee.com/rikschennink"]}},"created_at":"2018-03-08T14:52:44.000Z","updated_at":"2025-03-16T18:08:49.000Z","dependencies_parsed_at":"2024-06-18T12:19:48.036Z","dependency_job_id":"fd384405-2b7b-4f66-8fa0-78fb371bc671","html_url":"https://github.com/pqina/react-filepond","commit_stats":{"total_commits":99,"total_committers":10,"mean_commits":9.9,"dds":0.3939393939393939,"last_synced_commit":"3af941f87cf86afa6dcf5553c8fb566c00b7f1d9"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pqina%2Freact-filepond","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pqina%2Freact-filepond/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pqina%2Freact-filepond/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pqina%2Freact-filepond/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pqina","download_url":"https://codeload.github.com/pqina/react-filepond/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245243389,"owners_count":20583615,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["file","filepond","image-processing","react","upload"],"created_at":"2024-07-31T08:01:19.661Z","updated_at":"2025-03-24T09:31:57.775Z","avatar_url":"https://github.com/pqina.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/rikschennink","https://www.buymeacoffee.com/rikschennink/"],"categories":["JavaScript"],"sub_categories":[],"readme":"# React FilePond\n\nReact 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.\n\n[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/pqina/react-filepond/blob/master/LICENSE)\n[![npm version](https://badge.fury.io/js/react-filepond.svg)](https://www.npmjs.com/package/react-filepond)\n![npm](https://img.shields.io/npm/dt/react-filepond)\n\n---\n\n[\u003cimg src=\"https://github.com/pqina/filepond-github-assets/blob/master/header.svg\" alt=\"FilePond\"/\u003e](https://www.buymeacoffee.com/rikschennink/)\n\n[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/)\n\n---\n\n### Core Features\n\n*   Accepts **directories**, **files**, blobs, local URLs, **remote URLs** and Data URIs.\n*   **Drop files**, select on filesystem, **copy and paste files**, or add files using the API.\n*   **Async uploading** with AJAX, or encode files as base64 data and send along form post.\n*   **Accessible**, tested with AT software like VoiceOver and JAWS, **navigable by Keyboard**.\n*   **Image optimization**, automatic image resizing, **cropping**, and **fixes EXIF orientation**.\n*   **Responsive**, automatically scales to available space, is functional on both **mobile and desktop devices**.\n\n[Learn more about FilePond](https://pqina.nl/filepond/)\n\n\u003cimg src=\"https://github.com/pqina/filepond-github-assets/blob/master/filepond-animation-01.gif\" width=\"370\" alt=\"\"/\u003e\n\n\n---\n\n### Also need Image Editing?\n\n**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.\n\n[Learn more about Pintura](https://pqina.nl/pintura/?ref=github-react-filepond)\n\n\u003cimg src=\"https://github.com/pqina/filepond-github-assets/blob/master/filepond_pintura.gif?raw=true\" width=\"600\" alt=\"\"/\u003e\n\n---\n\n\n## Installation\n\n```bash\nnpm install react-filepond filepond --save\n```\n\nHooks:\n\n```jsx\nimport React, { useState } from 'react'\nimport ReactDOM from 'react-dom'\n\n// Import React FilePond\nimport { FilePond, registerPlugin } from 'react-filepond'\n\n// Import FilePond styles\nimport 'filepond/dist/filepond.min.css'\n\n// Import the Image EXIF Orientation and Image Preview plugins\n// Note: These need to be installed separately\n// `npm i filepond-plugin-image-preview filepond-plugin-image-exif-orientation --save`\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\nregisterPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview)\n\n// Our app\nfunction App() {\n  const [files, setFiles] = useState([])\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cFilePond\n        files={files}\n        onupdatefiles={setFiles}\n        allowMultiple={true}\n        maxFiles={3}\n        server=\"/api\"\n        name=\"files\" /* sets the file input name, it's filepond by default */\n        labelIdle='Drag \u0026 Drop your files or \u003cspan class=\"filepond--label-action\"\u003eBrowse\u003c/span\u003e'\n      /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n\nComponent:\n\n```jsx\nimport React, { useState } from 'react'\nimport ReactDOM from 'react-dom'\n\n// Import React FilePond\nimport { FilePond, registerPlugin } from \"react-filepond\";\n\n// Import FilePond styles\nimport \"filepond/dist/filepond.min.css\";\n\n// Import the Image EXIF Orientation and Image Preview plugins\n// Note: These need to be installed separately\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\nregisterPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);\n\n// Our app\nclass App extends Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      // Set initial files, type 'local' means this is a file\n      // that has already been uploaded to the server (see docs)\n      files: [\n        {\n          source: \"index.html\",\n          options: {\n            type: \"local\"\n          }\n        }\n      ]\n    };\n  }\n\n  handleInit() {\n    console.log(\"FilePond instance has initialised\", this.pond);\n  }\n\n  render() {\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003cFilePond\n          ref={ref =\u003e (this.pond = ref)}\n          files={this.state.files}\n          allowMultiple={true}\n          allowReorder={true}\n          maxFiles={3}\n          server=\"/api\"\n          name=\"files\" /* sets the file input name, it's filepond by default */\n          oninit={() =\u003e this.handleInit()}\n          onupdatefiles={fileItems =\u003e {\n            // Set currently active file objects to this.state\n            this.setState({\n              files: fileItems.map(fileItem =\u003e fileItem.file)\n            });\n          }}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\n```\n\n[Read the docs for more information](https://pqina.nl/filepond/docs/patterns/frameworks/react/)\n\n[Live Demo on Code Sandbox](https://codesandbox.io/s/react-filepond-live-demo-iw9ri)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpqina%2Freact-filepond","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpqina%2Freact-filepond","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpqina%2Freact-filepond/lists"}