Netlify-cms: Media Library empty when image or file widget has no existing media item selected

[Undistraction]

Describe the bug

When adding a media item to an image or file widget that does not already have a media item assigned when the collection item was loaded, the media library displays the message:

No assets found

…and the media library modal contains no media at all.

• It is possible to upload a new media item and save the item, then when pulling those changes and reopening the media library for that widget, all media items from the media library _will_ be displayed.
• Any file or image widget that already has an image selected will display the media library correctly.
• Clicking on the 'media library' button in the top-menu opens the media library successfully with all media present.
• If at least one file or image widget within a collection item has a media item selected when the collection item is opened, all file or image widgets will see the fully populated media library.
• If no file or image widgets within a collection item have a media item selected when the collection item is opened, all file or image widgets will see an empty media library.

To Reproduce

1. Set up relative paths for a collection:

folder: `src/content/downloads`,
media_folder: `../../../static/downloads/`,

1. Create a new media item.
2. Edit any image widget within.

Expected behavior
It should not make any difference if an image widget has an image assigned or not, it should always show all images within the media library.

Applicable Versions:

• Netlify CMS version: @[email protected]
• Git provider: Gitlab Self-hosted
• OSX 10.14.6
• Browser version 81.0.4044.122
  
• Node.JS version: v8.13.0

CMS configuration

backend:
  name: gitlab
  repo: redacted 
  auth_type: implicit 
  app_id: redacted 
  api_root: https://redacted/api/v4
  base_url: https://redacted
  auth_endpoint: oauth/authorize
  slug:
    clean_accents: true
    sanitize_replacement: '-'
display_url: 'redacted'
media_folder: static/uploads
public_folder: /uploads

[Undistraction]

Thinking about this further, the only difference I can see between a new item and an existing item is that the new item does not exist as a file, and so doesn't have a path yet, whereas an existing item represents an exisiting file and therefore does have a path. This would point to the fact that maybe the media library itself is not the problem, but that the root of the path for a new file is being incorrectly generated and prepended to the relative media_library path.

[erezrokah]

Hi @Undistraction this is the intended behaviour with new entries for collections that have relative media_folder configured, since we can't resolve the media folder path without saving the entry first. Once the entry is saved we can resolve the media folder path.

On a side note the main use case for that feature is to be able to bundle media files in the same folder as the entry when each entry has its own media files and they are not shared between entries. When sharing media files between entries you can prefix the media_folder (even at a collection/field level) with a /. That way the CMS will treat the media_folder as an absolute path and will be able to resolve it even for new entries.

[Undistraction]

@erezrokah this definitely feels like a bug as it makes it impossible to choose an image that already exists in a media directory from a new entry. So every time you create a new entry you would need to upload all the images you need for that entry. In cases where you need an image that already exists, this is problematic. We've had to roll back to using absolute paths as this effectively breaks our CMS for new entries.

Users of our CMC need to create new entries and assign various images and downloads found in the media library to fields on those new entries. This is impossible with the current functionality as the media library appears to be empty.

In cases where different collections share a centralised media library, new entries need access to that library just as much as existing entries.

It sounds like it should be possible use a modified path for new entries so that their media_folder resolves correctly.

This is something I would be happy to look into.

[Undistraction]

@erezrokah Sorry. I think you edited your message in the time it took me to reply:

On a side note the main use case for that feature is to be able to bundle media files in the same folder as the entry when each entry has its own media files and they are not shared between entries. When sharing media files between entries you can prefix the media_folder (even at a collection/field level) with a /. That way the CMS will treat the media_folder as an absolute path and will be able to resolve it even for new entries.

Would this mean that the CMS writes absolute or relative paths to the entries?

[erezrokah]

Would this mean that the CMS writes absolute or relative paths to the entries?

