Power Apps DIRECTLY upload files to SharePoint Document Library | GRAPH API

hello everyone in this video I will show you how to upload files directly from powerapps to SharePoint document libraries without power automate we will leverage a standard connector in powerapps and take advantage of the Microsoft graph API to directly upload files from powerapps to SharePoint document libraries including folders so let's check it out in action foreign [Music] in my SharePoint site I will go ahead and create a document Library give it a name and click create I'll create one simple column of type choice I will call the status I've provided four choices I'll default the value to new and click save for a document Library I have the ability to upload files I will go ahead and upload a file I can also upload multiple files and then I can go ahead and update the properties related to the document I can update them independently here in the properties pane or I can click on edit all where I get the edit form associated with the properties of this document Now to create a power app so users can interact with this document Library just like we would interact with it in SharePoint in powerapps I can start with a blank app or I can start with an existing SharePoint list or library to create a standard three screen app in this case to keep it simple I will do this I will pick a SharePoint connection connect to my SharePoint site this only showcases the lists in the SharePoint site I have a document Library called doc lib I can actually enter the library name right here and click connect and if it finds that libraries connection it will go ahead and create a standard three screen power app that will allow us to interact with our document Library so it's gone ahead and created the three screen power app where it will list out all the documents in the library I have the ability to search on the title of the document I can view the details this leverages the powerapps form experience so here if I had to edit Fields I have the ability to add additional columns that I would like to showcase the data for I can click on edit that takes me to the edit screen for this there is an edit form control similar experience if I need to add additional fields that I would like the user to modify I can go to add fields and let's say here I add the description column if I preview the app here I can make changes to the document properties click submit and those changes will be applied if I would try to create a new document there is no space for me to upload the document in SharePoint as well the first step that we need to take is to upload the file once that file is uploaded only then can we go ahead and edit the properties of the document there is no control that allows us to upload files what we can Leverage is the attachments control in SharePoint lists for this power app under data sources I currently have my document Library connected but just to get that attachment control I will add a connection to SharePoint connect to any SharePoint site and pick a list from that SharePoint site and click connect I will add a new screen in my app I will insert the edit form control connect this to the SharePoint list now this will list out the columns for that specific SharePoint list and if the list has attachments enabled which is the feature by default you will get the attachments data card in this form control we have the attachments control and this control is what I will copy Ctrl C and go ahead and create a new screen and paste that attachments control now I don't need this form control neither do I need the screen I only added it to grab that attachments control so I can safely go ahead and delete this and I can go back to my data sources and remove the reference to my list I have renamed this control to attach files now this control will have some errors because we copied this from within a data card to fix these we can simply go to edit and the formula bar and start removing all of the formulas that are erroring out once we fixed all the errors we have an attachments control that allows the user to upload files typically we use power automate to use the SharePoint connector there and use the create file action to upload the file however here we will look at a different approach of uploading files directly from powerapps without using power automate and for that we will leverage one of the standard connectors which is known as Office 365 groups this connector has a send an HTTP request action where we can construct a Microsoft graph API request if I click on the link it will take me to the documentation for the Microsoft graph API we've been provided with a graph Explorer the link is right here on the left hand side I can click on get started the graph Explorer which is a Dev tool that lets you learn about the Microsoft graph apis and try them out directly in the browser experience so I will click on the link that will open the graph Explorer tool here there are some sample queries that are provided for us that we can try for example my profile here is the get action that calls the graph API to get my profile information if I run this query it will return the data related to my profile now currently I am not signed in to the graph Explorer tool you can go ahead and sign in using your M365 account now when the query will run the results that will be returned would be based upon my profile now in the graph API we have an action that allows us to upload files to SharePoint or OneDrive and when you make a graph API call there are certain permissions that are needed to make those API calls now in case of The Office 365 groups connector these specific permissions are already available it leverages delegated permissions to files and SharePoint or OneDrive whatever permissions the user has to SharePoint a OneDrive that would be respected now to upload a file to a SharePoint site we need the SharePoint site ID the site ID in which my document Library lives in the samples itself if I search for sites for SharePoint site get SharePoint site based on relative path of the site for the hostname token I will enter the hostname of my SharePoint site and for the server relative path to my SharePoint site slash Rd power 365 in my case I will go ahead and plug that in right here run the query this will go ahead and give me the ID of my SharePoint site the site ID that I'm looking out for is right after the host name so hostname comma here's the site ID I will copy the site ID and paste it in Notepad next I need the drive ID meaning the ID of my document library in SharePoint there is a sample that enumerates the document libraries under the root site so I'll pick this and where it says root I will replace this with my site ID and I will run the query so this will list out all the lists and libraries in my SharePoint site here is my doc lab library and here is the ID so I will copy this and paste that in a notepad as well right after drives put a slash put the drive ID run the query so now I am in the context of that document Library to make that graph API request to upload a new file we need to define the level at which we would be uploading the file I can simply pick root colon slash the name of the file colon slash content and here is an example of that in action I will use the put request provide the path to my drive which is my document Library give the name of my file and then in the request body all I have to do is pass the content of my file back to my PowerApp I will add a button so that the user can upload these files and to upload these files I need to connect to offers 365 groups connector and for this upload button on select I will use Office 365 groups dot HTTP request I need to provide My Graph API endpoint that I would like to call and simply copy all the way to the root of that document Library paste that right here after the root colon slash here I need to provide the file name for now I'm just simply going to type file name colon slash content what type of method is this I would like to use the put method and then it needs the context of the file my files are coming from this attachments control so this graph API call I will run this in a for Loop so for all my attachments control dot attachments which will give me all the files and this attachments controls go ahead and execute this graph API call and for the file property I will leverage This Record Dot value this has the value of the file in that attachments control file name was something that I hardcoded let's make this dynamic I'll add a couple of double quotes a couple of ampersands and right in between I will use this record dot name that has the name of the file for now I will take the user back meaning back to the previous screen my document Library I have gone ahead and started from a clean slate let's preview this power app click upload and this now should go ahead and make the graph API calls and if we look at my document Library both those files have made their way to my document Library via that graph API call and on my home screen when the user clicks on the plus icon I will reset the attach files control because I want that control to be empty when the user heads to that screen and then I will navigate the user to the attach files screen if I preview the app click plus comes to the screen the attachments control is cleared the upload button should only be enabled if there are any attachments added here so for the display mode property of the upload button I will use if count rows of the attachment control dot attachments if this is greater than zero then you leverage display mode dot edit else you leverage display mode dot disabled so I'll go ahead and attach a couple of files go ahead and click upload this goes ahead and triggers that process and takes me back to the home screen now my home screen does not show the new documents that were uploaded but if I head over to my document Library they are all being uploaded the upload is being performed via the graph API and the response that the graph API sends back powerapps currently does not understand that so we can see that all the files are present in my document Library however refreshing your data source and powerapps is not a good practice so how do I re-initiate or trigger the formula that is being initiated in the items property of this Gallery whenever an upload is performed so for that when the user clicks it's on the upload button here instead of taking the user back to the previous screen directly I will set a variable to false then I will give a few seconds for that API call Action to take place and then take the user back to the home screen so for that I will insert a timer control and the duration of this timer control set it to two seconds in my case auto start I will set this to not off where reset the variable that I created and then there is a function called on timer end here I will set that variable to true and then I will take the user back to my previous screen for the app object we have the onstart function here I will set that variable to true to begin with and since I am in the edit experience of the app I will run app onstart I'll click plus notice the timer has not started I will add the second condition to my filter which is where reset because the variable is changing state the gallery will go ahead and re-trigger the formula so let's try this out in action I will go ahead and upload a couple of files click upload the files are being uploaded the timer is running takes me back to the home screen and here are the two latest files look at its properties make changes in the properties submit and the properties are updated in my document Library we can confirm that right here in SharePoint now the entire document Library experience can be created in powerapps we can upload files modify the properties of the files full current actions are available plus we can also work with folders I had done a video where I showcased how to explore the files in a document Library including folders to that I have now attached the upload file concept here I have a document library in which I have two files and two folders here is the document library in SharePoint if I would like to upload files at the root level I'll click on upload I have my attachments control I'll upload my files click upload same concept it will upload those files and then it will showcase those files in my home screen it's also showcasing the preview of those files if I select a file I have the ability to Leverage The PDF viewer control to view a complete preview of the file in action Plus I can update its properties click submit and those properties will be updated I can also go down to a folder level I have a folder Europe within this I have another folder for spin I would like to upload files at this level I'll click on upload notice the breadcrumb on the top shows me where I'm uploading this file so here I'm uploading a couple of files I click upload and here are those documents that have been uploaded at the folder level for Spain the key concept here is when I am uploading my files there is one extra Nuance to this process that is the folder path so I'm heading over to the root of my drive same as before but right after that I am defining the level of my folder where I would like to upload the file and ported by leveraging this graph API endpoint there are limitations related to the file size best to read the documentation if you enjoyed this video then do like comment and subscribe to my YouTube channel and thank you so much for watching

Channel: Reza Dorrani

Views: 88,557

Keywords: powerapps upload file to sharepoint document library, powerapps upload file, powerapps upload file to sharepoint, powerapps document library, powerapps attachment control, power apps graph api, graph api, microsoft graph powerapps, power apps tutorial, powerapps, power apps, sharepoint, document library, upload, files, reza dorrani, powerapps upload multiple files, powerapps upload multiple files to sharepoint library, powerapps document library upload, document properties, microsoft

Id: n3mhe88BI34

Length: 20min 50sec (1250 seconds)

Published: Mon Jan 16 2023