ajax - FormData を使用した JavaScript Blob のアップロード

Question

JavaScript で作成した BLOB をサーバーにアップロードする際に問題が発生しています。基本的な考え方は、ユーザーが画像をアップロードし、javascript で画像を中央でトリミングし、送信前にダウンサンプリングするというものです。

画像操作は正常に機能していますが、アップロード自体が正しく機能していません。キャンバスから BLOB へのアップロードと変換を行うコードを次に示します。

function uploadCanvasData()
{
    var canvas = $('#ImageDisplay').get(0);
    var dataUrl = canvas.toDataURL("image/jpeg");

    var blob = dataURItoBlob(dataUrl);

    var formData = new FormData();
    formData.append("file", formData);

    var request = new XMLHttpRequest();
    request.onload = completeRequest;

    request.open("POST", "IdentifyFood");
    request.send(formData);
}

function dataURItoBlob(dataURI)
{
    var byteString = atob(dataURI.split(',')[1]);

    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++)
    {
        ia[i] = byteString.charCodeAt(i);
    }

    var bb = new Blob([ab], { "type": mimeString });
    return bb;
}

サーバーはファイルがアップロードされていないと主張し、クロムを使用してリクエストを調べると、リクエストのペイロードが次のように表示されます。

------WebKitFormBoundaryyzYbm61DKgS09tpB
Content-Disposition: form-data; name="file"

[object FormData]
------WebKitFormBoundaryyzYbm61DKgS09tpB--

送信されるフォームのペイロードとは対照的にinput type="file"

------WebKitFormBoundaryUOn3WXb7pKLmOxRZ
Content-Disposition: form-data; name="imagefile"; filename="-3YQHiVaGWo.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryUOn3WXb7pKLmOxRZ--

したがって、XMLHttpRequest は呼び出しの結果をアップロードしているように見えますblob.toString()

ここで私が間違っていることを誰かが知っていますか? 私が使用すべきより良いアプローチはありますか？