JpegSerialCamの画像をdropboxにupload

[a take]

標記の件、チュートリアルに JpegSerialCamの画像を WEBに表示するというのがあったので これをベースに ボタンを押すと 画像を dropboxにuploadさせたいのですが

var obniz = new Obniz("-");
var dbx = new Dropbox.Dropbox({ accessToken: '********-*******************************************************' });
obniz.onconnect = async function () {

var cam = obniz.wired("JpegSerialCam", {vcc:0, cam_tx:1, cam_rx:2, gnd:3});
await cam.startWait({baud: 57600});
await cam.setSizeWait("640x480");

await cam.takeWait(); // baud is already changed to 57600.

const jpegData = await cam.takeWait();
document.getElementById("image").src = "data:image/jpeg;base64," + cam.arrayToBase64(jpegData);

obniz.switch.onchange = function(state) {
$('#print').text(state);
obniz.display.clear();
obniz.display.print(state);

}
$('#SAVE_PIC').click(function () {

dbx.filesUpload({path: '/pic.jpg', contents: cam.arrayToBase64(jpegData), mode: 'overwrite' })

obniz.display.clear();
obniz.display.print("SAVE");
});
}

とすると 当たり前ですが Base64でエンコされるため uploadされたファイルは 画像としては表示できません。

Base64を外して

    dbx.filesUpload({path: '/pic.jpg', contents: jpegData, mode: 'overwrite' })

とすると
　　undefined
で進みませんでした。

申し訳ございませんが JpegSerialCamの画像をdropboxにuploadする方法を教えていただけませんでしょうか

[Yuki Sato]

@a-take

jpegDataですが、配列変数となっております。
dropboxのドキュメントにはcontentsとしては"Objectを入れる"となっていて曖昧なのですが、Blobに変換することでアップロードが可能なようです。

jpegData = new Blob(jpegData);

や

var myArr = new Uint8Array(jpegData);
jpegData = new Blob(myArr, {type: "octet/stream"});

などで一度試してみて下さい。

以下参考にしたサイトです
https://stackoverflow.com/questions/34399049/dropbox-direct-upload-files-from-browser
https://stackoverflow.com/questions/36985406/javascript-save-typed-array-as-blob-and-read-back-in-as-binary-data

[a take]

コメントありがとうございます。

Blob やってみましたが TypeError となります。
参考のサイト見ながら 色々やっていますが 進展なしといったところです。

難しいことをやってるつもりはないのですが....如何せん資料が少なすぎてお手上げです。

[Yuki Sato]

@a-take こちらでも実際に動かしてみたところ、確かにBlobだとだめでした。
Uint8Arrayのままcontentsに入れた場合uploadに成功しましたので、以下お試し下さい。

var myArr = new Uint8Array(jpegData);
dbx.filesUpload({path: '/pic.jpg', contents: myArr, mode: 'overwrite' })

[a take]

度々のご支援ありがとうございます。
コメント頂いた2行で やっと画像のuploadに成功しました。

ただ、実は この2行を追加しても
undefined
となって uploadできないまま終了していたのですが、
結局 Drop-boxの accessTokenを再Generateすると
前回とは違うaccessTokenが発行され、これをプログラムに書き込んだ所 無事 uploadできた次第です。
(ご回答頂いた後 1wk 散々悩んで まさかの結果)

PS　接近センサと組み合わせて 自動撮影を計画中です

[Yuki Sato]

@a-take そうだったのですね！動いてよかったです。
近接センサ＋自動撮影は面白そうですね。ぜひ完成されたら教えて下さい！