samples/browser/index.html

<!DOCTYPE html>
<html>
<head>
	<title>Browser test</title>
	<script type="text/javascript" src="../../lib/graph-js-sdk-web.js"></script>
	<script type="text/javascript" src="secrets.js"></script>
	<script type="text/javascript">
		var client = MicrosoftGraph.Client.init({
			debugLogging: true,
			authProvider: function(done) {
				done(null, SECRETS.ACCESS_TOKEN);
			}
		});

		client
			.api('/me')
			.select("displayName")
			.get((err, res) => {
				if (err) {
					console.log(err);
					return;
				}
				console.log(res);
			});

		// Example of downloading the user's profile photo and displaying it in an img tag
		client
			.api('/me/photo/$value')
			.responseType('blob')
			.get((err, res, rawResponse) => {
				if (err) throw err;

				const url = window.URL;
				const blobUrl = url.createObjectURL(rawResponse.xhr.response);
				document.getElementById("profileImg").setAttribute("src", blobUrl);
			});

		function updateProfilePicture() {
			var file = document.querySelector('input[type=file]').files[0];
			var reader = new FileReader();

			reader.addEventListener("load", function () {
				client
					.api('/me/photo/$value')
					.put(file, (err, res) => {
						if (err) {
							console.log(err);
							return;
						}
						console.log("We've updated your picture!");
					});
			}, false);

			if (file) {
				reader.readAsDataURL(file);
			}
		}
	</script>
</head>
<body>
<h2>Please check the Node.js sample for more examples on calling the Graph.</h2>

<p>
By loading this page, we called /me endpoint on the Microsoft Graph.  Open your browser's' JavaScript console to see the result!
</p>
<br>
<p>Your user photo from /me/photo/$value:</p>
<img id="profileImg" />
<p>
Also, you can update your profile picture:
<input type="file" onchange="updateProfilePicture()"><br>
</p>
<br>

</body>
</html>