Uploading image from online link to supabase always returns application/octet-stream

I tried to upload a file from a URL to Supabase storage. I always get an object with application/octet-stream mime type. It only happens on Cloudflare workers. I tried it on a normal server and it works well. Here is my code:

const { createClient } = require('@supabase/supabase-js')

const supabase = createClient('SUPABASE_URL', 'SUPABASE_ANON_KEY')

async function upload (url) {
    const blob = await fetch(url)
        .then(response => response.blob())
    const fileName = 'test.' +blob.type.split('/')[1]
    const result = await supabase
      .storage
      .from('avatars')
      .upload(fileName, blob, {
        cacheControl: '3600',
        contentType: blob.type,
        upsert: true,
      })
      console.log(result)
}

upload('https://tinypng.com/images/panda-happy-2x.png')

[mrbbot]

Did some digging, this is the code in @supabase/supabase-js that does the uploading: https://github.com/supabase/storage-js/blob/1a7d98c3e8f90c43ab7c7c2b52a34f99bb0736b7/src/lib/StorageFileApi.ts#L74-L76. Looks like undici’s FormData class discards Blob types when appending to FormData:

// Local
import { FormData } from "undici";

const blob = new Blob(["test"], { type: "text/plain" });

const formData = new FormData();
formData.append("file", blob);

const formDataEdBlob = formData.get("file");
console.log(formDataEdBlob.type); // ""

// Workers Runtime (and also Firefox)
const blob = new Blob(["test"], { type: "text/plain" });

const formData = new FormData();
formData.append("file", blob);

const formDataEdBlob = formData.get("file");
console.log(formDataEdBlob.type); // "text/plain"

See the corresponding undici code here: https://github.com/nodejs/undici/blob/4684a1543d87e98b441959d731a3a13d20eaa17d/lib/fetch/formdata.js#L244-L248. Probably worth an issue in undici?

---

A potential temporary solution though is to pass a non-Blob/File type to upload, triggering this code path instead: https://github.com/supabase/storage-js/blob/1a7d98c3e8f90c43ab7c7c2b52a34f99bb0736b7/src/lib/StorageFileApi.ts#L81-L83:

const buffer = await blob.arrayBuffer();
const result = await supabase.storage
  .from("avatars")
  .upload(fileName, buffer, {
    cacheControl: "3600",
    contentType: blob.type,
    upsert: true,
  });

[petebacondarwin]

Cool. In that case I am going to close this, since there is nothing to track here and you have provided a workaround.