Storage download function return 404 when used with transform

[Obaydahm]

Bug report

• I confirm this is a bug with Supabase, not with my own application.
• I confirm I have searched the Docs, GitHub Discussions, and Discord. can't join discord for some reason

Describe the bug

When trying to download an image from Storage, if I provide the transform object, I get a 404, otherwise it works.

With transform

supabaseAdmin.storage
  .from("comments-attachments")
  .download(cdnImage.file_path, {
    transform: {
      width: 100,
      quality: 70,
      resize: "contain",
    },
  })
  .then(({ data: imageBlob, error }) => {
    if (error) {
      return errorResponse;
    }

    return new NextResponse(imageBlob, {
      status: 200,
      statusText: "OK",
    });
  });

Error [StorageUnknownError]: {}
    at Generator.next (<anonymous>) {
  __isStorageError: true,
  originalError: Response {
    status: 404,
    statusText: 'Not Found',
    headers: Headers {
      'content-type': 'application/json; charset=utf-8',
      'content-length': '191',
      connection: 'keep-alive',
      date: 'Sat, 25 Jan 2025 22:10:35 GMT',
      'access-control-allow-origin': '*',
      'x-kong-upstream-latency': '2',
      'x-kong-proxy-latency': '0',
      via: 'kong/2.8.1'
    },
    body: undefined,
    bodyUsed: false,
    ok: false,
    redirected: false,
    type: 'default',
    url: 'http://127.0.0.1:54321/storage/v1/render/image/authenticated/comments-attachments/packt/32/66258a27f3dd9/DSC06743.jpg?width=100&resize=contain&quality=70'
  }
}

Without transform

supabaseAdmin.storage
  .from("comments-attachments")
  .download(cdnImage.file_path)
  .then(({ data: imageBlob, error }) => {
    if (error) {
      return errorResponse;
    }

    return new NextResponse(imageBlob, {
      status: 200,
      statusText: "OK",
    });
  });

{ size: 2213083, type: 'image/jpeg' }

To Reproduce

1. Use Image Transformation when downloading an image.

Expected behavior

Image to be downloaded

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: [e.g. macOS, Windows]
• Browser (if applies) [e.g. chrome, safari]
• Version of supabase-js: [e.g. 6.0.2]
• Version of Node.js: [e.g. 10.10.0]

Additional context

Add any other context about the problem here.

[Obaydahm]

I think I know what the issue is now 😅 It seems like you have to manually setup ImgProxy on a local instance. Could someone verify?

[kruschid]

It's more of an undocumented feature than a bug.

If you use the Supabase CLI, the imgproxy container is not started by default. Adding

image_transformation = { enabled = true }

to the [storage] section in your config.toml solves the issue (Source).

Simply run supabase stop and supabase start after updating the config, and it will spin up an imgproxy instance.

Edit:

I also found this solution, which is easier to read. :-)

[storage.image_transformation]
enabled = true

[LuisReinoso]

Awesome, the solution provides by @kruschid works to me!

[Hallidayo]

Hi everyone, due to inactivity on this issue I've moved the issue over to discussions/troubleshooting. Thank you @kruschid for the help!