Incorrect path stored in front matter when media_folder includes slug and title is changed after image upload

[mvolfik]

To Reproduce
Have config like this:

backend:
  name: "git-gateway"

local_backend: true

media_folder: "/static/assets"
public_folder: "/assets"

slug:
  clean_accents: true
  encoding: "ascii"

collections:
  - name: "content"
    label: "Content"

    folder: "content"
    media_folder: "{{media_folder}}/{{slug}}"
    public_folder: "{{public_folder}}/{{slug}}"

    create: true
    fields:
      - label: "Title"
        name: "title"
        widget: "string"

      - label: "Image"
        name: "image"
        widget: "image"
        allow_multiple: false

1. Create a new item
2. Set title to 'foo' (or don't set it at all)
3. Upload some image and choose it in the second widget
4. Change the title to 'bar'
5. Publish

Expected behavior
An image is uploaded to /static/assets/bar/filename.png and image: /assets/bar/filename.png is stored in /content/bar.md

Observed behavior
Image is uploaded to correct path /static/assets/bar/filename.png, but /content/bar.md contains image: /assets/foo/filename.png

Applicable Versions:

• Netlify CMS version: netlify-cms-app 2.15.11; netlify-cms-core 2.40.6; netlify-cms 2.10.131 (installed from CDN)
• Git provider: Happens with both local dev server and Netlify Git gateway

[satya-nutella]

Hi @erezrokah this looks like a good first issue to work on. I am new here. Any pointers on what would be a good place to start?

[erezrokah]

Thanks @meehawk, the code that decides on the media folder path in the front matter is here:
https://github.com/netlify/netlify-cms/blob/444f30689b366f2479a0039414a314a809b2b980/packages/netlify-cms-core/src/reducers/entries.ts#L780

[satya-nutella]

@erezrokah thank you so much. I'll try to work on this issue over the weekend

[stefanprobst]

i've run into something similar and tried to investigate a bit.

i think there are a couple of issues with {{slug}} in a collection's media_folder and/or public_folder:

folderFormatter passes the current value of the title/identifier_name field to compileStringTemplate, which uses that value to substitute {{slug}}. but when an entry has already been saved (and has a slug assigned), the entry's slug should be used, so the folder path does not change when the title changes.

i think this could be fixed by simply adding this here:

  const slug = entry.get('slug');
  const identifier =
    slug != null && slug.length > 0
      ? slug
      : fields.getIn(keyToPathArray(selectIdentifier(collection) as string));

this returns the correct media_folder, except when (i) the collection has a custom slug option, (ii) when there's a name collision (which is solved for the entry slug by generateUniqueSlug).

not really sure how to resolve these. also unclear what the intended behavior of "{{slug}}" should be here: entry.get('slug') will return the slug after it has been transformed by a custom slug collection option, otherwise it just means "a url-safe version of the title field".

for public_folder another issue is that selectMediaFilePublicPath is only called when the medium is selected in the popup dialog. if at that point the identifier_name field is blank, or it is changed afterwards, these changes are not taken into account to generate the image's public_folder path.