Shopify Line Item Properties Image upload via Ajax

Question

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.

Answer 1

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.

http://cloudinary.com/blog/direct_upload_made_easy_from_browser_or_mobile_app_to_the_cloud

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 http://stackoverflow.com/questions/6978156/get-base64-encode-file-data-from-input-form
}

// standard Jquery ajax post

jQuery.post("https://api.cloudinary.com/v1_1/dn5wucjj2/upload", 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: https://support.cloudinary.com/hc/en-us/articles/208335975-How-safe-secure-is-it-to-use-unsigned-upload-from-web-browsers-or-mobile-clients-