Zenn
💡

Amplify Upload Filesについて

2023/04/17に公開
Amplify
tech

ファイルのアップロード

  • putメソッドでアップロードするファイルをawsのS3に格納します。成功すると{key: S3 Object key}を返します。

ブラウザでの画像アップロード

  • ブラウザで画像をアップロードするコードは以下
async function onChange(e) {
  const file = e.target.files[0];
  try {
    await Storage.put(file.name, file, {
      contentType: "image/png", // contentType is optional
    });
  } catch (error) {
    console.log("Error uploading file: ", error);
  }
}

<input type="file" onChange={onChange} />;
  • 注意点：contentTypeはメタデータであり、このcontentTypeに基づいてS3にアップロードされたファイルが保存されます。例えば、'example.jpg'というファイルをアップロードすると'Type'は'jpg'に設定されますが、contentTypeが'text/html'に設定されているとファイルはHTMLファイルとして扱われます。
  • アップロードの進行状況を見るにはprogressCallbackを使用します。
Storage.put("test.txt", "File content", {
  progressCallback(progress) {
    console.log(`Uploaded: ${progress.loaded}/${progress.total}`);
  },
});
  • アップロードの一時停止と再開
  • resumable: true オプションをPut　APIに渡すと、pause, resumeオブジェクトが返されます。アップロードの任意の時点でアップロードのキャンセルをする場合はStorage.cancel APIを利用できます。
const upload = Storage.put(file.name, file, {
  resumable: true,
});

upload.pause();

upload.resume();

Storage.cancel(upload);
  • アップロード中にページの更新が入ると、同ファイルのアップロードが再初期化されて、アップロードが途中から再開されます。
const upload = Storage.put(file.name, file, {
  resumable: true,
});


// This duplicate uploads will resume the original upload.
const duplicateUpload = Storage.put(file.name, file, {
  resumable: true,
});
  • 1時間以上アップロードがあると、自動的にキャンセルとなります。
  • イベントハンドラー
  • resumable: trueフラッグを使うと、completeCallback, progressCallback, errorCallback関数が使えます。
const upload = Storage.put(file.name, file, {
        resumable: true,
        completeCallback: (event) => {
            console.log(`Successfully uploaded ${event.key}`);
        },
        progressCallback: (progress) => {
            console.log(`Uploaded: ${progress.loaded}/${progress.total}`);
        },
        errorCallback: (err) => {
            console.error('Unexpected error while uploading', err);
        }
})

参考資料

Discussion