File creation/upload in Open Authoring

Hi there! I’m building our company’s new site with tina and we’re hyped by the possibilities it gives. :heart_eyes:

The first public version is almost done. I got there by following the guide and using tinacms.org repo as reference.

The only issue I’m having right now is related to when new files are added:

  • For page creation, I followed the instructions in this topic:

    How to create new file in next.js with github-api?
    It works fine locally, but when running in Vercel, it takes me to a 404 page. I have to wait for the new deploy containing the commit to become available and refresh the page to be able to view it.

  • For image uploads, I created the media store and added it to _app.js:

    const github = new GithubClient({
      proxy: "/api/proxy-github",
      authCallbackRoute: "/api/create-github-access-token",
      clientId: process.env.GITHUB_CLIENT_ID,
      baseRepoFullName: process.env.REPO_FULL_NAME,
      baseBranch: process.env.BASE_BRANCH,
      authScope: "repo",
    });
    
    this.cms = new TinaCMS({
      apis: {
        github,
      },
      media: {
        store: new GithubMediaStore(github),
      },
      ...
    };
    

    When I upload an image, both the preview on the sidebar and the image component in the site goes blank. To view it, I have to save the form, wait for the new deploy (or pull the commits on local dev), and refresh the page again.
    The image fields are set to upload as /public/images/example.jpg and parsed as /images/example.jpg

Any ideas on what I’m doing wrong?

@vNakamura Not sure about image uploads but for page creations I ran into the same issue. For your getStaticPaths do you have fallback: true, ?

here is one that works for me

export const getStaticPaths = async function () {
  const fg = require("fast-glob")
  const contentDir = "docs/"
  const files = await fg(`${contentDir}**/*.md`)
  return {
    fallback: true,
    paths: files
      .filter(file => !file.endsWith('index.md'))
      .map((file) => {
        const path = file.substring(contentDir.length, file.length - 3)
        return { params: { slug: path.split("/") } }
      }),
  }
}

2 Likes

That’s it! I had fallback: false.
Thank you!