Microsoft 365 Community Community Demos, 12 Oct 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Hands-on with Microsoft Graph File Uploads and Downloads

Description

In this 18-minute developer-focused demo, Bob German shows building file access into a Microsoft 365 application using Microsoft Graph! Quick review of available Learning Path modules (lab exercises) calling on MGT in JS development. Focus on one module/scenario covering listing, downloading and uploading large/small files from OneDrive for Business using a single-page java script application leveraging Microsoft Graph. Tips on authentication, permissions, and execution using Graph SDK or HTML commands. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on October 12, 2021.

Demo Presenter: Bob German (Microsoft) | @Bob1German

Supporting materials:
• Learn - Microsoft Graph Fundamentals | http://aka.ms/learn-graph
• Learn - Get started with Microsoft Graph Toolkit | https://aka.ms/learn-graph-toolkit
• Learn - Explore Microsoft Graph scenarios for JavaScript development | https://aka.ms/learn-graph-scenarios
• Documentation - Microsoft Graph REST API v1.0 reference | https://docs.microsoft.com/en-us/graph/api/overview?view=graph-rest-1.0

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

This is not actually new functionality, but I think it's something that uh a lot of people maybe don't fully understand how the potential of using in any application you might be building using microsoft, 365 for your file access and, if you're not familiar there's this thing called microsoft learn and it's a place where there are tons of hands-on labs on all aspects of microsoft development, including microsoft, 365 development.

A

So my teammates and I put together three learning paths which are sequences of labs really, and we did that in earlier this year, and so I'm going to highlight one from the graph scenarios learning path which is about file uploads and downloads.

A

So it's really graph scenarios is actually growing, so we've got three more in the pipeline beyond what we already have so right now here it is, and I'll put those urls back up at the end right now we have three in here: one is showing user emails, another is calendar, access and another is download and upload files, and that's the one I'm going to get into today and, as I say, we've got three more of these in the pipeline and we, if, if you have a particular area that you find interesting, I would love to hear from you just drop in the comments or grab me on twitter or what have you?

A

um The three that are coming, I will foreshadow are excel, which is a really cool one, and I hope that would be published for today, but hopefully really soon, it's very, very close. um There's one on user presence and there's also one on trending, so kind of tapping into all the signals that come out of the microsoft graph to find recent documents and other things that are relevant to a particular user.

A

So we're trying to kind of cover not only how to call the graph but also kind of a little bit of extra tips and tricks in each one of these. So this one that I'm going to go over today is really going to start off by connecting up a starting application, which is extremely basic and then show you how to display some user files how to download those files and then how to upload those files all using the microsoft graph and the graph sdk.

A

So if you think about it, you know if, if you were building an application and building file access into it in some way, uh it would be an awful lot of work to build that from scratch. And then, if you add in compliance and versioning and offline access and all the things that are part of onedrive and sharepoint, it becomes a huge amount of effort to do that. And so why not take advantage of microsoft, 365 and oh by the way your customer is already paying for it.

A

So you can't beat that really as a developer. I think so that's really what this is all about. So I'm going to start with the. Let me actually flip over I've got this thing set up to different uh with a different github branch for each one of the labs I'll start off with the basic package. That's here, and it's designed uh to to kind of be available and understandable by everyone.

A

So the idea here is uh you know if you see it, if you see us doing direct dom manipulation, please don't judge us we're trying to be open to everyone. How big can the file be? It can be as big as m365 can handle the way that work that I'm going to show you well, it may take a while so we'll get I'll get into that, because there's a really cool feature in the graph sdk that makes that possible or makes it much much easier than it would be anyway. Here's the html!

A

You can see that it's got um some divs that are going to hold the content, and all I really have here right now is a sign in which will show up initially and once I've signed in it's just going to welcome me by name. There is also a ui.js which is extremely minimal here and here's the direct dom manipulation. But again we didn't want to like restrict this to just react developers or angular developers. So this is what everybody uh at least, if you've done any kind of browser development, you probably will understand it.

A

That was the objective here is to focus really on the graph part and not on you, know our favorite ui library or what have you and then the real action is here in graph.js. So let me just show you what this does and and get into that just a little bit so make the text a little bit bigger, not that big, because that won't fit.

A

So the first thing that we're going to do here is create an auth provider which handles authentication and there's this off.js, which I'm not going to get into, but it basically calls a library called msl, the microsoft access authentication library, no access, forget that microsoft, authentication library and we're going to just create a little provider here, which just has a single function in it called get access. Token.

A

