S
Supabase•12mo ago
f3bruary

Uploaded images get octet-stream mime type

I'm new to Supabase and I'm trying to upload an image. The uploading works fine, and I can display images as well. I noticed in the Dashboard, the image uploaded has the wrong mime-type. How do I correct this? Although uploading is working, I would like to restrict the bucket to specific mime types. I did that, and now uploading doesn't work at all. Presumably because the server is not sending the correct mime-type? 
// Upload banner to Supabase
const { data, error } = await supabase.storage
    .from("images")
    .upload(
        `profiles/UUID/${banner.name}`,
        banner,
        {
            upsert: true,
            // contentType: `image/${extension}`,
        },
    );
if (error) {
    console.log(error);
} else {
    console.log(data);
}
// Upload banner to Supabase
const { data, error } = await supabase.storage
    .from("images")
    .upload(
        `profiles/UUID/${banner.name}`,
        banner,
        {
            upsert: true,
            // contentType: `image/${extension}`,
        },
    );
if (error) {
    console.log(error);
} else {
    console.log(data);
}
If I uncomment that contentType line, it still doesn't pass the correct mime type.
11 Replies
garyaustin
garyaustin•12mo ago
Definitely not picking up the type of file from your banner data.
What is your environment you are uploading in? If using a browser it should be able to get the file info from the file interface/blob. I would console log your extension variable and make sure it is set as that should set the mime type.
f3bruary
f3bruaryOP•12mo ago
It's a website made with Astro. The page in question is a form where someone can upload a banner (image). The form's enctype is multipart/form-data This is how I get the form field: 
let banner = formData.get("banner-upload") as File;
let banner = formData.get("banner-upload") as File;
When I console.log it right away I get this: 
File {
  size: 3528959,
  type: 'image/png',
  name: 'banner (1).png',
  lastModified: 1726072543753
}
File {
  size: 3528959,
  type: 'image/png',
  name: 'banner (1).png',
  lastModified: 1726072543753
}
I rename the file to banner.png, and then I upload it. Right now, because I added the mime-type restriction I get: 
{
  statusCode: '415',
  error: 'invalid_mime_type',
  message: 'mime type application/octet-stream is not supported'
}
{
  statusCode: '415',
  error: 'invalid_mime_type',
  message: 'mime type application/octet-stream is not supported'
}
But before it would upload, just with the wrong mime-type
garyaustin
garyaustin•12mo ago
I have no idea about Astro and how it handles the file data. Yes your process is not picking up the mime type if it was uploading as an octet-stream.
f3bruary
f3bruaryOP•12mo ago
I also tried this: 
contentType: banner.type,
contentType: banner.type,
garyaustin
garyaustin•12mo ago
contentType though should set it.
f3bruary
f3bruaryOP•12mo ago
maybe something is going wrong with the renaming
garyaustin
garyaustin•12mo ago
image/png would be the content type.
f3bruary
f3bruaryOP•12mo ago
if (banner) {
        // Rename file and upload to Supabase
        const extension = banner.name.split(".").pop();

        if (extension) {
            banner = new File([banner], `banner.${extension}`);
...
...
if (banner) {
        // Rename file and upload to Supabase
        const extension = banner.name.split(".").pop();

        if (extension) {
            banner = new File([banner], `banner.${extension}`);
...
...
I'll add another console.log hmm interesting 
File {
  size: 4554704,
  type: 'image/png',
  name: 'banner (2).png',
  lastModified: 1726072892091
}
File {
  size: 4554704,
  type: '',
  name: 'banner.png',
  lastModified: 1726072892092
}
File {
  size: 4554704,
  type: 'image/png',
  name: 'banner (2).png',
  lastModified: 1726072892091
}
File {
  size: 4554704,
  type: '',
  name: 'banner.png',
  lastModified: 1726072892092
}
it's losing the mimetype when I rename the file
garyaustin
garyaustin•12mo ago
OK sounds like you have a handle on it and it is not at this moment a Supabase thing.
garyaustin
garyaustin•12mo ago
https://supabase.com/docs/reference/javascript/storage-from-upload talks about needing contentType for some environments.
JavaScript: Upload a file | Supabase Docs
Supabase API reference for JavaScript: Upload a file
f3bruary
f3bruaryOP•12mo ago
Yeah I read it, and using that, but I just didn't expect the lose the mime-type after renaming the file. But it's okay, I can figure out the rest. Thanks a lot for helping 👍 I appreciate it

Did you find this page helpful?