Shopify Line Item Properties Image Upload Via Ajax

- 1 answer

Is it possible to upload a line item property image via Ajax with Shopify? Shopify doesn't allow file uploads via Ajax.

I've come up with a workaround using Cloudinary (not directly uploading to Shopify). I thought I'd share it here.



A solution to Ajax upload of images as line item properties within Shopify.

Initially, I tried converting the image to BASE64, and Ajax uploading the BASE64 string. This worked, however, within the order it showed the entire BASE64 string, not an image...

So, I turned to Cloudinary - an image upload service. Cloudinary automatically converts BASE64 encoded images back into 'proper' images.

In Cloudinary, we need to enable unsigned image uploading for this to work.

Once enabled, we can AJAX upload the BASE64 image to Cloudinary.

var data = {
    upload_preset: "019au6h3", // the unsigned image preset within cloudinary
    tags: "foo", // any tags you wish to apply
    context: "photo=phototitle",
    file: encodedImage // the BASE64 encoded image file

// standard Jquery ajax post"", data).done(function(data) {
   // do something here
}).then(function(data) {
    addToCart(data.secure_url) // addToCart is the ajax add to cart post function (whatever function your theme uses, modified to accept an the returned image)

data.secure_url is the url that Cloudinary returns when the image has uploaded. We can then pass this to our addToCart function - which adds the product to Shopify's cart.

In the checkout, the customer will see a url of their image (not ideal). However, on the backend, within the order, Shopify turns the url into a link.

For those concerned about security: