Using media_folder on an image or file widget does not override the global media_folder

wittenbrock commented 3 years ago

The Bug

In netlify-cms-app@2.14.27, when media_folder is set on an image or file widget it does not override the global media_folder.

This issue could be related to or a duplicate of issue #4529.

Expected Behavior

In Netlify CMS's documentation and PR# 3208, it explains that the media_folder can be declared globally, for a collection, or for a widget. As of March 10th, 2021, the ability to set media_folder for a collection or widget is a beta feature.

CMS Configuration

Here's a portion of my admin/config.yml:

media_folder: src/netlify-cms-uploads # Declare the global media folder
public_folder: /files

collections: 
  - name: blog 
    label: Blog 
    label_singular: 
    folder: src/pages/blog
    identifier_field: title
    extension: md
    create: true
    slug: '{{slug}}'
    preview_path: 'blog/{{slug}}'
    fields:
      - label: Thumbnail
        name: thumbnail
        widget: image
        media_folder: /src/images/blog # Override the global media_folder and save images in a different directory
      - label: Download
        name: download
        widget: file
        media_folder: /src/pdfs/blog # Override the global media_folder and save pdfs in a different directory

The above syntax does not override the global media_folder.

Instead of saving the images at src/images/blog and the pdf files at src/pdfs/blog, Netlify CMS saves the images and files in the global media_folder = src/netlify-cms-uploads. This means that setting the media_folder at the widget level is not supported.

While Netlify CMS incorrectly saves the images and files in the global media_folder, it does write the image and file paths correctly in the blog post markdown files that it generates:

---
thumbnail: /src/images/blog/first-post-thumbnail.jpg
file: /src/pdfs/blog/interesting-article.pdf
---

Environment and npm packages

  "engines": {
    "node": "15.7.0",
    "npm": "7.4.3"
  },
  "dependencies": {
    "@emotion/react": "^11.1.1",
    "@emotion/styled": "^11.0.0",
    "@headlessui/react": "^0.3.1",
    "@tailwindcss/aspect-ratio": "^0.2.0",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/typography": "^0.4.0",
    "@types/react-instantsearch-dom": "^6.8.0",
    "algoliasearch": "^4.8.5",
    "dayjs": "^1.10.3",
    "dotenv": "^8.2.0",
    "gatsby": "^2.26.0",
    "gatsby-image": "^2.4.21",
    "gatsby-plugin-algolia": "^0.16.2",
    "gatsby-plugin-catch-links": "^2.8.0",
    "gatsby-plugin-layout": "^1.10.0",
    "gatsby-plugin-manifest": "^2.4.35",
    "gatsby-plugin-netlify": "^2.3.22",
    "gatsby-plugin-netlify-cms": "^4.3.16",
    "gatsby-plugin-next-seo": "^1.6.1",
    "gatsby-plugin-offline": "^3.2.35",
    "gatsby-plugin-react-helmet": "^3.3.14",
    "gatsby-plugin-sharp": "^2.6.43",
    "gatsby-plugin-webfonts": "^1.1.3",
    "gatsby-source-filesystem": "^2.3.35",
    "gatsby-transformer-cloudinary": "^2.1.0",
    "gatsby-transformer-pdf": "^1.10.0",
    "gatsby-transformer-remark": "^2.8.44",
    "gatsby-transformer-sharp": "^2.5.19",
    "intersection-observer": "^0.12.0",
    "netlify-cms-app": "^2.14.27",
    "prop-types": "^15.7.2",
    "qs": "^6.7.0",
    "react": "^16.14.0",
    "react-autosuggest": "^10.1.0",
    "react-dom": "^16.14.0",
    "react-helmet": "^6.1.0",
    "react-helmet-async": "^1.0.7",
    "react-instantsearch-dom": "^6.9.0",
    "react-markdown": "^5.0.3",
    "search-insights": "^1.7.1",
    "tailwindcss": "^2.0.1",
    "twin.macro": "^2.2.3"

wittenbrock commented 3 years ago

@erezrokah - Thanks for fixing this so quickly. As of 2.14.29, I can confirm that image and file widgets with the media_folder property are successfully overriding the global media folder.

Cheers

natapg commented 3 years ago

Hi guys, before creating a new issue I would like to ask here if the following is expected

If I add an image widget after a file widget with the media_folder overwritten, and I want the images to be saved in the folder defined in the root, I would imagine that the configuration would be something like this

media_folder: src/netlify-cms-uploads # Declare the global media folder
public_folder: /files

collections: 
  - name: blog 
    label: Blog 
    label_singular: 
    folder: src/pages/blog
    identifier_field: title
    extension: md
    create: true
    slug: '{{slug}}'
    preview_path: 'blog/{{slug}}'
    fields:
      - label: Download
        name: download
        widget: file
        media_folder: /src/pdfs/blog # Override the global media_folder and save pdfs in a different directory
      - label: Thumbnail
        name: thumbnail
        widget: image # Without adding a media_folder, since I want to use the one from the root (src/netlify-cms-uploads)

but in this way, when accessing the CMS, when opening the image selector, it shows empty with the message "not assets" even when the folder has images.

so the way I found it to work, is by specifying the path in the image widget, is this expected or a bug?

media_folder: src/netlify-cms-uploads # Declare the global media folder
public_folder: /files

collections: 
  - name: blog 
    label: Blog 
    label_singular: 
    folder: src/pages/blog
    identifier_field: title
    extension: md
    create: true
    slug: '{{slug}}'
    preview_path: 'blog/{{slug}}'
    fields:
      - label: Download
        name: download
        widget: file
        media_folder: /src/pdfs/blog # Override the global media_folder and save pdfs in a different directory
      - label: Thumbnail
        name: thumbnail
        widget: image
        media_folder: src/netlify-cms-uploads

decaporg / decap-cms