adding appfolder uploadsession sample

Author: patrick-rodgers

samples/approot-uploadsession/.gitignore

@@ -0,0 +1,5 @@
+/build
+
+node_modules/
+
+

samples/approot-uploadsession/package-lock.json

@@ -0,0 +1,24 @@
+{
+  "name": "approot-uploadsession",
+  "version": "0.0.1",
+  "description": "Demonstrates how to create an upload session for the approot special folder",
+  "main": "build/main.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "tsc -p . && webpack --config ./build/webpack.config.js && node ./build/server.js"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@azure/msal-browser": "^3.10.0",
+    "@types/node": "^18.19.26",
+    "express": "^4.18.3",
+    "open": "^10.1.0",
+    "typescript": "^5.4.2",
+    "webpack": "^5.90.3"
+  },
+  "devDependencies": {
+    "webpack-cli": "^5.1.4"
+  }
+}

samples/approot-uploadsession/package.json

@@ -0,0 +1,26 @@
+# AppRoot Upload Session
+
+This sample shows how to create a basic upload session for large files using an application's [special approot folder](https://learn.microsoft.com/graph/api/drive-get-specialfolder).
+
+## Setup
+
+### Create a new Application Registration in Entra ID
+
+1. Creat a new application registration
+2. Add a SPA authentication method
+    - Ensure you allow Access Tokens and ID Tokens
+    - Redirect: https://localhost:8080
+3. Consent to the `Files.ReadWrite` or `Files.ReadWrite.AppFolder` (least privledge) delegated scope
+4. Create a file
+
+### Update application info
+
+1. In [security.ts](./src/security.ts) update the `authority` and `clientId` to match those of the application registration
+2. In [security.ts](./src/security.ts) ensure that the scopes listed in the `loginRequest` object match the scopes consented for your application
+
+## Run
+
+1. Ensure all dependencies are installed `npm install`
+2. Start the application `npm start`
+3. A browser window should auto-launch, if not open a browser and load `http://localhost:8080/`
+4. Using the UX select a file and then select "Do Upload"

samples/approot-uploadsession/readme.md

@@ -0,0 +1,111 @@
+import { applyToken } from "./security.js";
+
+const btn = document.getElementById("go");
+const log = <HTMLDivElement>document.getElementById("log");
+
+function logger(message: string) {
+
+    const p = document.createElement("p");
+    p.innerHTML = message;
+    log.prepend(p);
+}
+
+btn.addEventListener("click", async (e) => {
+
+    e.preventDefault();
+
+    const input = <HTMLInputElement>document.getElementById("the-file");
+
+
+    if (input.files && input.files.length > 0) {
+
+        const file = input.files[0];
+
+        const getFolderInit = await applyToken({
+            method: "GET",
+        });
+
+        const folderInfoResponse = await fetch("https://graph.microsoft.com/v1.0/me/drive/special/approot", getFolderInit);
+
+        const folderInfo = await folderInfoResponse.json();
+
+        const { driveId } = folderInfo.parentReference;
+
+        // rebase the URL to the /drives/{id} pattern
+        const baseUrl = `https://graph.microsoft.com/v1.0/drives/${driveId}/items/${folderInfo.id}`;
+
+        // 1. create upload session
+        const createUploadSessionUrl = `${baseUrl}:/${encodeURIComponent(file.name)}:/createUploadSession`;
+        const createUploadSessionInit = await applyToken({
+            method: "POST",
+            body: JSON.stringify({
+                item: {
+                    "@microsoft.graph.conflictBehavior": "rename",
+                    name: file.name,
+                },
+            }),
+            headers: {
+                "Content-Type": "application/json",
+            }
+        });
+        const uploadSessionInfoResponse = await fetch(createUploadSessionUrl, createUploadSessionInit);
+        const uploadSessionInfo = await uploadSessionInfoResponse.json();
+        if (!uploadSessionInfoResponse.ok) {
+            throw Error(JSON.stringify(uploadSessionInfo, null, 2));
+        }
+        logger(`Created upload session: <pre>${JSON.stringify(uploadSessionInfo, null, 2)}</pre>`);
+
+        // this is the upload url for our new file, it is opaque
+        const { uploadUrl } = uploadSessionInfo;
+
+        // 2. Get a stream representing the file
+        const stream = file.stream();
+        const reader = stream.getReader();
+
+        // 3. Use the reader pattern (or any other) to upload the file
+        let bytePointer = 0;
+        let uploadBytesInfo;
+        reader.read().then(async function pump({ done, value }) {
+
+            if (done) {
+
+                if (value) {
+                    console.error("had value at done");
+                }
+
+                logger(`Upload complete <a href="${uploadBytesInfo.webUrl}" target="_blank">${uploadBytesInfo.name}</a>`);
+
+                return;
+            }
+
+            const contentLength = value.length - 1;
+            const contentRangeStr = `bytes ${bytePointer}-${bytePointer + contentLength}/${(file.size)}`;
+            logger(`Uploading: ${contentRangeStr}`);
+
+            // 4. Execute a series of PUT commands to upload the file in chunks
+            const uploadBytesInit = await applyToken({
+                method: "PUT",
+                body: value,
+                headers: {
+                    "Content-Length": contentLength.toString(),
+                    "Content-Range": contentRangeStr,
+                }
+            });
+            const uploadBytesInfoResponse = await fetch(uploadUrl, uploadBytesInit);
+            uploadBytesInfo = await uploadBytesInfoResponse.json();
+
+            if (!uploadBytesInfoResponse.ok) {
+                throw Error(JSON.stringify(uploadBytesInfo));
+            }
+
+            bytePointer += value.length;
+
+            // Read some more, and call this function again
+            return reader.read().then(pump);
+        });
+
+    } else {
+
+        alert("Please select a file.");
+    }
+});

