Shopify広告申込情報のプロパティAjaxによる画像アップロード

Question

ShopifyでAjax経由で広告申込情報のプロパティ画像をアップロードすることはできますか？ ShopifyはAjax経由のファイルアップロードを許可していません。

私は、Cloudinaryを使用して回避策を考え出しました（Shopifyに直接アップロードしないでください）。私はここでそれを共有すると思った。

Answer 1

Shopify内の広告申込情報として画像をAjaxにアップロードするソリューションです。

最初は、画像をBASE64に変換してみました.AjaxはBASE64文字列をアップロードしました。しかし、これは画像内ではなく、BASE64文字列全体を表示した順番で機能しました...

私は、Cloudine - 画像アップロードサービスに目を向けました。 CloudinaryはBASE64でエンコードされた画像を自動的に「適切な」画像に変換します。

Cloudnayでは、これを機能させるために署名のない画像のアップロードを有効にする必要があります。いったん有効

http://cloudinary.com/blog/direct_upload_made_easy_from_browser_or_mobile_app_to_the_cloud

、我々はCloudinaryにBASE64イメージをAJAXをアップロードすることができます。

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は、画像がアップロードされたときにCloudinaryが返すURLです。これをaddToCart関数に渡すことができます。これはShopifyのカートに商品を追加します。

チェックアウトでは、顧客に画像のURLが表示されます（理想的ではありません）。しかし、バックエンドでは、注文の中で、ShopifyはURLをリンクに変換します。

セキュリティを懸念しているユーザーの場合：https://support.cloudinary.com/hc/en-us/articles/208335975-How-safe-secure-is-it-to-use-unsigned-upload-from-web-browsers-or-mobile-clients-