HaneCa

この投稿については、現在、解決策がみつからず、保留しています。ただ、やりたいこととやったことを書き残しておいて、あとで改めて挑戦するときのメモです。今後、解決した時にはその方法を更新します。

やりたいこと

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);

今のところ、わかっているのは、以上のようになります。

参考サイト

• サンプル実装 (github.com/aws-amplify-graphql)
• localUriの中身について