ユーザー ファイルのアップロード

  • 3 分

次の演習では、アプリを拡張して、ファイルのアップロードをサポートできるようにします。 Microsoft Graph を使用してファイルをアップロードするには、2 つの方法があります。 最も簡単な方法は、/me/drive/root:/FolderA/FileB.txt:/content などのリソースを指定して単一の PUT 要求を使用することです。 この方法は 4 MB に制限されます。 より複雑な方法では、アップロード セッション として一連の HTTP 要求が必要となります。

Microsoft Graph SDK によってこの複雑な方法が簡単になります。 OneDriveLargeFileUploadTask オブジェクトが、詳細をすべて処理します。

const uploadTask = await MicrosoftGraph.OneDriveLargeFileUploadTask.create(
  graphClient, file, {
    path: "/",
    fileName: file.name,
    rangeSize: 1024 * 1024 // must be a multiple of 320 KiB
  }
);
const response = await uploadTask.upload();

file 引数は、ファイル ストリーム オブジェクトです。 これは、Web ブラウザーの場合に、ブラウザーのファイル入力要素によって返されるものです。

<input type="file" onchange="fileSelected(this);" />

ユーザーがファイルを選択すると、onchange イベント ハンドラーが、選択したファイルにアクセスできるようになります。

function fileSelected(e) {
  // Add your code here; e.files[0] contains the file stream to upload the
  // 1st file selected by the user; e.files[1] if a 2nd file was uploaded etc.
}