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: 5 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 (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-12-28T14:02:21.000Z (12 months ago)
• Last Synced: 2024-10-30T06:56:51.664Z (about 2 months ago)
• Topics: file, filepond, image-processing, svelte, upload
• Language: JavaScript
• Homepage:
• Size: 204 KB
• Stars: 252
• 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.

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

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

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