Netlify-cms: Image uploaded to wrong location on first submission

[ameego]

Describe the bug
When I submit a new item in a collection (containing text and image), the image is not uploaded to the path specified in media_folder for this field. The output in the json is correct, the media_folder path is shown correctly. It seems to upload the image to the path specified in the root media_folder on the first submission.

Re-uploading the image a second time fixes the issue. The image gets uploaded correctly to the path specified in the media_folder at the image field level.

To Reproduce
I've created a repo where you can see this issue happening: https://github.com/ameego/netlifycms-issue.

1. Checkout the repo
2. npm install
3. npm run develop
4. Access the cms
5. Add a new artist by filling artist name, slug and upload an image
6. Upon submission, image will be uploaded to static/assets. The json file created under collection/artists will show the correct path for the image.
7. Try to re-upload the image. The image will be uploaded to the correct location.

Expected behavior
I would expect the image to be uploaded to the location specified in media_folder at the image level.

Applicable Versions:
netlify-cms-app 2.12.19
netlify-cms-core 2.30.3
Git provider: github
OS: macOS Catalina
Node: v10.15.3

CMS configuration

backend:
  name: github
  repo: ameego/netlifycms-issue
  branch: master
  site_domain: cms.netlify.com
media_folder: static/assets
public_folder: /assets
collections:
  - label: Artistes
    name: artists
    summary: "{{artistName}}"
    label_singular: artiste
    folder: "collections/artists"
    create: true
    slug: "{{artistName}}"
    extension: json
    editor:
      preview: false
    fields:
      - label: "Nom de l'artiste"
        name: artistName
      - name: slug
        label: "Slug"
        pattern:
          [
            "^[a-z0-9]+(?:-[a-z0-9]+)*$",
            "A slug can have no spaces or special characters",
          ]
      - label: Bannière
        name: banner
        widget: image
        required: false
        media_folder: "/static/assets/banner/{{fields.slug}}"`

Thank you for your help.

[ameego]

Hello,

@erezrokah, would you be able to point me at which packages to look at in the code? I have not contributed so far but I wouldn't mind having a look at this issue.

Thanks,

[erezrokah]

Thanks @ameego, I would try looking here:
https://github.com/netlify/netlify-cms/blob/94bf5ab060a95acaf10f43fca8d42793f3b85dcd/packages/netlify-cms-core/src/backend.ts#L994

Templating media folder paths is a bit tricky, since we can only evaluate the path once the user saves the entry.
So we use a dummy path and re-evaluate it again just before the entry is saved.

[PetroPavlenko]

Hi @erezrokah I have same issue. I have nested field :

{
    label: "Image",
    name: "image",
    widget: "image",
    allow_multiple: false,
    media_folder: `/static/img/product-header`,
    public_folder: `/img/product-header`,
  }

and creating new entry from collection :

{
  label: "Smart home",
  label_singular: "Smart home page",
  name: "smart-home",
  folder: "src/pages/smart-home",
  preview_path: "smart-home/{{slug}}/{{subSlug}}",
  create: true,
  identifier_field: "slug",
  slug: "{{fields.slug}}--{{subSlug}}",
  summary: "{{fields.slug}}/{{subSlug}}",
  fields: [
....
  ]

Maybe there is some workaround ?