media_folder specifies where to save the entry in the repo and public_folder specifies how the media file path will show up in the frontmatter. You should still be able to use an absolute path for media_folder and a relative one for public_folder.
Per our discussion in https://github.com/netlify/netlify-cms/issues/3670 we should probably better document all these scenarios.

[Undistraction]

@erezrokah Sorry. I think I'm doing a terrible job of explaining my use-case. Let me have another try.

Existing setup

• We have a single centralised/global media_folder used by all our collections / entries. This contains a large number of images and other files that we reuse when creating new entries. So our global config includes:

media_folder: `/static/uploads/`

• Our public_path is /uploads/
• When a CMS user creates a new entry, they choose a number of images and / or other files from our centralised media library.
• Netlify CMS saves all the media locations into the entries using absolute paths, for example /static/uploads/some-image-file.png.
• We are using Gatsby to build our site, so we have to use a plugin to rewrite all these paths to be relative to our collection folders during the build process.

Ideal setup

_This is what I'd hoped to achieve using the new Beta relative / per collection media_folder feature._

• Retain _single_ centralised directory of _all_ our media files which all entries/collections can access.
• Add media_folder config to each collection to allow each collection to declare a relative path to our centralised directory of media files, for example in `/src/content/articles/:

media_folder: `../../../static/uploads/`

• When a CMS user creates a new entry, they choose a number of images and / or other files from our centralised media library.
• Netlify CMS saves all the media locations into the entries using relative paths, for example `../../../static/uploads/some-image-file.png
• We have no issues with Gatsby builds as all paths are relative

It appears that the _Ideal setup_ outlined above is not possible at present because any new entries have an empty media library, preventing existing images or media being added to them. Am I correct in this assumption? Is the ideal setup I outlined above impossible at present?

I think this feels like a bug, and that whether for new or existing entries, the library should be populated with all existing media, allowing a new entry to have existing media added to it. If you agree I'd be happy to look into 'fixing' this so that a new media item has access to the media library.

Note: The confusion here isn't related to the difference between the media_folder and the public_folder, as I believe in both my scenarios above, the public_folder wouldn't need to change.

[erezrokah]

Thanks for the explanation I think I get it now. I think the ideal setup is possible and actually you don't need to use that feature at all.
I've set up a branch with an example config here:
https://github.com/erezrokah/netlify-cms-reproductions/blob/netlify_cms/issue_3654/public/config.yml#L14

media_folder: /static/uploads/
public_folder: /uploads
collections:
  - name: posts
    label: Posts
    label_singular: 'Post'
    folder: src/content/posts
    create: true
    public_folder: '../../../static/uploads/'
    fields:
      - label: Title
        name: title
        widget: string
      - label: 'Cover Image'
        name: 'image'
        widget: 'image'
        required: false
      - label: Body
        name: body
        widget: markdown

See the resulting file here:
https://raw.githubusercontent.com/erezrokah/netlify-cms-reproductions/netlify_cms/issue_3654/src/content/posts/test.md

---
title: test
image: ../../../static/uploads/netlify.png
---
![](../../../static/uploads/netlify.png)

Does that cover the use case? Opening the media library for a new entry displays all media files from static/uploads

[Undistraction]

@erezrokah Thanks for putting this together. This does work for me in development, but when I do a production build (with Gatsby), I get an empty media library.

[Undistraction]

@erezrokah Update: Is does work, but if I refresh the page the media library is empty, which seems to be an unrelated bug.

[erezrokah]

Hi @Undistraction, I'm not sure I understand the new issue - can you provide a reproduction scenario?

[Undistraction]

@erezrokah

• Open New entry
• Open media library from image field => all media present
• Refresh the page
• Choose no from the dialogue offering to restore file
• Open media library from image field => media library is now empty
• Close entry
• Open New entry
• Open media library from image field => all media present

I can write this up as a fresh issue if you like.

[erezrokah]

A new issue would be great @Undistraction thanks. Can we close this one?

[Undistraction]

@erezrokah Of course. Thanks again for your help. Much much appreciated.