Error 422 when resize image during local development

[ozum]

Bug report

Describe the bug

I'm assuming image resizing is available for local development.

I get the following error when I try to resize the image during local development. However standard images are shown as expected.

Works as expected: http://localhost:54321/storage/v1/object/public/menu-images/public/avatar1.jpg

Returns 422: http://localhost:54321/storage/v1/render/image/public/menu-images/public/avatar1.jpg?width=100&height=100

{
statusCode: "422",
error: "ImageProcessingError",
message: "Invalid source image"
}

To Reproduce

1. Create bucket menu-images

   INSERT INTO storage.buckets (id, name, public) VALUES ('menu-images', 'menu-images', true);
   CREATE POLICY "Anyone can view menu images" ON "storage"."objects" FOR SELECT TO authenticated USING ((bucket_id = 'menu-images'));
   CREATE POLICY "Anyone can add menu images" ON "storage"."objects" FOR INSERT TO authenticated WITH CHECK ((bucket_id = 'menu-images'));

2. Upload a file

   const { error } = await supabase.storage.from("menu-images").upload(`public/avatar1.jpg`, fileItem.file);

3. Get transformed public URL:

   const { data } = supabase.storage.from("menu-images").getPublicUrl("public/avatar1.jpg", {
   transform: {
   width: 100,
   height: 100,
   },
   });

4. Go to http://localhost:54321/storage/v1/render/image/public/menu-images/public/avatar1.jpg?width=100&height=100

Expected behavior

Get resized image.

System information

• OS: macOS
• Version of supabase-js: 2.2.2
• Version of Node.js: 19.4.0

[drewbietron]

I'm seeing something similar, and it seems to be happening with images over a certain dimension / size. I can confirm that the asset is saved to storage, but hitting the URL returns

{"statusCode":"422","error":"ImageProcessingError","message":"Invalid source image"}

Removing the transformation params and using the old Storage path shows the image fine, so not sure what is invalid with the source image. I am saving images via an ArrayBuffer from base64.

url = `${supabaseUrl}/storage/v1/render/image/public/${storageUrl}?width=${imageWidth}`; // doesn't work
url = `${supabaseUrl}/storage/v1/render/image/public/${storageUrl}`; // doesn't work
url = `${supabaseUrl}/storage/v1/object/public/${storageUrl}`; // works

I'm also noticing that images ~> 2mb are shown as being saved as text/plain;charset=UTF-8 in the Studio UI while images ~< 2mb are being shown as saved as application/octet-stream -- same code saving the same images to Storage, both rendering fine without the image transformation params.

Also strange that going to download the problematic images in Studio returns a 404, but only with the &download param on the url. Seems to be something with any params being added to these images.

[iamchubko]

Can confirm the same on "@supabase/supabase-js": "^2.11.0", supabase CLI 1.38.4

http://localhost:54321/storage/v1/render/image/public/bucket-name/image-name.jpg?width=128

{"statusCode":"422","error":"ImageProcessingError","message":"Invalid source image"}

But the following is working fine

- http://localhost:54321/storage/v1/render/image/public/bucket-name/image-name.jpg?width=128
+ http://localhost:54321/storage/v1/object/public/bucket-name/image-name.jpg

Honestly, I don't quite understand if this isn't working because it's a paid feature or not and whether this affects local development

[thefrana]

Any progress on this? The error is still there for me. Only some images does not work. Not sure if its because of their size, dimensions or encoding.

OS: macOS
Version of supabase-js: 2.36.0
Version of Node.js: 20.7

[KevinBrolly]

It has been some time since this issue was first reported, is it only affecting images over a certain size?

Is this issue only happening during local development/self hosting, but is fine on the hosted platform?

[Hallidayo]

Hi all, We’re going to close this one due to inactivity, but feel free to reopen if you’re still having issues here.