この投稿については、現在、解決策がみつからず、保留しています。ただ、やりたいこととやったことを書き残しておいて、あとで改めて挑戦するときのメモです。今後、解決した時にはその方法を更新します。
やりたいこと
AWS AppSyncを利用して、JavaScriptからファイルをアップロードする。利用するライブラリはaws-amplifyのみとする。例で利用されているreact-apolloは今回は利用しません。
その理由は、ReactなどUIを持つサービスだけではなく、将来的にはコマンドから実行して、ファイルのアップロードと関連したメタデータのdynamodbへの格納を同時に実行したいと考えているためです。
やったこと
まず、サンプル実装を参考にして、Reactアプリ上にファイルを選択するフォームを設けました。さらに、sendボタンを押すことで、選択したファイルをappsyncを経由して送信する機能を実装しました。
ここで、ファイル用のオブジェクト(S3InputObject)が持つオブジェクトの要素は、サンプルで書かれている通りの要素を指定しました。(次の通り)
input S3ObjectInput { bucket: String! region: String! localUri: String visibility: Visibility key: String mimeType: String }
さらに、データをPOSTするためのスキーマもサンプルの通り、次のようにしました。
export.modules = ` mutation ($name: String, $visibility: Visibility, $file: S3ObjectInput) { addPicture( name: $name visibility: $visibility file: $file ) { name } }`;
サーバ側の設定などもサンプルに合わせています。異なる点は、選択されたファイルをGraphQLのスキーマの変数として格納するコーディングを、サンプルではreact-apollowのコンポーネントに頼っていますが、今回はそれを利用しないようにしました。
ここで、データを格納する方法についてですが、S3ObjectInputの要素の1つであるlocalUri以外は適切に当てはめることが容易にできます。ただ、localUriについては、どのように挿入すれば良いかがわからず、結局、解決していません。
調査した結果、FileReaderを用いて、Array Bufferにすれば良いというところまではわかったのですが、下記の3種類の関数を試しても、どれもうまく動作しませんでした。
const reader = new FileReader(); reader.readAsDataURL(obj); reader.readAsBinaryString(obj); reader.readAsArrayBuffer(obj);
今のところ、わかっているのは、以上のようになります。
参考サイト