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

3 分

アプリにアップロード機能を追加する手順は次のとおりです。

アップロード用のブラウザーの入力要素とイベントハンドラーを表示する

index.html ファイルを開きます。

行 <ul id="downloadLinks"></ul> を検索し、その直後に次のマークアップを追加します。

<!-- Add for file upload -->
<hr />
<input type="file" onchange="fileSelected(this);" />
<div id="uploadMessage"></div>

結果の <div> コンテンツブロックは次のようになります。

<div id="content" style="display: none;">
  <h4>Welcome <span id="userName"></span></h4>
  <!-- Add for file download -->
  <hr />
  <label>Files in your OneDrive root folder:</label>
  <ul id="downloadLinks"></ul>
  <!-- Add for file upload -->
  <hr />
  <input type="file" onchange="fileSelected(this);" />
  <div id="uploadMessage"></div>
</div>

次に、コードエディターで ui.js ファイルを開き、ファイルの最後に次のコードを追加します。

function fileSelected(e) {
  displayUploadMessage(`Uploading ${e.files[0].name}...`);
  uploadFile(e.files[0])
  .then((response) => {
    displayUploadMessage(`File ${response.name} of ${response.size} bytes uploaded`);
    displayFiles();
  });
}

function displayUploadMessage(message) {
    const messageElement = document.getElementById('uploadMessage');
    messageElement.innerText = message;
}

Microsoft Graph SDK を使用してファイルをアップロードする関数を追加する

コードエディターで、graph.js ファイルを開きます。

ファイルの下部に、この関数を追加します:

async function uploadFile(file) {
  try {
    ensureScope('files.readwrite');
    let options = {
        path: "/",
        fileName: file.name,
        rangeSize: 1024 * 1024 // must be a multiple of 320 KiB
    };
    const uploadTask = await MicrosoftGraph.OneDriveLargeFileUploadTask
        .create(graphClient, file, options);
    const response = await uploadTask.upload();
    console.log(`File ${response.name} of ${response.size} bytes uploaded`);
    return response;
  } catch (error) {
    console.error(error);
  }
}