Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uploadcare file / image widget not working when embedded in list widget #1768

Closed
rordi opened this issue Sep 24, 2018 · 1 comment
Closed

Comments

@rordi
Copy link

rordi commented Sep 24, 2018

Describe the bug
Using the file or image widget within the list widget does not work when Netlify CMS is configured to use Uploadcare as the media library. The button "Choose an image" or "Choose a file" produces the following JS error:

react-dom.production.min.js:17 Uncaught TypeError: Cannot read property 'toJS' of null
    at Hu (index.js:48)
    at Object.show (index.js:117)
    at R (mediaLibrary.js:67)
    at index.js:9
    at bindActionCreators.js:3
    at t (withFileControl.js:129)
    at Object.<anonymous> (react-dom.production.min.js:15)
    at Object.invokeGuardedCallback (react-dom.production.min.js:16)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.production.min.js:16)
    at C (react-dom.production.min.js:20) 

To Reproduce

  1. adjust config.yml to use Uploadcare as the media library
media_library:
  name: uploadcare
  config:
    publicKey: .....
  1. add list widget to config.yml with field that uses either the image or file widget
collections:
  - name: "page"
    label: "Page"
    folder: "site/content"
    slug: "{{slug}}"
    create: true 
    fields:
      - { label: "Titel", name: "title", widget: "string", tagname: "h1" }
      - { label: "Date", name: "date", widget: "datetime" }
      - { label: "Content", name: "body", widget: "markdown" }
      - { label: "Media (works)", name: "image_single", widget: "image" }
      - label: "Media in list (does not work)"
        name: "image_list"
        widget: "list"
        field: {label: "Image", widget: "image", default: "", required: false }
        required: false

Expected behavior
The Uploadcare widget should open.

Applicable Versions:

  • Netlify CMS version: 2.1.2
  • Git provider: GitHub
  • OS: macOS Sierra 10.12.4
  • Browser version: chrome 69
  • Node.JS version: 8.9.1

CMS configuration

backend:
  name: git-gateway
  branch: master
  accept_roles:
    - admin
    - editor

media_library:
  name: uploadcare
  config:
    publicKey: 51fe52694febf733ab27

collections: # A list of collections the CMS should be able to edit

  - name: "page"
    label: "Seiten"
    folder: "site/content"
    slug: "{{slug}}"
    create: true # Allow users to create new documents in this collection
    fields:
      - { label: "Titel", name: "title", widget: "string", tagname: "h1" }
      - { label: "Publikationsdatum", name: "date", widget: "datetime" }
      - { label: "Seiteninhalt", name: "body", widget: "markdown" }

  - name: "project"
    label: "Projekte"
    folder: "site/content/projects"
    slug: "{{slug}}"
    create: true # Allow users to create new documents in this collection
    fields:
      - { label: "Titel", name: "title", widget: "string", tagname: "h1" }
      - { label: "Publikationsdatum", name: "date", widget: "datetime" }
      - { label: "Rangfolge", name: "position", widget: "number", default: 20 }
      - { label: "Nicht auf Website publizieren", name: "draft", widget: "boolean", default: true, required: false }
      - { label: "Jahr", name: "Year", widget: "date", format: "YYYY", required: false }
      - { label: "Referenz-URL", name: "reference", widget: "string", required: false }
      - { label: "Konzept", name: "concept", widget: "boolean", default: false, required: false }
      - { label: "Planung", name: "planning", widget: "boolean", default: false, required: false }
      - { label: "Umsetzung", name: "implementation", widget: "boolean", default: false, required: false }
      - label: "Aufgabenbereiche"
        name: "activities"
        widget: "list"
        field: {label: "Aufgabenbereich", widget: "select", options: ['Shopdesign', 'Bürodesign', 'Rendering', 'Ausstellungsgestaltung', 'Schaufenstergestaltung', 'Eventgestaltung', 'Messegestaltung', 'Signaletik', 'Display', 'Point-of-Sale']}
        required: false
      - { label: "Teaser-Bild", name: "image", widget: "image" }
      - { label: "Teaser-Bild Titel / Alt", name: "imageAlt", widget: "string", required: false }
      - { label: "Teaser-Text", name: "teaser", widget: "text" }
      - label: "Projektbilder"
        name: "projectpictures"
        widget: "list"
        field: {label: "Bild", widget: "image", default: "", required: false }
        required: false
      - { label: "Seiteninhalt", name: "body", widget: "markdown", required: false }

  - name: "team"
    label: "Mitarbeiter"
    folder: "site/content/team"
    slug: "{{slug}}"
    create: true # Allow users to create new documents in this collection
    fields:
      - { label: "Publikationsdatum", name: "date", widget: "datetime" }
      - { label: "Rangfolge", name: "position", widget: "number", default: 20 }
      - { label: "Nicht auf Website publizieren", name: "draft", widget: "boolean", default: true, required: false }
      - { label: "Von Google-Suche ausschliessen", name: "robotsExclude", widget: "boolean", default: false, required: false }
      - { label: "Vor- & Nachname", name: "title", widget: "string", tagname: "h1" }
      - { label: "Funktion", name: "function", widget: "string", tagname: "h3" }
      - { label: "kurzes Zitat", name: "quote", widget: "string", tagname: "h4", required: false }
      - { label: "E-Mail", name: "email", widget: "string", required: false }
      - { label: "Telefon", name: "phone", widget: "string", required: false }
      - { label: "Mitarbeiter-Bild", name: "image", widget: "file" }
      - { label: "Seiteninhalt", name: "body", widget: "markdown", required: false }

  - name: "job"
    label: "Jobs"
    folder: "site/content/jobs"
    slug: "{{slug}}"
    create: true # Allow users to create new documents in this collection
    fields:
      - { label: "Nicht auf Website publizieren", name: "draft", widget: "boolean", default: true, required: false }
      - { label: "Publikationsdatum", name: "date", widget: "datetime" }
      - { label: "Stellenbezeichnung", name: "title", widget: "string", tagname: "h1" }
      - { label: "Seiteninhalt", name: "body", widget: "markdown" }

  - name: "customer"
    label: "Kundenliste"
    folder: "site/content/customers"
    slug: "{{slug}}"
    create: true # Allow users to create new documents in this collection
    fields:
    - { label: "Kunde", name: "title", widget: "string", tagname: "h1" }
    - { label: "Nicht auf Website publizieren", name: "draft", widget: "boolean", default: true, required: false }
@nd0ut
Copy link
Contributor

nd0ut commented Sep 25, 2018

Thank you!

I was going to go deeper into the External Media API so I'll try to fix this bug. I guess it's the same as #1602 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants