Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pqina/svelte-filepond
🔌 A handy FilePond adapter component for Svelte
https://github.com/pqina/svelte-filepond
file filepond image-processing svelte upload
Last synced: 7 days ago
JSON representation
🔌 A handy FilePond adapter component for Svelte
- Host: GitHub
- URL: https://github.com/pqina/svelte-filepond
- Owner: pqina
- License: mit
- Created: 2020-09-07T09:26:09.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-28T14:02:21.000Z (10 months ago)
- Last Synced: 2024-04-14T05:58:54.723Z (7 months ago)
- Topics: file, filepond, image-processing, svelte, upload
- Language: JavaScript
- Homepage:
- Size: 204 KB
- Stars: 237
- Watchers: 5
- Forks: 10
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Svelte FilePond
Svelte FilePond is a handy adapter component for [FilePond](https://pqina.nl/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/svelte-filepond/blob/master/LICENSE)
[](https://www.npmjs.com/package/svelte-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-svelte-filepond)
---
This package needs PostCSS and Svelte Preprocess, see the example folder for the required `postcss.config.js` and `rollup.config.js` changes. You can run `npm install` in the example folder and it will set up the example project.
Installation:
```bash
npm install svelte-filepond filepond --save
```
Usage:
```svelte
@import 'filepond/dist/filepond.css';
@import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
import FilePond, { registerPlugin, supported } from 'svelte-filepond';
// 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'
// Register the plugins
registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);
// a reference to the component, used to call FilePond methods
let pond;
// pond.getFiles() will return the active files
// the name to use for the internal file input
let name = 'filepond';
// handle filepond events
function handleInit() {
console.log('FilePond has initialised');
}
function handleAddFile(err, fileItem) {
console.log('A file has been added', fileItem);
}
```
[Read the docs for more information](https://pqina.nl/filepond/docs/patterns/frameworks/svelte/)