canvasのtoDataURLメソッドをjavascript経由以外でS3にアップロードしたい。

Question

canvasの画像をjavascriptでs3にアップロードする仕様でコードを書いていましたが、どうしてもシークレットキーが露出してしまう為パブリックでは利用できません。
そこでajaxでrails側に渡しaws-sdkを使ってアップロードをさせたいのですが、うまくいかず困っています。

まず、blobでrails側に渡せない（javascriptネイティブではないようですが・・・）。

toDataURLだと渡せますがs3で画像として認識されず、文字列若しくは真っ黒で表示されています。
もう一歩と言うところだと思うんですがここから進めることができません。
アドバイスいただけないでしょうか？

def uploadtoaws
    @time = Time.now.strftime("%Y-%m-%d_%H:%M:%S")
    @content = params[:content]
    @user_id = params[:user_id]
    @index_id = params[:index_id]
    
    s3 = Aws::S3::Client.new(
      :region => 'ap-northeast-1',
      :access_key_id => Rails.application.secrets.aws_access_key_id,
      :secret_access_key => Rails.application.secrets.aws_secret_key
      )
    myBacket = 'mybacket'
    s3.put_object(
        :bucket => myBacket,
        :key    => 'user' + @user_id + '_namenum' + @index_id + '_' + @time + ".png",
        :content_type => 'image/png',
        :body => @content
        )
  render nothing: true
  end

$('#save-button').click(function(){
	        var canvas = document.getElementById('canvas');
                var contentWithPrefix = canvas.toDataURL('image/png');
		var contentSplit = contentWithPrefix.split(",");
          # mimetype delete
		var content = contentSplit[1];
		var content = canvas.toDataURL('image/png');
		// var blob = Base64toBlob(content);
		$.ajax({
		    url: "/users/" + gon.user_id + "/indices/" + gon.index_id + "/uploadtoaws",
		    type: "post",
		    data: {
		    	content: content,
		    },
		    datatype: "text",
		    success: function(data){
		      alert('success');
		    },
		    error: function(jqXHR, textStatus, errorThrown){
  			　alert(textStatus);
    		    alert(errorThrown.message);
    		    alert(jqXHR.status);
    		    alert(jqXHR.responseText);
    		},
		});

mimetypeを残してみたりもしましたが画像は真っ黒のままでした。

よろしくお願いします。

Answer 1

どうしてもシークレットキーが露出してしまう為パブリックでは利用できません。

Pre-signed URLとしてアップロード先を生成してしまう、という方法はどうでしょうか。これでしたら、アップロード処理でRailsを経由させず、直接S3に投げることができます（参考）。

Comments

[maisumakun]

FormData.prototype.appendを使えば、BlobデータをAjax送信に乗せることも可能です。

https://developer.mozilla.org/ja/docs/Web/API/FormData/append

[hokosugi]

ご回答ありがとうございました。
２つの解決策のうち、２つ目を参考にして解決しました。
var blob = Base64toBlob(content);
var fd = new FormData();
fd.append('content', blob);
と３行足しただけでblobをrails側に送れました。
１つ目は自分のレベルではすんなりと理解出来なかったため時間かけて内容把握していきます。
改めてありがとうございました。