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.

Uploading Files to Shopify and attaching them to products

Solved

Uploading Files to Shopify and attaching them to products

ZoXo
Tourist
4 1 0

I have in place a method to upload images using the REST API.  It works ok, the filename is correct, but it is so inconsistent that it has become a problem for production and cannot be relied upon when creating new products because it errors out about 1 out of 5 times.

 

so, trying to use GraphQL Admin API but am running into this issue:

 

Mutation ProductCreateMedia has no filename as a parameter, so while it succesfully uploads and attaches the image to the product, there is an arbitrary filename created.

 

Mutation ProductUpdateMedia can only operate on images that are already attached to the product.  I cannot verify this, but in practice the process does not error out, but it also does not attach a new image.

 

Mutation FileCreate is great at uploading the file, giving it the correct filename, but then ProductCreateMedia

creates a new file and appends the UUID ( since the filename already exists ), and ProductUpdateMedia does not

attach the file.

 

I suppose I can use FileCreate first, ProductCreateMedia next, ProductUpdateMedia to choose the correctly named file, the delete the other one, but that's the long way around and if I have to then I have to.

 

If anyone can explain a better way to accomplish this.....

Accepted Solution (1)

ZoXo
Tourist
4 1 0

This is an accepted solution.

Thanks to Eric-HAN's suggestion I have been able to successfully create a way to do this:

 

1) using the productCreateMedia mutation allows the upload of the image while simultaneously attaching it to the product. Since the returned

payload includes the Media id

2) using the fileUpdate mutation allows the renaming of the file to the correct filename and I am left with only 1 image correctly attached to the

product.

 

Now, if only Shopify can solve the problem when I want to use that image again on another product........

 

Shopify?..........

View solution in original post

Replies 3 (3)

Eric-HAN
Shopify Partner
275 30 29

Hi, there  

I think  ProductUpdate supports the direct way to link a media to an existing product . 

mutation UpdateProductWithNewMedia($input: ProductInput!, $media: [CreateMediaInput!]) {
  productUpdate(input: $input, media: $media) {
    product {
      id
      media(first: 10) {
        nodes {
          alt
          mediaContentType
          preview {
            status
          }
        }
      }
    }
    userErrors {
      field
      message
    }
  }
}
variables
{
  "input": {
    "id": "gid://shopify/Product/912855135"
  },
  "media": [
    {
      "originalSource": "https://cdn.shopify.com/shopifycloud/brochure/assets/sell/image/image-@artdirection-large-1ba8d5de56c361cec6bc487b747c8774b9ec8203f392a99f53c028df8d0fb3fc.png",
      "alt": "Gray helmet for bikers",
      "mediaContentType": "IMAGE"
    },
    {
      "originalSource": "https://www.youtube.com/watch?v=4L8VbGRibj8&list=PLlMkWQ65HlcEoPyG9QayqEaAu0ftj0MMz",
      "alt": "Testing helmet resistance against impacts",
      "mediaContentType": "EXTERNAL_VIDEO"
    }
  ]
}
- Helpful? Please hit Like and mark it as a solution
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me    Buy Me A Coffee
ZoXo
Tourist
4 1 0

https://community.shopify.com/c/shopify-discussions/same-image-s-duplicating-across-multiple-product...

 

After several attempts, the same conclusion is drawn:

 

Using the UpdateProductWithNewMedia mutation lacks a filename parameter and Shopify gives it a name. 

example - QPJxfRCdm5KsdE9HiXTQkWEvHHYCHiGwEfc_bVc9zHw

 

The mutation also does not return the file id, so you cannot follow it with a FileUpdate mutation to change the filename.

 

You can upload a file and since you have the filename parameter it will be named correctly, but once you update the product by adding it

a new file is created.

 

The above link is a thread dedicated to this very issue and has been ongoing for over a year and Shopify is not doing anything to address it.

Someone has developed a paid service to address this issue.  I have not tried it and cannot justify spending even more for such a simple bug.

 

I am back to developing the roundabout way of doing this unless another suggestion creates a new path to follow.

 

Thanks for the reply, but unless you can tell me how to use the UpdateProductWithNewMedia mutation and give the resulting file the correct

name, we are still stuck with oversized file storage due to duplicate images.

ZoXo
Tourist
4 1 0

This is an accepted solution.

Thanks to Eric-HAN's suggestion I have been able to successfully create a way to do this:

 

1) using the productCreateMedia mutation allows the upload of the image while simultaneously attaching it to the product. Since the returned

payload includes the Media id

2) using the fileUpdate mutation allows the renaming of the file to the correct filename and I am left with only 1 image correctly attached to the

product.

 

Now, if only Shopify can solve the problem when I want to use that image again on another product........

 

Shopify?..........