Media library UI

[chadfawcett]

- Do you want to request a feature or report a bug?
feature

- What is the current behavior?
If you want to use an image that is already on the site, you must upload the image again when creating a new collection item. If the name of the image is the same, it overwrites the existing images (see #247)

- What is the expected behavior?
Users should be able to choose from images that have already been uploaded to the website. The UI could display images from the media_folder and allow for selecting them.

[erquhart]

@chadfawcett agreed, this would be a great feature.

[indysigner]

Great feature request, I mentioned a Media Library UI at their CMS redesign discussion as well (#180 (comment)). It's also worth noting, that the Media Library deserves its own link in the primary navigation of the CMS as well as a way to upload multiple images at once. :-)

[tech4him1]

If we were to do this, I am wondering if the entry creation implementation should create a separate commit for each file added to a post instead of committing them all in one. (A good side effect of this would be that it would also make the GitLab implementation (#57) easier.)

[tech4him1]

While we are already working on media, it might be a good idea to consider the upload location implementation. Some flat-file CMSs and static site generators have found it better to place the media uploaded to a post in the same folder as the post itself, but some have kept media in a separate media_folder. There are benefits and downsides to each method of course, and adding a "Media Library" feature may influence the decision as well.

[erquhart]

@tech4him1 that all depends on your build tool. If you have other implementation questions, feel free to hit us up on Gitter!

[erquhart]

@carlflor this is a hot issue for the community, curious if you're up for kickstarting it? It's less about UI design and more about allowing images and assets to be managed directly, both on upload and when including an image/asset in an entry.

It's closely tied to #432, which is about allowing images and assets to be stored in third party services.

Let me know if you're interested!

[carlflor]

@erquhart Okay. I'm still in the process of reviewing the code structure, but I can start working on this. :)

[erquhart]

@carlflor awesome! I'll write up some high level considerations in a bit.

[erquhart]

Below are some points on how the media library implementation could work.

Overview

CMS users should be able to view, upload, and delete assets (images and other files) through a dedicated UI. The initial implementation should come in the form of an overlay or dialog to avoid integration concerns with the current UI.

Configuration

• Configuration should not be impacted.
• Feature should be fully backwards compatible with existing configurations.

Points of Access

• The overlay should be shown when clicking a file or image widget in the entry editor.
• The overlay should be accessible through a simple button in the top navigation.

Implementation

Overlay

• The React Toolbox Dialog component should be used for the overlay itself.
• A simple text title such as "Assets" should be displayed in the lop left corner, with the same styling as collection titles in the Collections page.

Bottom Bar

• The bottom bar in the Dialog component should contain the following buttons:
  • Delete: Positioned to far left, disabled when no asset is selected.
  • Add New: Positioned next to Delete, launches file picker on click.
  • Insert: Positioned to far right, disabled when no asset is selected.
    • Hidden unless media library was launched by clicking a file/image widget.
  • Cancel: Positioned next to Add New, closes the Media Library overlay.

Search

• A search bar should be provided, centered in the top of the overlay.
• The search bar should only query against filenames.
• Displayed assets should update when the search field value changes.
• Search results should begin updating after two characters are typed.
• Search update should be debounced by ~500ms.

Assets List

• The React Toolbox Table component should be used for the list of assets.
• Columns should include: "Filename", "Extension", "Created", and "Updated".
• Columns should be sortable by clicking a column header.
• Clicking a row selects the asset in that row. The user can then insert or delete using the bottom bar buttons.
• The data cells in the rows should not be interactive, clicking only selects the row.
• Only one row may be selected at a time (multi-select should be a future improvement)

Drag and Drop

• Images and files should be uploaded when dragged and dropped to the overlay.
• The UI should update when an image/file is being dragged over the overlay.
• See the current file/image widget dragging behavior for reference.
• Only one file/image may be dragged and dropped at a time.

File/Image Widgets

• Dragging images or files to the image/file widgets should still work.
• On click, the media library overlay should open.

Top Nav Button

• The CMS top nav should include an suitable icon button between the home and "plus" buttons.
• On click, the media library overlay should open.
• Insert button should not be visible when the media library is launched this way.

Future improvements

• Assets should be stored in collections, similar to the currently used content collections.
• Asset collections should be visible on the main CMS UI, and searchable along with content through the primary search mechanism.

---

Feedback welcome! @carlflor is looking into this 🎉, but it's a big undertaking, so please speak up if you'd like to help out!

cc/ @biilmann @Benaiah @neutyp

[erquhart]

This is now underway, WIP PR coming shortly.

[dopry]

I've been poking around at some existing react media libraries and file managers. I've found the following which may be good for inspiration or may have components we can incorporate.

Prior Art

• Eureka - full featured, but not very attractive. multiple media sources, search, folder navigation, multiple layouts.
• Scotch.io Media Library - an okay example for a developer, but probably not a good fit.
• React Keyed File Browser - looks really nice. The interface and components look easy to work with.
• React File Explorer - there isn't a demo, but may be worth further investigation.

Alternatives

I've started some wires for an sidebar folder nav style interface as a possible alternative to the current modal centric approach, that may work better for drag and drop workflows, Netlify CMS -
Media Wires on Lucid Chart If you launch it in 'present' mode you should get the basic idea. If people like this as a possible next step I can flesh out the post workflows.

I'm going to try to touch up the existing UX a bit now to make it work sooner rather than later... I'm not sure I'm adept enough at React to start implementing UX from scratch.

[ziburski]

I posted some thoughts and mockups on the media library UI over here.

[erquhart]

@dopry although assets are obviously files, we want to try to abstract away from making this a folder tree interface as much as possible.

Your screengrab in Lucid is exactly what I meant in the Future Improvements section of my requirements comment above - having assets in collections, just like other content. I'm thinking we'll stay away from nesting collections, but otherwise it looks like we're on the same page.