Then, on line 9 we're going to new up a graph client using the microsoft graph sdk and pass it that auth provider. So that means that the sdk, whenever it calls the microsoft graph, is going to take care of the off and if it needs to authenticate it will, if it doesn't it's going to be smart and not require that and by the way. Sorry, then, if I didn't define all my terms here, the microsoft graph is a rest api.

A

So it means it works over ordinary http s connections and it is the main a for all of microsoft, 365.. So the sdk is you, don't really need it, but it's going to make it easier, especially on the file upload scenario.

A

So my initial code is just going to have this get user and every one of these the way we structured this is. I want people to kind of think about the permission that they need everything you want to do in the microsoft graph. Just like you would in the user interface, you have to have permission, you can't just go doing stuff and the app has to have permissible as the user.

A

So here ensure scope is a is a function that just makes sure that that auth provider that we just set up has user.read access, which is one of the permissions, and then we're going to call the simplest graph call in the world, which is slash me, which gets my user profile. Okay, so let's run it so I'll type, npm start, and what this will do? It's it. Npm is just being used to host a little website. There is no bundling.

A

This is we're trying to be simple, simple, simple here, so here's the website come up and I'll sign in and since I've already signed in, it's just going to welcome me by name and that's it and that's not very exciting. So let's go ahead and add some stuff to it right.

A

So I will flip over here and I'm going to switch to the files file, upload and download branch, and so in the course of doing the lab you're going to add all this code and get to kind of play around with all this code. So the very first thing that I want to point out is this function, which gets a list of files, because you can't download a file unless you can see what files there are right and so we're this time. We're going to ask for files, dot, read and jim has a question.

A

What does ensure scope do if we don't have user.read yeah, it's dynamic, scoping, andrew and what it would do, if you don't have user.read is it will pop up and ask for the permission and that's a permission that the end user has normally? Has the rights to grant? And so we'll just say: hey? Is it okay?

A

If this application has files.read that's independent of whether the user does and as you'll see we're going after the user's own onedrive here, so they should have read permission to their own onedrive, but this is kind of you can think of it. As kind of like your phone, where you know you go to use your phone and all of a sudden, an app wants to access your photos and, what's with that right? Well, you obviously have access you, as a person have access to your own photos right.

A

But what this is doing is it's adding an extra level of safety where the app can't just go any old app can't go looking at your photos, so in this case any old app can't go reading files, and so that's what we're doing is we're saying.

A

Is it okay for this app to read files in this case, and if the user has granted permission or if the admin has granted permission, then this will just return and and not do anything if the if it needs permission it's going to pop up and ask you and then we're going to call this method called slash me, slash, drive, root, slash children and we're going to select specific attributes of those files that we want and then we're going to do a get. Now again. This could all be one http.

A

We could just use fetch and get this stuff directly, but the sdk makes it a little bit easier for us, and so let me just pop into the documentation here, because this is really I end up living in here. Quite a bit actually oops wrong link.

A

This is the graph api reference and I have to say the graph folks have done a really great job of this and if I go into files and I go down to drive items list, children so they're being very generic here- and you know the files really are in sharepoint and onedrive and which are really the same back end even if the files are appear to be in microsoft, teams, they're still in sharepoint or onedrive, and that's another whole topic.

A

But the this api is being generic and not kind of hard coding, any prior knowledge of a product like sharepoint or onedrive. Every one of these api calls has a permissions block right here, where you can see what permissions are required and you should always go with the least privilege that you need to do the job. That's why I asked for files.read.

A

So clearly, if I had sites.readwrite.all, I could do everything to every sharepoint site. That would work too, but that would be more than I need right and then I'll point out now. Here's the one I'm using me, slash, drive items, slash root, which is a sort of magical item, id children and getting back the list of children. But I want to point out that there's other things I could do here.

A

I could get to a specific drive id which might be somebody else's onedrive if I have permission as a user and the app has files that read permission. I could do that or maybe it's a microsoft 365 group which automatically has a sharepoint site in it, and I could access the things in that site.

A

The files in that site or I could access a site based on its site id or I could access a particular user's onedrive based on their user id, so lots of paths to get to the same place right and then what I'm going to get back is a list of all the of all the children inside of there, which is basically all the files. So let's go ahead and run it to do that. I'll. Just go back to my my app and I have to sign in again and there they are there's the files right.

A

So very simple, so just again to review this code, it's that's it that's the whole thing and then the rendering code is just going to loop through these what it gets back and show those on the screen. Okay, so let's go and download one of the files.

A

