"failed to load file from Git-Gateway" in CMS

Netlify CMS
,
1

Hi, I’m using Netlify CMS on a Gatsby site, and sometimes, and I have no idea why, editors are not able to add images or media.

To be clear, what happens is this: an editor creates or edits a new item in a collection, which has several fields on it, including an image and two videos (which may be large). They click on “choose an image”, and nothing happens. An error “failed to load file from Git-Gateway” appears in the console. Screenshot:

image
image849×757 60.4 KB

All the images and video are in Netlify LMS. And this is within a Gatsby site. I’ve upgraded everything to the latest as of today, but still no dice. I’ve also tried multiple browsers, clearing cache, etc. Any ideas?

As an additional data point: I noticed that only four of the six videos that are pulled in here are throwing an error in the above screenshot. This led me to think it could be some LFS/LMS issue. So indeed, I cloned the repo into a new directory, and ran git lfs fetch --all and was greeted by a handful of object not found messages. Could this be related?

PPS: I just noticed another thing about those four videos – the links that show for them in the right pane are direct links to the files in the static directory. Which is fine. But the two videos that don’t have this issue – they’re also links, but they’re a blob: url. What’s going on?

2

Update: I found the issue one of the issues.

An editor uploaded a new version of a video with the same filename. However, they uploaded it as xyz0123456789.mp4 when the original was XYZ0123456789.mp4.

I went and looked in the json file the CMS writes to, and indeed, the filename was till uppercase. My solution: I clicked “remove file” on each of the four offending files, and then selected the files over again. After hitting save, the JSON updated to the correct case. And that’s that.

I believe this happened because a developer swapped the video files directly in git instead of going thru the CMS. (Edit: but maybe not; does Netlify CMS alter the casing of files it uploads?)

3

I spoke too soon. Now I click on “choose an image” and get this:

Uncaught TypeError: o is null
    t https://url.com/admin/netlify-cms-app.js:375
    React 15
        vi
        ui
        xi
        zg
        rg
        hg
        <anonymous>
        ti
        hg
        be
        he
        unstable_runWithPriority
        Za
        <anonymous>
        Ki
netlify-cms-app.js:375:55403
5

Hi there! Thanks for your interest in Netlify CMS. Looks like you posted your question a little while ago, but that you haven’t received a solution yet. Here’s where you might get more help:

netlifycms.org - the site houses our extensive documentation that likely contains helpful information to get you back on track.

netlify cms slack - join our friendly slack channel and chat with other cms pros to get the help you need.

GitHub Issues - think you’ve found a bug, or would like to make a feature request? Make your voice heard here. Netlify CMS is open source - PRs and other contributions are also welcome!

Stack Overflow Check StackOverflow for questions tagged “Netlify CMS” if you don’t get an answer in the Slack or the GH issues. StackOverflow reaches a worldwide audience of knowledgeable people.

Your question will be left open here for anyone to comment - but we encourage you to check out the above resources if you are still looking for a solution!

6

Well hi again. I just found the solution to the TypeError: o is null issue, and it’s mildly infuriating, but hopefully this will help someone else.

My config.yml was like this:

 collections:
  - label: 'People'
    name: 'settings'
    files:
      - label: 'Consenting People'
        name: 'peeps'
        file: 'scripts/peeps.json'
        fields:
          - label: 'Consenting Peeps'
            name: 'consentingPeeps'
            widget: 'list'
            minimize_collapsed: true
            summary: '{{fields.p_id}}'
            add_to_top: true
            label_singular: 'Peep'
            fields:
              - label: 'ID'
                name: 'p_id'
                widget: 'string'
              - label: 'Photo'
                name: 'picture'
                widget: 'image'
                allow_multiple: false
                required: false
                hint: 'Please crop to 240x240 before uploading!'
                pattern: ['\.jpg$', 'Image must be a jpg']
                media_library:
                config:
                  max_file_size: 20000

… and so on.

The issue? that config was not indented after media_library.

Changed it to

            media_library:
              config:
                max_file_size: 20000

And it worked fine.

Booo, yaml.

But also, there really should be a yml validation step or some other way of flagging to the developer that there is an issue or some sort of undefined value in the configuration file. Especially given how error-prone yml is.

Thank you :slight_smile:

1 Like
7

hey there, @mfan :wave:

Thank you so much for coming back and sharing this solution! It will definitely be beneficial to future Forums members who encounter something similar.