연습 - 사용자 파일 업로드

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