How to send image file in shopify add to cart form or via AJAX

[Joshua_Harris1]

Hi everyone,

I am using an HTML canvas element for a product where users can edit some features and it appears on the canvas. I want to be able to take a .png image of the canvas and add it as a property on the product when it gets added to the cart. So far I have the .png image extracted from the canvas as either a javascript File object or Blob object. The trouble is I'm not sure how to upload this file so that it is a property on the product that is being added to cart.

I am able to do it with a normal file input element like the code below. When I set an image using the file picker then submit the form, the image is succesfully uploaded to shopify and becomes a property of the product.

<input type="file" name="properties[design your own image]" id="file-upload">

How can I make this happen dynamically, with a File or Blob object I provide? I tried manually setting the input.FileList to have the File I have generated, but I believe this isn't possible for security reasons.

I would be happy with either a solution that uses a normal HTML form or an AJAX request.

Thanks in advance!

[Jason]

This isn't something you're going to be able to do with line item properties.
Uploading files as line item properties will require a file input, and that the form is submitting via a standard non ajax multi type form post. 

Since you can't prefill the value of a file field with blob data you can't use the canvas creation as is. It's not ideal, but you may need to generate the image from the canvas and push that to a new tab / window for downloading (or enable download from the current page). Once the user has the image locally, it can then be added into the file field.

Another option - albeit more complex - is to send the data to your own app that can process the blog data and store it wherever makes sense for your needs. There are cross domain issues to consider here as well.

[Joshua_Harris1]

Hi Jason,

Yeah I was afraid this was going to be the case! I think I will send an ajax request to my own app and host the image on that, then use the Shopify API to set a property on the line item with the URL to the image. 

Thanks for your help

[Saifullah_Bin_A]

Hi Jason,

I am astonished how they have succeded file upload via ajax here: https://shesmysister.co.nz/products/sonia-top

Choose front and back color and click add to cart. The preview image link will be shown in the cart that is clearly from shopify server.

Any thought?

[Jason]

I don't see any ajax uploading on that page so not sure what the astonishing part is. Care to explain?

[Saifullah_Bin_A]

How the custom design file is being saved on shopify server ? Check product preview link in the cart.

i.e.: https://cdn.shopify.com/s/files/1/1212/1922/uploads/0fbc72f4c84d2e61984ca64442f78764.png

[Eyal2]

Hi Saifullah,

Did you ever find out how shesmysister.co.nz managed to make this work? I would also like to add a saved canvas to my orders and had no luck so far and this is really slowing me down.

Best,

Eyal

[Polar_Bear]

Just an update for anyone still watching.

The shop shesmysister.co.nz uses an app for the live preview and the image in the cart.

https://apps.shopify.com/infinite-live-preview-options

[jam_chan]

I've been looking for a solution to this problem. My current app is to add a custom item with the cart ajax API. The item has some line item properties added by me

Since the API cannot support uploading images, I think a possible way is to use the app proxy. When the customers upload an image, proxy to a server and upload the image to the Shopify store.

After that, get the image link and use it as a line item property. Then the image can be passed as a link to the order.