File is not working(ex: music, video)

[ChanghyeonYoon]

Description

Notion Test Page ID : 44771738e8b94edc94a9f5da86e08910

I uploaded mp3 file in my notion.
But I can't listen my uploaded music.

I guess my mp3 file link is started with "file.notion.so", but other case my file link started with 's3.us-west....'.

[ChanghyeonYoon]

Image, Video, Music... All of file is Not working

[byj0101]

Same error (Image file)
I use a private page

notion-client package signed_urls response value

Previously, it showed an response like https://s3.us-west-2.amazonaws.com/secure.notion-static.com/${value}

But now I get the following response value https://file.notion.so/f/s/${value}/Untitled.png/
All images are not visible

[marlonwlv]

The same here. When I inspect the block I have:

But after render I have another link, like @byj0101 said.

[MartinXPN]

I was about to open a new issue for videos then noticed that the title was updated and included the case for videos as well, thanks!
Has anyone found a fix for the new file.notion.so files?

[alexblack]

I think I hit this issue and found a solution. The solution appears to be to add a query parameter spaceId=${uuid} to the url where uuid is your spaceId.

For us, our images started having urls like https://file.notion.so/f/s/639a46c8-f62a-4638-8463-0cb8144ee1cb/9f2bffd87f4297a871ac022c3df0d07401e4cec6.png?table=block&id=27787f69-03bf-4f83-942b-d63395636b6e&expirationTimestamp=1678548083705&signature=DYW03sqhk-YwePm19FCHOIVRnQEZFu8k5rAD2D4Z_P0, and they don't work, I get a response Invalid request

I then compared this url to the url I get from Notion itself, when I click View original, and they are very similar, one difference I noticed was that the notion view-original url has a spaceId query parameter. If I copied that parameter and its value and put it on the urls we get through react-notion-x, then they work!

eg https://file.notion.so/f/s/639a46c8-f62a-4638-8463-0cb8144ee1cb/9f2bffd87f4297a871ac022c3df0d07401e4cec6.png?table=block&id=27787f69-03bf-4f83-942b-d63395636b6e&expirationTimestamp=1678548083705&signature=DYW03sqhk-YwePm19FCHOIVRnQEZFu8k5rAD2D4Z_P0&spaceId=1234 (replacing 1234 with the spaceId we saw on the original url)

We're using NotionRender.mapImageUrl to "fix" these urls and add the spaceId parameter, but I don't yet see a way to do this for video urls, where we see the same problem (and solution)

[MartinXPN]

I can confirm that adding spaceId as suggested by @alexblack actually works. I did this for videos on the client-side (which is a "dirty" hack) by finding the getElementsByTagName('video') and adding the spaceId to the src.

[marekhvolka]

We have the same issue.

• when I open the image url (with the spaceId) in the browser, where I'm also logged into Notion, the image works
• without spaceId it doesn't work at all
• in a different browser (or incognito mode), the image doesn't load at all

When I make the page public, the images load fine. So it's almost like the signed urls don't work really, since they should be used if the page is not public.

[adayush]

It fixed for me when I added file.notion.so in next.config.js in the domains array inside images.

[JamesDHW]

If you don't care about having the page (and sub pages) as private, you can share the notion page to the web which fixed this for me as a temporary fix!

[shirahamax]

Thanks to signed_urls I was able to fix this issue like this:

<NotionRenderer
  recordMap={recordMap}
  components={additionalComponents}
  mapImageUrl={(url, block) => {
    const signedUrl = recordMap.signed_urls?.[block.id];
    return signedUrl || url;
   }}
/>

[marekhvolka]

Thanks to signed_urls I was able to fix this issue like this:

<NotionRenderer
  recordMap={recordMap}
  components={additionalComponents}
  mapImageUrl={(url, block) => {
    const signedUrl = recordMap.signed_urls?.[block.id];
    return signedUrl || url;
   }}
/>

we use signed urls and it worked before. But now it doesn't and I'm not sure, why. We can only host the images outside of Notion or make the whole section public for web.

[hugocxl]

Suggested solution: fetching via the Official Notion Client

In my case I was using the notion-client package to fetch resources.
Moving to the official @notionhq/client and using the notion-compat utility provided to keep compatibility solved the issue.

https://github.com/NotionX/react-notion-x/tree/master/packages/notion-compat

Be aware, prior migrating, that there are some known issues. In my case were not critical.

import { Client } from '@notionhq/client'
import { NotionCompatAPI } from 'notion-compat'

const notion = new NotionCompatAPI(
   new Client({ auth: process.env.NOTION_EXTENSION_TOKEN })
)

[shirahamax]

@marekhvolka

we use signed urls and it worked before. But now it doesn't and I'm not sure, why. We can only host the images outside of Notion or make the whole section public for web.

I see, it seems so.
This may be because the path to the image files has been changed:

BEFORE: https://file.notion.so/f/s/**
AFTER: https://file.notion.so/f/f/**

My workaround:

 <NotionRenderer
  recordMap={recordMap}
  components={{nextImage: Image}}
  mapImageUrl={(url, block) => {
    if (url.includes(".amazonaws.com/")) {
    const encoded = encodeURIComponent(url);
    const objectUrl = new URL(
      NOTION_SITE_URL + "/image/" + encoded
    );
    const params = new URLSearchParams();
    params.set("table", "block");
    params.set("id", block.id);
    params.set("spaceId", block.space_id || "");
    params.set("userId", "");
    params.set("cache", "v2");
    objectUrl.search = params.toString();

    return objectUrl.toString();
  }
  return url;
}}
/>

[dinobotry]

react-notion-x/packages/notion-client/src/notion-api.ts

Line 236 in e1f03de

if (source) {

이 코드 라인때문입니다.

addSignedUrls 메서드를 오버라이딩하거나 getPage 메서드를 사용하지 말고 getSignedFileUrls 를 호출하여 리소스 URL을 직접 가져오셔야 합니다.

영작하기 귀찮음뿅

[MartinXPN]

Has anyone figured out how to properly fix the issue for videos?
My previous workaround stopped working. The page is published to web. All the images show up properly. Yet, videos are not playing.

[connorlindsey]

Unfortunately we have a private site with blocks that aren't supported well by the official API (like databases), so my current hacky solution is to query both the official and unofficial API, then merge the results since it looks like the official api properly signs assets: #456.