Filepicker not working

Support Forms & Blueprints
1

Hello all. I’m trying to get my custom theme working with Grav and I’m having trouble getting filepicker to work. I think it’s something simple and I’m just overlooking it, although I’ve been trying for weeks to figure this out.

The below YAML allows the filepicker field to appear on the admin side when Media Upload is selected. The dropdown appears and I can select a file that I’ve uploaded. However when I save it, my selection isn’t persisted in the .md file.

I figured it’s because the field doesn’t start with a period (because the other fields start with a period), so I changed it from mediaField.media to .media, dropping mediaField at the beginning. But that just causes a red banner to appear that says “Not Found” any time I try to open the drop down (which now doesn’t populate).

Two questions:

  1. Is my YAML correct, and if not what am I missing?
  2. I want the filename of the chosen file from the filepicker to show up on my page as a link. For this to work, is my Twig correct?

I have searched the web, Grav docs, these forums, Grav logs, and even asked ChatGPT but have not found an answer yet.

Thanks for your help.

YAML:

title: position
'@extends':
  type: default
  context: blueprints://pages

form:
  fields:
    tabs:
      type: tabs
      active: 1
      fields:

        content:
          fields:

            content:
              type: tinymce
              label: Content
              validate:
                type: textarea

            header.rightPane:
              type: tinymce
              label: Right Pane

            header.media_order:
              type: pagemedia
              label: PLUGIN_ADMIN.PAGE_MEDIA

            header.sideLinks:
              name: sideLinks
              type: list
              label: Links
              style: vertical
              soft: true
              fields:
                .title:
                  type: text
                  label: Title
                .linktype:
                  type: elements
                  label: Link Type
                  
                  default: pageField
                  options:
                    pageField: Page
                    externalLinkField: External Link
                    mediaField: Media Upload
                  fields:
                    pageField:
                      type: element
                      fields:
                        .page:
                          name: page
                          type: pages
                          label: Page
                    externalLinkField:
                      type: element
                      name: externalLinkField
                      fields:
                        .link:
                          name: link
                          type: text
                          label: External Link
                    mediaField:
                      type: element
                      fields:
                        mediaField.media:
                          type: filepicker
                          folder: '@self'
                          preview_images: true
                          label: Media Upload
                order:
                  type: hidden
                  default: 1

            header.linkPlacement:
              type: toggle
              label: Link Placement
              highlight: side
              default: side
              options:
                side: On the left side
                bottom: On the bottom
              classes: fancy
              size: large

            header.enableRightPane:
              type: toggle
              label: Enable Right Pane
              highlight: yes
              default: yes
              options:
                yes: Yes
                no: No
              classes: fancy
              size: large

Twig (unrelated parts omitted):

{% for link in page.header.sideLinks %}
   {% if link.linktype == "pageField" %}
      <a href="{{ link.pageField.page }}">
         <div class="side-link-bottom-placement" >
            <img class="link-icon" src="{{ url('theme://img/link.png') }}" />
               {{ link.title }}
          </div>
      </a>
   {% endif %}
   {% if link.linktype == "externalLinkField" %}
      <a href="https://{{ link.externalLinkField.link }}">
         <div class="side-link-bottom-placement" >
            <img class="link-icon" src="{{ url('theme://img/link.png') }}" />
            {{ link.title }}
            </div>
      </a>
   {% endif %}
   {% if link.linktype == "mediaField" %}
      <a href="{{ page.url }}/{{ link.mediaField.media }}">
         <div class="side-link-bottom-placement" >
            <img class="link-icon" src="{{ url('theme://img/attachment.png') }}" />
            {{ link.title }}
         </div>
      </a>
    {% endif %}
{% endfor %}
2

Hello, first thing i noticed is at this part “content” doesnt have “type”

      fields:

        content:
          fields:

after that i see you used “content” again as variable name and i think it could be something else to differ them.

before coming to this post i thought i could help maybe because i use yaml a lot with flex objects but your code is big really and following it is not easy for me…

so here is a suggestion:

  • to understand what is wrong with yaml code for flex, i look at json file it creates. json file stores values of those keys. so i check if my yaml could put values there as i wanted.
    In your case, idk where you use this yaml but, you can do similar testing method if you use it for flex.

btw isnt this “header.rightPane” kind of key is harder to maintain than using “header_rightPane” or “headerRightPane” ?

  • lastly if you see a key doesnt put value to json as you want but you think it should, try puttin a dot “.” front of it to merge it to its parent key.
1 Like
3

@Gin, OP is not defining a new custom blueprint, but overriding an existing one in which case, existing fields do not need to be defined again. OP’s syntax is correct.

1 Like
4

Make sure the filepicker field is named .media under mediaField and matches your Twig reference exactly; this should allow the selection to save correctly.

1 Like
5

@Rayburn96, Unfortunately, I can reproduce the issue… And I’ve had a similar issue a few years ago with respect to dot notations in Element/Elements field. See this long discussion.

When I use instead of the filepicker the following all goes well. The value is written inside the frontmatter.

mediaField:
  type: element
  fields:
    .media:
      type: text
      label: Media upload
  • However, when using the Filepicker field with the dot notation, Admin shows an error as you’ve noticed.
  • When not using the dot notation for the Filepicker the value ends nowhere.

In short, I have no solution for you…

1 Like
6

@Luke-Daniel, Have you tried it?

I don’t think Twig has anything to do with it. The value is not being saved into the frontmatter of the page when not using the dot notation in a field name. Hence Twig cannot fetch it.

And when using the dot notation for the Filepicker, an error is thrown.

Please provide a working solution if you’ve found one.

1 Like