Now, if I clicked on this depending on how it was written, I might actually view the file, but I'm actually going to download it and it's going to come down as a download, and if I open it, you can see that it's a picture of the microsoft graph mascot, the graph which is which I happen to have on my one drive at all times, just in case and um so there's that so let's take a look at how that works.

A

So I scroll down a little bit more download file. It's just another path here on the api me slash, drives items and the file id that I got back the first time and what I'm going to do is I'm going to get back the download url. So somebody asked about large files- and this is kind of the first step- is: how do you handle large files on download?

A

You probably don't want to do a get request and then get this giant payload back from the get request that all of a sudden in your javascript or your other code, you have to handle. So what the graph does is. It gives you a short-lived url that only lasts, for I I don't know, maybe brian knows- or somebody knows on the call how long it lasts, but it's very very short period of time and then immediately we're going to use that to download the file and the way to do that in a web.

A

Browser is to use window.open. So I could say: window.location.href is the download url and it would send my browser over to that file, but by doing window.open with underscore self as the target it's going to download the file, which is what the user would expect in this kind of an application.

A

Then the uh the third thing, of course, is to upload a file. So, let's, let's see that work- and this is this- is the one that amazed me really with the sdk so we'll get into that. I'm just going to come in here and pick a file and I have all sorts of little animals here.

A

So let me see if I can find the one I wanted and we'll go ahead and upload that and it's just going to kind of upload in the background and then when it's done it should and we're going to test my upload.

A

We were talking about bandwidth here earlier there we go because I'm bro I'm sharing screen and camera and uploading files at the same time- and I don't have the best upload speed so there it is- and I can download that again and hopefully that will work come on and we should see the picture get downloaded.

A

I think I did that it said undefined bytes. hmm Well, this is a live demo. Let's try that again.

A

Oh it downloaded a bunch of times. I don't know. What's going on hey sharepoint people I'll bet you never expected to see camel in this demo. All right uh anyways couldn't resist. Okay, so let's take a look at how that code works and.

A

This one is a little bit more involved so for this I need files.readwrite experience. Thank you, todd lots of groans and there's two ways to do this in the api. So let me let me flip over back over to the api for a second.

A

If I come here and I can do an upload of a file and this one is limited, I think- to 4k or something it's a fairly small file.

A

It's kind of easy, though you just do a put request with the file contents in your http request and that's great, except for it only goes up to a certain limited size. What you really want is this thing called a resumable upload which will handle large files and if it gets interrupted, it will actually pick up where it left off.

A

If you go back, which is just brilliant, it's a little bit more complicated, though, because you have to create something called an upload session and then you start uploading bytes into that session until you're done, and then you tell it you're done so. You don't need the sdk to do that.

A

You can do all this with a ton of different http requests, and you know it's it's just a lot of of work or you can use the graph sdk which reduces this to a single line of code, so uh well sort of I'm going to set up here.

A

I'm going to set my options and I'm going to tell it that I want to upload in blocks of of this size and I'm going to create my upload task and the sdk is just going to take care of it for me and then I just await the upload and after a while, it's done, that's it really really simple! There's! No!

A

You don't need to manage the session yourself. Let the graph sdk, do it for you right and and that's basically the way it works. So, um let's see if there was anything else I was going to talk about.

A

I guess that I'm just going to kind of go back to the call to action on this one and invite you all to try to learn modules. We've everything: is there, click by click, you don't even really have to know javascript to do it, but if you do you'll get more out of it. The first one, as I said, is graph fundamentals. Then the graph toolkit, which is a great control library that you can use- and that's often featured on these calls, and this one is about graph scenarios.

A

I'd love your ideas for more graph scenarios. So please post them in the comments and that's about it, I'm open to questions or moving on to the next demo answer.

B

A couple of questions: okay,.

A

Is the graph sdk available in spfx? Yes, it's built in it's right there. All you have to do is ask for it from the sharepoint context. I just wanted to throw that in because I think it's it's awesome and I use it all the time. Sorry.

B

About that, oh related on that one actually just just for those who might be wondering. Unfortunately, the craft sdk in the sharepoint framework is a bit of an older one, so we're working together with microsoft, graph engineering to get a side-by-side support for the javascript sd case, which will then enable us to upgrade the latest version of microsoft.

B

Javascript sdk. The problem right now is that if we would upgrade to a version three which is the latest, so um that would mean that the version one javascript microsoft graph, javascript sdks- would not work on the same page and that would not be good for any of the existing solutions. So we're kind of between a hor, a rock and a hard place. So we're now working with uh craft engineering to get that one unblocked. So we're able to move to a newer version of that as well. Okay, so cool stuff.