Product valid jpg upload says Image: File extension doesn't match the format of the file

Solved

Product valid jpg upload says Image: File extension doesn't match the format of the file

tkgc
Shopify Partner
4 1 1

I'm just trying to add media to my product using this URL: https://greenchoice.gumlet.io/sm-gc/00028000823177.jpg but Shopify refuses to use and gives that error.  Looking at the file metadata:

 

$ identify -verbose 00028000823177.jpg 
Image:
  Filename: 00028000823177.jpg
  Format: JPEG (Joint Photographic Experts Group JFIF format)
  Mime type: image/jpeg
  Class: DirectClass
  Geometry: 600x600+0+0

 

Accepted Solution (1)

tkgc
Shopify Partner
4 1 1

This is an accepted solution.

I was able to fix this with two steps:
1) Make sure the system serving up the images (S3 in my case, but could be any file server) has the full content-type header of "image/jpeg".  S3 was defaulting to just "image" for unknown reasons.
2) Contact Shopify and ask them to clear your store's image cache.  Apparently they cache these even if they fail to get assigned to the product.  This process takes about 36hrs, be sure to wait at least that long until you try to save a URL or it will get cached again.

View solution in original post

Replies 5 (5)

tkgc
Shopify Partner
4 1 1

I'm updating several thousand products and 1/3 of them have this issue.  It is an official JPEG -- why doesn't Shopify let me use it?

psycho
Visitor
2 0 0

Yeah, I got the same issue for two months and can only upload via file upload. Wasted lots of time, can't add any images through my own api (file server).😑

tkgc
Shopify Partner
4 1 1

This is an accepted solution.

I was able to fix this with two steps:
1) Make sure the system serving up the images (S3 in my case, but could be any file server) has the full content-type header of "image/jpeg".  S3 was defaulting to just "image" for unknown reasons.
2) Contact Shopify and ask them to clear your store's image cache.  Apparently they cache these even if they fail to get assigned to the product.  This process takes about 36hrs, be sure to wait at least that long until you try to save a URL or it will get cached again.

psycho
Visitor
2 0 0

Serving images as "image/jpeg" might not going to solve the problem

 

I setup my image server with nginx config as follows:

    location ^~ /images/ {
        add_header cache-control max-age=0;
        add_header content-type "images/jpeg";
        add_header Access-Control-Allow-Origin *;
        alias /home/xxxxx/images/;
        autoindex on;
    }

 

But still getting the same issue with error "File Extension Doesn't Match The Format Of The File"

 

I was able to solve this by reconvert the image to png/jpeg and save it again (by turn images into base64 string and turn back into images, this is ridiculous but it works lol).

 

Conversion code is down below, written in go. 

func Base64ToPng(data string) (err error) {

	idx := strings.Index(data, ";base64,")
	if idx < 0 {
		return errors.New("invalid image")
	}
	ImageType := data[11:idx]

	unbased, err := base64.StdEncoding.DecodeString(data[idx+8:])
	if err != nil {
		return errors.New("cannot decode base64")
	}

	r := bytes.NewReader(unbased)
	switch ImageType {
	case "png":
	case "jpeg":
		im, err := jpeg.Decode(r)
		if err != nil {
			return errors.New("bad jpeg")
		}

		buf := new(bytes.Buffer)
		if err := png.Encode(buf, im); err != nil {
			return errors.New("unable to encode png")
		}
		r = bytes.NewReader(buf.Bytes())
	}

	im, err := png.Decode(r)
	if err != nil {
		return errors.New("bad png")
	}

	f, err := os.OpenFile("PATH_TO_SAVE_IMAGE", os.O_WRONLY|os.O_CREATE, 0777)
	if err != nil {
		return errors.New("cannot save file to disk")
	}

	png.Encode(f, im)
	return nil
}

There's only limit resource online in regards to this issue and the response message from shopify api is quite unclear.

Hope this will help anyone suffering from this issue, I've being dealing with this for about 2 months, but finally solved it.

AlexO_Stibo
Shopify Partner
5 0 1

Hi,

 

Do you know if there is a way to clear this cache with the API call?

I've tried running https://shopify.dev/docs/api/admin-graphql/2023-10/mutations/fileAcknowledgeUpdateFailed which in theory should "Acknowledges file update failure by resetting FAILED status to READY and clearing any media errors." but I'm getting this error instead:

 

{"data":{"fileAcknowledgeUpdateFailed":{"files":null,"userErrors":[{"code":null,"field":["fileIds"],"message":"File with id gid://shopify/MediaImage/XXX is not in the READY state."}]}},"errors":null

 

I've also tried to update this image with https://shopify.dev/docs/api/admin-graphql/2023-07/mutations/fileupdate but all I get is:

 

{"data":{"fileUpdate":{"files":null,"userErrors":[{"code":null,"field":["files"],"message":"Non-ready files cannot be updated."}]}},"errors":null}

 

Any other possible solutions?