Rebuild image/file widget UI with Filepond

[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:

• Multiple file upload (#1032)
• Drag and drop upload (#1032)
• Upload image via URL (#1475)
• Rendered thumbnails (#946) The image preview plugin 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 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!!

[matbrgz]

At this moment is impossible to upload (or select) multiple images at Netlify CMS?

[mb21]

I could take a look at this... basically it's about putting react-filepond into netlify-cms-widget-image? Do we still need to useNetlifyCmsWidgetFile.withFileControl then for some reason, or...?

[mb21]

Had a closer look... I'm unsure how the filepond widget should interact with media_libraries. Should this be implemented as a new packages using the same API as the cloudinary and uploadcare media_libraries, or should this go into netlify-cms/.../MediaLibrary?

[erquhart]

This would be a widget, not a media library - I would suggest starting the effort by creating a standalone widget, that will help keep things simple.

_{Sent with GitHawk}

[mb21]

Thanks @erquhart, I'll give it a try as a simple widget then that doesn't call props.onOpenMediaLibrary or something, but I suppose I should call props.onAddAsset then, but that should be given an AssetProxy, but seems the netlify-cms-core package doesn't publicly expose anything like that? What do I write instead of:

import { createAssetProxy } from 'netlify-cms-core/src/ValueObjects/AssetProxy';

[mb21]

okay... I got this started as a separate repo: https://github.com/mb21/netlify-cms-widget-image-filepond

What I get from filepond is a js native File object, which is good... but I'm still unsure what to do about the AssetProxy (since it's not exported and dependds on some config, see comment above).

I figured out that calling onAddAsset dispatches a ADD_ASSET redux action, which is reduced in reducers/medias.js, but it's unclear to me whether this also persists the file in git or not (doesn't say so in architecture.md)...

[erquhart]

I was thinking you would take a similar approach to the image/file widgets, but they defer uploads to the media library, whereas Filepond is sort of both. Except it's not, it isn't really made for displaying a library of images, and I just learned its pretty rigid on styling. With that in mind, we need take another look at whether this is really viable.

I never played with it outside of the demo on the Filepond site - let me know if you think there are ways around these perceived blockers.

[mb21]

Yes, we don't really need the file uploading aspects of Filepond (it does things like chunked uploads etc. if the server supports), since we want to commit to git anyway.

Also a potential negative is that the Filepond folks will probably never add more advanced image manipulation things, since they want you to upsell to Doka, which integrates with Filepond and supports "crop aspect ratios, resizing, rotating, cropping, and flipping images." I haven't evaluated other image selection/manipulation libraries though, so maybe Filepond is still the best for the basic things we need the most urgently.

Either way, if I understood the code correctly, everything that's related to multiple files (also the GUI aspects) are in the media library part of the code? So if we want multiple file uploads, reordering of files or batch processing, we would have to not only change the image/file widget but also the whole media library, correct? For our projects, those use cases are currently not needed though. We just want to make sure the users cannot upload 10MB images which are then included in the statically generated website. So my vote would be to not let the perfect be the enemy of the good, and focus on handling single images for now. Then we can keep the current media library for now.

We could still use Filepond, just setting multiple: false for now. Unless there is an alternative to FIlepond? though I couldn't find anything better with a quick google. For that approach to work, netlify-cms-core should export a function to create an AssetProxy, or what architecture did you have in mind?

[rikschennink]

@mb21 Just to quickly chime in about the Doka and upsell part. I will confirm that these features will most likely not land in FilePond. The most important reason for not adding advanced image editing features to FilePond is that I wanted to offer a complete file upload library, image editing in my opinion was simply not a part of that, because then why not also add audio/video editing, text editing, etc. Offering Doka as a premium addon was simply a great way to finance what I love doing (building webcomponents).

With FilePond you currently can do auto-cropping / auto-resizing / auto-color-filtering / adding watermarks and other decorative text and imagery / changing file format / compression / and some other stuff. It's quite a lot already.

You can use the image-edit plugin to integrate with another third party image editors if you wish.

[erquhart]

@rikschennink agreed, I’m a big proponent of tools doing one thing well. Can you speak to the question of customization or bringing our own UI? We’re more or less looking to use FilePond as an engine - any way to pull that off currently?

_{Sent with GitHawk}

[mb21]

Not sure what you mean with "engine" @erquhart... but I guess the question is whether filepond is a good fit to display a library of images (like a mini-version of Adobe Bridge, I guess), or whether we would be better advised to implement that part ourselves, and set multiple: false, or were you driving at something else?

[rikschennink]

@erquhart it's not very customisable, certainly not an option if you simply want to drop the entire UI, you'd be wasting a lot of kilobytes :-)

I plan to split this all up (core | upload logic | ui) in a future version.

[erquhart]

Yeah splitting would be awesome. We have similar work to do in the CMS, not a simple task.

@mb21 I meant what @rikschennink said, using core functionality separately from the filepond UI.