samples/approot-uploadsession/src/main.ts

@@ -0,0 +1,53 @@
+import { PublicClientApplication } from "@azure/msal-browser";
+
+const client = new PublicClientApplication({
+    auth: {
+        authority: "https://login.microsoftonline.com/{tenant id}/",
+        clientId: "{app id}",
+        redirectUri: "http://localhost:8080",
+    }
+});
+
+await client.initialize();
+
+export async function applyToken(init: Partial<RequestInit>): Promise<Partial<RequestInit>> {
+
+    const loginRequest = {
+        scopes: ["Files.ReadWrite.AppFolder", "User.Read"],
+    };
+
+    let token = "";
+
+    try {
+
+        let tokenResponse = await client.acquireTokenSilent(loginRequest);
+        token = tokenResponse.accessToken;
+
+    } catch (e) {
+
+        const resp = await client.loginPopup(loginRequest);
+
+        if (resp.idToken) {
+
+            client.setActiveAccount(resp.account);
+
+            const resp2 = await client.acquireTokenSilent(loginRequest);
+            token = resp2.accessToken;
+
+        } else {
+            // throw the error that brought us here
+            throw e;
+        }
+    }
+
+    if (typeof init.headers === "undefined") {
+        init.headers = {};
+    }
+
+    init.headers = {
+        "Authorization": `Bearer ${token}`,
+        ...init.headers,
+    }
+
+    return init;
+}

samples/approot-uploadsession/src/security.ts

@@ -0,0 +1,21 @@
+import express from "express";
+import { dirname, resolve } from "path";
+import { fileURLToPath } from "url";
+import open from "open";
+
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const server = express();
+const port = 8080;
+
+// setup static paths
+server.use("/bundles", express.static(resolve(__dirname, "./bundles")));
+server.use(express.static(resolve(__dirname, "../static")));
+
+// start the server
+server.listen(port, () => {
+
+    // open the default browser to the sample page
+    open("http://localhost:8080");
+});

samples/approot-uploadsession/src/server.ts

@@ -0,0 +1,27 @@
+import webpack from "webpack";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const NODE_ENV = "development";
+
+export default <webpack.Configuration[]>[
+    {
+        devtool: "eval-source-map",
+        entry: resolve(__dirname, "../build/main.js"),
+        mode: NODE_ENV,
+        output: {
+            library: {
+                name: 'BrowserEntry',
+                type: 'umd',
+            },
+            filename: "client-bundle.js",
+            path: resolve(__dirname, "../build/bundles"),
+        },
+        stats: {
+            assets: false,
+            colors: true,
+        },
+    }
+];

samples/approot-uploadsession/src/webpack.config.ts

@@ -0,0 +1,21 @@
+<html>
+
+<head>
+    <title>Testing</title>
+</head>
+
+<body>
+    
+    <input type="file" id="the-file">Select a file to upload</input>
+    <br />
+    <br />
+    <button id="go">Do Upload</button>
+    <br />
+    <br />
+
+    <div id="log" style="font-size: x-small;max-height: 600px;"></div>
+
+    <script type="text/javascript" src="/bundles/client-bundle.js"></script>
+</body>
+
+</html>