Supabase Storage saves image uploads as application/json despite correct contentType (image/jpeg) provided

[Ncin323]

Hi,

I am experiencing an issue where image files (specifically JPEGs in my tests) uploaded to Supabase Storage are being saved and subsequently served with the MIME type application/json, instead of their original type (image/jpeg). This happens even though the contentType option is correctly set during the upload using supabase-js.

Steps to Reproduce::
Client-side Code: I am using React and supabase-js to upload files selected via an .
File Type Verification: Before calling the upload function, console.log(file.type) correctly outputs image/jpeg for the selected JPEG file.
Supabase Upload Function: The file is uploaded using the following pattern:
// Example from my service file

import { supabase } from '@/integrations/supabase/client'; // My Supabase client instance

export const uploadTestimonialImage = async (file: File): Promise<string> => {
  const filePath = `testimonials/${Date.now()}_${file.name}`;

  console.log("Will upload file:", file.name, file.type); // Confirms 'image/jpeg' here

  const { data, error } = await supabase.storage
    .from("testimonial-images") // My bucket name
    .upload(filePath, file, {
      cacheControl: "3600",
      upsert: false,
      contentType: file.type || "image/png", // Explicitly setting contentType
    });

  if (error) {
    // This is where the error occurs in the scenario described below
    throw new Error("Image upload failed: " + error.message);
  }

  // Get public URL logic...
  const { data: publicUrlData } = supabase.storage
    .from("testimonial-images")
    .getPublicUrl(filePath);

  return publicUrlData.publicUrl;
};

MIME Type Restriction Test (Crucial Evidence):
Initially, uploads succeeded but resulted in files with application/json MIME type (verified via Supabase UI panel and direct public URL not rendering as an image).

To enforce the correct type, I set the "Allowed MIME types" in the testimonial-images bucket settings to image/*.
After setting this restriction, the upload fails with a 400 Bad Request. The error message thrown by the upload function is: Error: Image upload failed: mime type application/json is not supported.

As I am relatively new to coding, it's possible I might have overlooked something specific in the configuration or documentation. However, I have reviewed the official Storage documentation and sought help from AI assistants, but haven't been able to identify any error in my implementation that would explain this behavior.

Thank you for looking into this!

[marty-sudo]

Same issue!! IMpossible to solve :(

[kunalkhin]

Please see my answer below and give it a try.

[kunalkhin]

I ran into the same problem in my project too and found that in the supabase.ts file there was a global header set up as below

export const supabase = createClient(supabaseUrl, supabaseAnonKey, { auth: { persistSession: true, autoRefreshToken: true, }, global: { headers: { 'Content-Type': 'application/json', }, },

which was causing this issue. Try to find that if you some similar place where you can find this kind of configuration and just remove it.

[diabmoh]

thank you so much! same header was causing the issue for me too

[Ncin323]

Hey @kunalkhin,

I actually tracked the issue down to the exact same global 'Content-Type': 'application/json' header on my end too. Still, I really appreciate you taking the time to post the fix—sharing it here will save a lot of others some serious debugging hours.

Thanks again for jumping in and helping out! 🙌

[mauzundwauz]

Ran into this also. This is how you fix this:

Supabase Storage expects ArrayBuffer for binary uploads
Upload the image / video as an ArrayBuffer!
No direct file object!
Set the correct content type as usual.

Exampe

const uploadImage = async (file: File, path: string) => { try { // IMPORTANT: Convert file to ArrayBuffer! const arrayBuffer = await file.arrayBuffer() const { error, data } = await supabase.storage .from('myimages') .upload(path, arrayBuffer, { contentType: file.type || 'image/jpeg', upsert: true }) if (error) throw error return path } catch (error) { throw error } }

Hope this helps! Amde me crazy to solve this ^^