Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: BUG: line item uploaded images wrongly downloading as AVIF

BUG: line item uploaded images wrongly downloading as AVIF

ivanhojvat
Shopify Partner
6 0 0

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

Replies 3 (3)

ivanhojvat
Shopify Partner
6 0 0

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

 

2- 
 
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- 

2- 

hamblyfreeman
Shopify Partner
3 0 0

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
Shopify Partner
6 0 0

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>