How to set file.type when upload to R2 using persingedUrl?

[leo7]

I can successfully upload image files, but when access the image URL directly it will download instead of display in the browser. I checked the file type, it’s ‘multipart/form-data’ instead of ‘image/xxx’

Here’s my code:

generate the persignedUrl:

    const putObjectCommandProps = {
      Bucket     : configs.bucketName,
      Key        : putObjectKey,
      ContentType: objContentType, // this is the file type e.g. 'image/png'
    };
    const uploadSignedUrl = await getSignedUrl(
      S3,
      new PutObjectCommand(putObjectCommandProps),
      { expiresIn },
    );

upload from frontend:

  const uploadRes = await axios.put(cloudflareR2Auth.signedUrl, file, {
    headers: { 'Content-Type': 'multipart/form-data' },
  });

[leo7]

@leo7

headers: { 'Content-Type': 'multipart/form-data' },

I’ve tried to change this to file.type, but will get a CORS error after that. (I followed https://kian.org.uk/configuring-cors-on-cloudflare-r2/ to set allow cors)

[leo7]

Fixed by following the below instruction to reset the CORS