練習 - 上傳使用者檔案

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