Rebuild image/file widget UI with Filepond
- Dominant language
- JavaScript
- Stars
- 19.4k
- Forks
- 3.1k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 9
Description
**Is your feature request related to a problem? Please describe.**
We've (I've?) been waiting for [Filepond](https://pqina.nl/filepond/) to put it's source out. It's always been OSS, but only built code was provided in GitHub. [As of today](https://github.com/pqina/filepond/issues/62#issuecomment-4761720650), their full source is out, opening the door for Netlify CMS to use the Filepond UI in the image and file widgets!!
**Why Filepond?**
Handling file uploads in the browser is a distinct problem space, one where I'd really like Netlify CMS to not have to reinvent the wheel. Filepond is the only OSS Solution I'm aware of that provides an incredible UI/UX, comes as a "batteries included" solution (with a React wrapper), and **only handles the file upload**. It's basically a UI/behavior provider for the `input` element. Plus it has plugins!
**Describe the solution you'd like**
This issue specifically targets updating the image and file widgets to use Filepond, which will be instrumental in solving a number of concerns.
Filepond supports the following feature requests out of the box or via plugins:
- **Multiple file upload (#1032)**
- **Drag and drop upload (#1032)**
- **Upload image via URL (#1475)**
- **Rendered thumbnails (#946)**
The [image preview plugin](https://pqina.nl/filepond/docs/patterns/plugins/image-preview/) can provide thumbnails when an image is uploaded.
- **Image validation (#1322)**
Filepond has plugins for validating images by dimensions, and any file by file size. Cumbersome validation, eg. aspect ratio, can also be handled via custom validation function.
- **Rename image/file on upload (#857)**
The [file rename plugin](https://pqina.nl/filepond/docs/patterns/plugins/file-rename/) facilitates this - it doesn't completely resolve it, but does simplify things a tad by only editing the filename and not the extension.
The following noteworthy functionality also comes with Filepond:
- See preview of image immediately before full upload begins
- Cancel upload in progress
- Crop images to ratio
- Drag/drop a folder of images/files (images/files filtered from folder)
- Copy/paste files
- Force resize images to fit in a box or specific dimensions
- JPEG compression
- Convert to JPEG or PNG
- Base64 encoding
- Prevents browser from loading images that are accidentally dropped on the window itself
Finally, Filepond provides an API that we can hook into for basic client side image editing. They demo this functionality on their site using their amazing (but closed source) Doka.js editor, but the same API can allow us to provide basic controls for things like resizing.
Hats off to @rikschennink for this fantastic resource!!
Contributor guide
Assessment
This issue has not been assessed yet.