Skip to content

Rebuild image/file widget UI with Filepond #2243

@erquhart

Description

@erquhart

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:

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!!

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions