Skip to content
This repository was archived by the owner on Mar 18, 2025. It is now read-only.

Commit ff00c11

Browse files
committed
Add plugins info for FilePond
1 parent 8dfa2e7 commit ff00c11

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

docs/components/filepond.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,3 +112,27 @@ specify an option callbacks, such as `server` that you need to:
112112
</x-slot>
113113
</x-file-pond>
114114
```
115+
116+
## Plugins
117+
118+
The `file-pond` component doesn't make use of any FilePond plugins itself, but you can easily install and implement your own plugins.
119+
120+
First, install the necessary JavaScript and CSS required by the plugin. A list of plugins [can be found here](https://pqina.nl/filepond/plugins.html).
121+
122+
With the plugin's assets installed, you can make use of the `plugins` slot to initialize the plugin. The following example shows setting up the image
123+
preview FilePond Plugin.
124+
125+
```html
126+
<x-file-pond wire:model="avatar">
127+
<x-slot name="plugins">
128+
FilePond.registerPlugin(FilePondPluginImagePreview);
129+
</x-slot>
130+
</x-file-pond>
131+
```
132+
133+
If you're into using CDNs, you can add these lines to your layout file for the above example:
134+
135+
```html
136+
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
137+
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
138+
```

0 commit comments

Comments
 (0)