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

[tkgc]

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

[tkgc]

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]

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 · 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]

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.

[olena_pavilion]

Hi, I had the same issue, but adding header "image/jpeg" to custom media service worked perfectly! Could be the reason why it didn't work for you is that you used "images/jpeg" instead of "image/jpeg"?

[AlexO_Stibo]

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?