getFileUrl function doesn't work

[thekeny]

When I try to send a request, it writes an error 400 bad request, I tried to find the answer in the documentation and the problem is that the file id that we have does not work to receive the link

function getFileUrl(fileId: Id<"_storage">): string{
    return `${process.env.NEXT_PUBLIC_CONVEX_URL}/api/storage/${fileId}`
}

here is the code in which I call the function

{
  file.type === "image" && <Image alt={file.name} width="200" height="100" src={getFileUrl(file.fileId)}/>
}

[EgorGolovanev]

For anyone who will be facing same problem (solution taken from Convex Community Discord server and with help of Convex AI Docs Helper):

// app/file-card.tsx
function getFileUrl(fileId: Id<"_storage">): string {
    const convexSiteUrl = process.env.NEXT_PUBLIC_CONVEX_SITE_URL;
    const getImageUrl = new URL(`${convexSiteUrl}/getImage`);
    getImageUrl.searchParams.set("storageId", fileId);
    return getImageUrl.href;
}

// /.env.local
NEXT_PUBLIC_CONVEX_SITE_URL=https://same-as-your-NEXT_PUBLIC_CONVEX_URL-variable.convex.site
// For example: NEXT_PUBLIC_CONVEX_SITE_URL=https://happy-animal-123.convex.site

// /convex/http.ts
http.route({
    path: "/getImage",
    method: "GET",
    handler: httpAction(async (ctx, request) => {
        const { searchParams } = new URL(request.url);
        const storageId = searchParams.get("storageId")! as Id<"_storage">;
        const blob = await ctx.storage.get(storageId);
        if (blob === null) {
          return new Response("Image not found", {
            status: 404,
          });
        }
        return new Response(blob);
      }),
});

// /next.config.ts
const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'happy-animal-123.convex.site',
      },
      {
        protocol: 'https',
        hostname: 'happy-animal-123.convex.cloud',
      }
    ]
  }
};

After implementing this code sections to your files error "Upstream image response failed" should be gone.