Media manager "Failed to Laod Media"

I’m trying to set up an Image field with the NextGithubMediaStore. I have initialized the store but I’m unable to add or see any images. When I click “Drag ‘n’ drop some files here, or click to select some files” I get this error:

Failed to Load Media

Visit the docs to learn more about setting up the Media Manager for your CMS.

Now if I click the hamburger menu at the top left and open the media manager I can upload files there and they will be uploaded to Github so I believe my authentication works it’s just that the image upload field is not working.

_app.tsx

...
import { TinaCMS, TinaProvider } from "tinacms";
import { NextGithubMediaStore } from 'next-tinacms-github'

  this.cms = new TinaCMS({
      enabled: !!props.pageProps.preview,
      apis: {
        github
      },

      media: new NextGithubMediaStore(github),

      sidebar: props.pageProps.preview,
      toolbar: props.pageProps.preview
    });

index.tsx

import { getGithubPreviewProps, parseJson } from "next-tinacms-github";
import { GetStaticProps } from "next";
import { usePlugin } from "tinacms";
import { useGithubJsonForm } from "react-tinacms-github";

...

  const formOptions = {
    label: "Home Page",
    fields: [
      { name: "title", component: "text" },
      { name: "subtitle", component: "text" },
      { name: "content", component: "markdown" },

      {
        name: "hero_image",
        component: "image",
        parse: media => `/static/${media.filename}`,
        uploadDir: () => "/public/static/",
        previewSrc: fullSrc => fullSrc.replace("/public", "")
      }
    ]

  const [data, form] = useGithubJsonForm(file, formOptions);
  usePlugin(form);

  return (
    <div className="container">
      <img src={data.hero_image} alt="problem image" />
...

Am I missing something?

Hey Travis! So NextGithubMediaStore handles adding and removing ‘public’ with all media paths, so your uploadDir and previewSrc don’t need to account for public.

You can see an example of an image field configured with NextGithubMediaStore on this community page on tinacms.org.

If you wanted to keep your image config explicit like it currently is, you can use GithubMediaStore, which doesn’t make assumptions about where your media lives. The only downside here is that on every image field you’d need to repeat some config to handle public when using Next.js

@kendall Thank you for your response! I still struggled a bit after working through that example but I think part of the issue was that I didn’t have anything in the directory, it was like it hadn’t been initialized so when I clicked it I was getting the “failed to load media” error, once I dragged and dropped an image into the field everything started working.
Thanks again.

1 Like