-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Description
Is your feature request related to a problem? Please describe.
We've (I've?) been waiting for Filepond to put it's source out. It's always been OSS, but only built code was provided in GitHub. As of today, 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 ([Media Library] Allow uploading multiple images at once #1032)
- Drag and drop upload ([Media Library] Allow uploading multiple images at once #1032)
- Upload image via URL (Uploading image by URL #1475)
- Rendered thumbnails (Media library needs rendered thumbnails #946)
The image preview plugin can provide thumbnails when an image is uploaded. - Image validation (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 (How to auto rename the file name of uploaded file or image? #857)
The file rename plugin 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!!