BUG: line item uploaded images wrongly downloading as AVIF

[ivanhojvat]

I have Windows 11 and Chrome, but same happens on Windows 10.

I'm including PNG and JPG images on my add to cart form, but then in the cart page when I click the link to download them, they are downloaded as .AVIF, which is not supported by my browser neither any tool I have in Windows. Renaming the file doesn't solve the problem.

If I right click on the link and choose Save file as, the files are downloaded as JPG or PNG correctly, although some JPG files are downloaded as JFIF instead.

The problem happens with some image files I have, but everything works well with some others.
The problem always happens with images uploaded as Blob created from a canvas exported to blob in any format (image/png, image/jpeg).

examples:

working uploaded PNG
https://cdn.shopify.com/s/files/1/0583/0410/2571/uploads/53c665b74fd5901835c128155e499968.png

Not working uploaded JPG
https://cdn.shopify.com/s/files/1/0583/0410/2571/uploads/411ceab932ba7f2ebf113bc05998002f.JPG

Not working uploaded blob (image/jpg)
https://cdn.shopify.com/s/files/1/0583/0410/2571/uploads/9d523acfbceed86428eddc8fdb08a303.jpg

Don't get confused by the examples, there are files in PNG format that don't work either.

Regards

[ivanhojvat]

Adding more info
In the case of the blob, I'm getting it from a canvas with two images.

1- https://cdn.shopify.com/s/files/1/0598/0945/products/1256_S20_LaguardiaDoppKit_Airplanes_C.png?v=166...

2- 

https://cdn.shopify.com/s/files/1/0598/0945/products/1256_S20_LaguardiaDoppKit_Airplanes_A.png?v=165...

Later, downloading the file generated as blob from the canvas, its saved with the AVIF format.

However, if I use in the canvas random images that I found on a different store, this time the downloaded file is webp (which is supported by my browser).
Random images:
1- 

https://cdn.shopify.com/s/files/1/0004/7756/0883/files/Custom_Seedsheet_Version_5.jpg?v=1678344762

2- 

https://cdn.shopify.com/s/files/1/0004/7756/0883/products/Cantaloupe_PMR_Delicious_300x.jpg?v=161581...

[hamblyfreeman]

Hey Ivan - how are you handling the file upload itself? I'm struggling to figure out how to do that via Storefront API (hoping that's what you're using!)

[ivanhojvat]

You can upload a file this way:

<input id="myfile" type="file">
<button type="button" id="mybutton">Add to cart</button>

<script type="module>
const data = new FormData();
const file = document.getElementById('myfile');
const button = document.getElementById('mybutton');
button.addEventListener('click', ()=>{
  data.append('id', 40547389603910); //variant ID
  data.append('properties[My Image]', file.files[0]); //note the ".files[0]"
  fetch('/cart/add.json', {method: 'POST', body: data});
});
</script>