Übung – Hochladen von Benutzerdateien

Abgeschlossen

Dies sind die Schritte, um ein Upload-Feature zu Ihrer App hinzuzufügen.

Anzeigen eines Browsereingabeelements und Ereignishandlers für das Hochladen

1. Öffnen Sie die Datei index.html.

2. Suchen Sie die Zeile <ul id="downloadLinks"></ul>, und fügen Sie das folgende Markup unmittelbar danach hinzu:

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

   Der resultierende <div>-Inhaltsblock sollte folgendermaßen aussehen:

   <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. Öffnen Sie nun die ui.js-Datei im Code-Editor, und fügen Sie den folgenden Code am Ende der Datei hinzu:

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

Hinzufügen einer Funktion, um die Datei mittels Microsoft Graph-SDK hochzuladen

1. Öffnen der Datei graph.js in Ihrem Code-Editor.

2. Fügen Sie diese Funktion am Ende der Datei hinzu:

   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. Stellen Sie sicher, dass die Datei graph.js gespeichert wird, bevor Sie fortfahren.

Ausführen der App

Aktualisieren Sie Ihren Browser. Wenn Sie sich anmelden, sollten Sie eine Schaltfläche „Upload“ sehen.

Wählen Sie die Schaltfläche aus, und wählen Sie eine Datei von Ihrem Computer. Möglicherweise stellen Sie fest, dass beim ersten Hochladen ein neues Zustimmungs-Popup angezeigt wird, in dem die Berechtigung zum Schreiben und Lesen von Dateien angefordert wird. Wenn das Hochladen der Datei beginnt, wird eine Nachricht erscheinen.

Wenn Sie dies zum ersten Mal machen, werden Sie ein anderes Zustimmungs-Popup-Fenster sehen, da Sie jetzt Dateien schreiben wollen.

Wenn das Hochladen abgeschlossen ist, zeigt die Nachricht die Anzahl der hochgeladenen Bytes, und die Datei erscheint in der Dateiliste.

Beenden Sie Ihren Node.js-Server, indem Sie in Ihrem Terminalfenster STRG+C drücken.