UploadCare not working with CMS.

Describe the bug I have a repo that is using the Netlify-Cms.

my Config.yml looks like this

# See https://github.com/netlify/netlify-cms/blob/master/example/config.yml
backend:
  name: git-gateway
  branch: master # Branch to update (optional; defaults to master)

media_library:
  name: uploadcare
  config:
    publicKey: b9416fd3ddeb11e239bf

collections: # A list of collections the CMS should be able to edit
  - name: "pages"
    label: "Page"
    delete: false # Prevent users from deleting documents in this collection
    editor:
      preview: true

When I sign into the CMS to upload images on the site. I’m greeted with a lovely whitespace and a spinner that does nothing in particular.

To Reproduce Clone this repo. https://github.com/flamebeard/WhereAmI

Spin up the site at netlify and enable the git backend and identity provider.

Go to any page and attempt to upload an image.

Expected behavior I would expect to see images if I could upload any.

Screenshots Above.

Applicable Versions:

• Netlify CMS version: “netlify-cms-app”: “^2.9.7”,
• Git provider: Github
• OS: Windows 10
• Browser version: Brave

• Node.JS version: v10.16.3
• NPM version: 6.13.1

CMS configuration

# See https://github.com/netlify/netlify-cms/blob/master/example/config.yml
backend:
  name: git-gateway
  branch: master # Branch to update (optional; defaults to master)

media_library:
  name: uploadcare
  config:
    publicKey: b9416fd3ddeb11e239bf

collections: # A list of collections the CMS should be able to edit
  - name: "pages"
    label: "Page"
    delete: false # Prevent users from deleting documents in this collection
    editor:
      preview: true
    files:
      - file: "content/pages/contact.md"
        label: "Contact Page"
        name: "contact-page"
        fields:
          - {
              label: Template,
              name: template,
              widget: hidden,
              default: ContactPage,
            }
          - { label: Slug, name: slug, widget: hidden, default: "contact" }
          - { label: Title, name: title, widget: string }
          - {
              label: Featured Image,
              name: featuredImage,
              widget: image,
              options:
                { media_library: { config: { imageShrink: 2600x2600 } } },
            }
          - { label: Subtitle, name: subtitle, widget: markdown }
          - { label: Body, name: body, widget: markdown }
          - { label: Address, name: address, widget: text, required: false }
          - { label: Phone, name: phone, widget: string, required: false }
          - {
              label: Email Address,
              name: email,
              widget: string,
              required: false,
            }
          - label: "Meta"
            required: false
            name: "meta"
            widget: "object"
            fields:
              - { label: Title, name: title, widget: string, required: false }
              - {
                  label: Description,
                  name: description,
                  widget: text,
                  required: false,
                }
              - {
                  label: Canonical Link,
                  name: canonicalLink,
                  widget: string,
                  required: false,
                }
              - {
                  label: Noindex,
                  name: noindex,
                  widget: boolean,
                  required: false,
                }

      - file: "content/pages/home.md"
        label: "Home Page"
        name: "home-page"
        fields:
          - {
              label: Template,
              name: template,
              widget: hidden,
              default: HomePage,
            }
          - { label: Slug, name: slug, widget: hidden, default: "" }
          - { label: Title, name: title, widget: string }
          - { label: Featured Image, name: featuredImage, widget: image }
          - {
              label: Subtitle,
              name: subtitle,
              widget: markdown,
              required: false,
            }
          - { label: Body, name: body, widget: markdown }
          - label: "Accordion"
            name: "accordion"
            widget: "list"
            required: false
            fields:
              - { label: "Title", name: "title", widget: "string" }
              - { label: Content, name: content, widget: text }
          - label: "Meta"
            required: false
            name: "meta"
            widget: "object"
            fields:
              - { label: Title, name: title, widget: string, required: false }
              - {
                  label: Description,
                  name: description,
                  widget: text,
                  required: false,
                }
              - {
                  label: Canonical Link,
                  name: canonicalLink,
                  widget: string,
                  required: false,
                }
              - {
                  label: Noindex,
                  name: noindex,
                  widget: boolean,
                  required: false,
                }
      - file: "content/pages/service.md"
        label: "Services Page"
        name: "service-page"
        fields:
          - {
              label: Template,
              name: template,
              widget: hidden,
              default: ServicePage,
            }
          - { label: Slug, name: slug, widget: hidden, default: "" }
          - { label: Title, name: title, widget: string }
          - { label: Featured Image, name: featuredImage, widget: image }
          - {
              label: Subtitle,
              name: subtitle,
              widget: markdown,
              required: false,
            }
          - { label: Body, name: body, widget: markdown }
          - label: "Accordion"
            name: "accordion"
            widget: "list"
            required: false
            fields:
              - { label: "Title", name: "title", widget: "string" }
              - { label: Content, name: content, widget: text }
          - label: "Meta"
            required: false
            name: "meta"
            widget: "object"
            fields:
              - { label: Title, name: title, widget: string, required: false }
              - {
                  label: Description,
                  name: description,
                  widget: text,
                  required: false,
                }
              - {
                  label: Canonical Link,
                  name: canonicalLink,
                  widget: string,
                  required: false,
                }
              - {
                  label: Noindex,
                  name: noindex,
                  widget: boolean,
                  required: false,
                }
      
  - name: "settings"
    label: "Settings"
    delete: false # Prevent users from deleting documents in this collection
    editor:
      preview: false
    files:
      - file: "content/settings/global.yml"
        label: "Global Settings"
        name: "global-settings"
        fields:
          - { label: Site Title, name: siteTitle, widget: string }
          - { label: Site Url, name: siteUrl, widget: string, required: false }
          - {
              label: Site Description,
              name: siteDescription,
              widget: text,
              required: false,
            }
          - label: Social Media Card
            name: socialMediaCard
            widget: object
            fields:
              - { label: Image, name: image, widget: image, required: false }
          - {
              label: Google Analytics Tracking Id,
              name: googleTrackingId,
              widget: string,
              required: false,
            }

Additional context

[erezrokah]

We should actually update the docs to mention the need to register external libraries when using netlify-cms-app. The only place I think it is mentioned is here and even there the code has an error. It should be:

import uploadcare from 'netlify-cms-media-library-uploadcare';

CMS.registerMediaLibrary(uploadcare);

And not:

import uploadcare from 'netlify-cms-media-library-uploadcare'

CMS.registerMediaLibrary('uploadcare', uploadcare)

I’ll open a separate issue for that

[erezrokah]

Hey @flamebeard you need to explicitly register the uploadcare media library: https://github.com/flamebeard/WhereAmI/pull/1

Please note that uploadcare doesn’t have stand alone UI, so you’ll have access to uploading files only when editing an entry