Упражнение — отправка файлов пользователей

Завершено

Ниже представлены шаги для добавления функции отправки в приложение.

Отображение входного элемента браузера и обработчика событий для отправки

1. Откройте файл index.html.

2. Найдите строку <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>
   

3. Откройте файл 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;
   }
   

Добавление функции для отправки файла с помощью SDK Microsoft Graph

1. В редакторе кода откройте файл graph.js.

2. Добавьте эту функцию в нижней части файла:

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

3. Перед продолжением сохраните файл graph.js.

Запуск приложения

Обновите страницу браузера. При входе вы увидите кнопку отправки.

Нажмите кнопку и выберите файл на компьютере. Вы можете заметить, что при первой отправке отобразится новое всплывающее окно для разрешения на запись и чтение файлов. Когда начнется отправка файла, появится сообщение.

При первом выполнении отобразится еще одно всплывающее окно для предоставления согласия, так как теперь вы запрашиваете запись файлов.

Когда отправка завершится, в сообщении будет показано количество переданных байтов, а файл появится в списке файлов.

Остановите сервер Node.js, нажав клавиши CTRL+C в окне терминала.