Power Apps Upload File v2 to SharePoint Document Library

let's learn how to upload files in power apps V2 style So today we're going to learn how to upload a single file and upload a multiple file all using the new Power automate V2 trigger right that V2 trigger now has a file attachment way so I thought we should learn how to use that that means no more that crazy base 64 and if you're wondering like yeah I made this video four years ago using the V1 trigger I was the person that discovered how to upload files with all the shenanigans that went into that well thank goodness the shenanigans are gone on it's pretty straightforward now so let's just jump on to my desktop and take a look so first let's just kind of show you what we're going to build so the first thing we want to do is just a simple upload so we're going to click on the little upload icon here we can choose any of these adorable pictures of Buddy how about this buddy eating we'll say open and then you can see that the process through and it's like upload complete awesome say okay now what if we want to upload multiple files no big deal all we're going to do is open up a folder right we'll click over here we'll grab some buddy pictures so we'll grab 1 2 3 4 I'll buddy by the Christmas tree right whatever right so we're going to grab all those we're just going to drag them as we start to drag you can see it says drop your files here we're going to drop the five files now when we do that gets them loaded and then the upload all button lights up and then we're going to say upload all and then once again we're going to get the spinner and so this is to keep the users from clicking while they need to wait because if you're uploading a lot of files it might take several seconds when it's done we get upgrade complete okay okay so that's what we're going to go through today how to do this right so let's close this let's jump over here let's make ourselves a new screen so the first secret to uploading files just like it's always has been is you need an attachment control now the attachment control unfortunately does not show up in the insert menu so the only way to get one of these is to add a data source that has attachments so we going to say add data and we're going to do share points right you could also do a data verse uh table that had attachments but I always use SharePoint so we do SharePoint SharePoint and then we grab power stos and you can grab any SharePoint list right it does not matter what SharePoint list you get so just going grab my employees but it doesn't matter and you're going to see in just a second we're even going to get rid of it so then here you're going to say insert and you're going to insert yourself a form now when you add the form you are then going to set the data source to that SharePoint list when you do this this will typically add all the columns one of those will be the attachment column so if we scroll down here to the bottom there's the attachment right so if we switch to the view here you can see that what that is done is that gives us this little card with a little paper clip here right so we are going to rename this thing and so we'll call this attach control and then we're going to grab it so we're going to say crl x and then we're going to say contrl V and paste it outside the form right it's angry that's okay now right now you can go ahead and delete the form and you can go ahead and delete the data source right so remove all that so that SharePoint list is gone we just needed it for just a couple seconds okay now we'll say back over here and so this is a little angry so all you're going to do is hit the drop down here and say edit the formula bar so look the Border color it's mad that's great we'll just make the color. black right we don't care what color the border is okay hit the drop down again oh items I don't need any items so delete that still mad we'll hit the dropdown display name nope don't care about any of that and then edit in the formul bar again oh display mode you do care about this one so you're going to need to set this to display mode. edit so they can interact as a just changing those four things real quick the errors went away and the app is useful all right so one of the great reasons we like to use this control so you hit play and you say attach file now you can choose pictures but we could also just go to my desktop right I can choose Excel files PDFs Word documents the attachment control is really great that way that it lets you attach to down here all files if you'd been like well shame why didn't you just use the add picture thing right so you go to media and then you go down here and say add picture this let you attach things but when we say play and click on this what is going to happen is look it only defaults to images and so when I go to my desktop I'm like why don't I see my PDFs in my Excel right like do you want to explain to your users where their things are and teach them if they click this and say all files then they could see it your users aren't going to get that right so don't bother with this go through that little extra getting the attachment controls right so we're going to delete that we're also going to be really annoyed that power apps has this bug right now when you come back you have to like resize the screen so now that we've got this attached let's attach a file so I'll just hit the ALT key that'll bring it up we'll grab another picture bu so now to go from power apps files attached to the power app I need to get it saved to my data source in this case we're going to do SharePoint but it'd be very similar if you're using a different data source what we're going to do is we're going to need to build ourselves a power automate Cloud flow so click over here on Flow and then we're going to say add a flow we're going to say create a new flow after a few seconds this this interface loads and you're going to say create a flow right we don't want any a templates or any of that we're just going to say create a flow and the nice thing here is this going to let us build the flow inside the App instead of like having two different windows open and switching back and forth now notice here it adds the power apps V2 trigger so this is what is brand new this is what's causing me to remake this video when you go here you can add an input now if you've seen the old video and you really want to do it the way we did in the old video I'll put a link up there just in case you do then you could just use text here and you could follow the same exact steps right because in the old way that's what we were doing we just pass text and we manipulated it but now we've got this file option so the file option if we choose this this is going to give us a file I'm gonna call it my file because I like to rename these things and that's all we need right so we're just going to say hey I need a my file new Step you're only going to need one action and so for that we're going to search for SharePoint and then under SharePoint we're going to find create file somewhere in here there it is create file okay so you do create file now also Al notice that because I've started the power app this way it is using the old designer if you're doing this in the new designer it just looks different but all the steps be exactly the same so then now where do you want to upload it to so we're going to upload it to my site called power apps videos right here and then for the folder path I'm going to choose where I want to put that and so it's pretty smart I want to put it in shared documents now I can either click shared documents and do shared documents directly or if you hit this you could choose a specific folder to put it in right we're just going going to put it in the row of shared documents right now though so put it in shared documents wherever they went there they go and then finally for file name here now this is where it's a little confusing in this old interface right like it's like hey my file what goes there and uh file content same type of thing because if we add this here right let's just add it right here if you hover read the thing so that is trigger body file content bytes that's good that's what we want for file content you going to see that a minute that's that's what we're going to pass as the file so that would work if we go up here to file name and drag or add this if you hover now it's that same thing right we don't want that we need the file name so in this particular interface what I'm going to have to do is click in here say copy X out of there and then do expression and then paste it back in get rid of the curly bracket at the end go to the front get rid of the at and the curly bracket there so now it's trigger body file and then content bytes and we don't want content byes cuz that's the x's and the O's of the file we want name so you're going to change it to name make sure that it's all lowercase just like that all right and say okay so that's it right that is exactly what you want to do you know what we're going to pause for a second and I want to just go we're going to go show you what this would have looked like if we were using the V2 editor right so to get to the V2 editor I would have opened a new window and so over in power automate right we would have said create and then we would have done an instant flow we would have chosen power apps V2 to the trigger say create don't click too fast give it a second to finish loading and now what we're going to do is click in here we're going to add an input and add a file just the same way we did before right and we'll call this one FC and then we'll go here we're going to add an action we're going to add the same SharePoint action again we'll say see more here and then we will say create file wherever that is right there and so what I want you to see is that here when you go to file name and then you do Dynamic content it says hey I know about the name and the bytes right so this interface does a better job with this trigger so we'd put FC name there and then we would do the same Dynamic content and FC content bytes here then you would just save this and you could use it the same way so this if you build it directly in power automate you're going to use the new designer and it's a little bit easier but if you hover like look trigger body file name that's the thing that we just did we did that ourselves over there right we hover over this one it's trigger file content bytes so either way is fine you do you I don't care we're we're going to stick to doing it over there in the other interface but I just want you to see that this interface does behave a little bit differently because I'm guessing somewhere over time they're going to change it all right let's switch back over okay so either way you do it we're good right we got to give this thing a name so we're going to call this video upload because I'm really creative and then we're going to click on Save over here all right now it's loading so as soon as you hit save it just automatically closes that window and it starts loading it over here as soon as it's done loading right so video uploads one we just made all we need to do here is we're going to go right here I guess we'll go to this and we can say hey attachment control onad file wherever that is gez O Pete it's way down here we're going to say on ADD file we want to video upload. run that's the name of our flow and now it says hey I need a record file record like this okay pay attention to this format because it is important to understand right so you're going to have a curly bracket file colon you're going to have another curly bracket inside here right like it doesn't tell you this part unfortunately and then you're going to say content bytes and so then what we want here this is where the file now goes and so what we want to do is we want to get the file from the attachment control so since we're referencing our self we're going to say self and then we're going to say self. attachments that is the table of all the attachments we don't want all of them we want just a record so we're going to say last so give me the last file that was attached there'll only be one but you still have to tell it which one you want and so then we're going to do a DOT and value that is the physical file that is attached in there then you're going to do a comma and you're going to do name all lowercase again and then you're going to do a colon here and then you're going to do last self. attachments and this time it's. name and notice that this name is capital right like sometimes they just like to torture us I think but whatever it is now we need to close our files record and then we need to close the record record and then we need to close our parentheses right now if you can't memorize all that right just pause take a screenshot real quick right it's it's not all that crazy right or if you screw it up right like so let's say that I wasn't paying attention I made the B too small if you screw it up if you hover it's going to tell you your formula is missing a column file. content bytes see the lowercase C the uppercase B and so that would then jog my memory to be like oh mine doesn't look like that let me change it to an uppercase B and we've got that right so trying to I've learned learned my lesson after four years right like we want to make sure that we're giving you guys some of the common mistakes that I see you making and how to resolve them but now that we've done that now the way that this thing will work is if we play we're just going to exit out of this file we're going to attach a file and because we put that code on on ADD file if we grab this picture of my wife and dog and we say open as soon as we do it you saw it might s the dots going across the top of the screen it uploaded the file and we can go check that by jumping over to SharePoint so we'll say here's my SharePoint right and then we'll do an F5 for refresh scroll down and look there's buddy going home a few seconds ago and remember when you're uploading files always make sure that it actually worked so we're going to click on the file just to see how adorable they look a like that was literally the first day we got buddy maybe the SEC no that was the first day yeah we're at PetSmart buying the uh buying him dog food so there you go okay so that works exactly the way we wanted all right so let's switch back over to our app okay so that's that's it right that uploads a file you're done now if you wanted to you know add some nicety to it so let's go over here real quick and talk about how the single upload how I did it on the fancy demo screen okay so if you look so I've got a circle icon here I got an icon here right neither of them actually do anything right like there's code in there there shouldn't be that code doesn't do anything what I then did was I took that attachment control that we just built and it is sitting on top of it I turn that attachment control and I set all of its settings every setting that it's got to be uh transparent so that way you don't ever see it but in reality you're not clicking this or that you are when you click here you're actually clicking the attachment control it's just secretly there right look if I change the color of the font back to black you would see that it is sitting right there so when you come into the app you're actually interacting with it and you just didn't realize it right because unfortunately there's no way to ATT or trigger the attachment control without it so I just found that by making it invisible then that was the way to uh you know and then putting an icon there the user would understand makes it work pretty well now if we then look at the attachment control on ad file here is where I put all the code so there's on ADD file and so here what we're going to do is we're going to set a variable called VAR show loading or show uploading to true and say set V show done to false we're then going to upload our file right that's the same syntax that we just talked about we're then going to reset self because I don't want to keep I don't want it to start piling up files I just want to as soon as it gets it uploaded reset it and then it's going to set the variable VAR show done to true so what happens is the the container that covered the whole screen right let's just throw a button on the screen so we can kind of manually trigger this thing oh I didn't mean to do that though control Z go right here all right insert a button again okay so if we go to this button and we say update context VAR show uploading to true so if we press this button you can see that what happens here is our um container gets lit up inside the container is the container white box reason I did that is I want to go with that two-dimensional so I'm using the drop shadow it's kind of hard to see but it's there and so inside that container then we have the spinning GIF so let's go back to here and let's set this to say uh VAR show d false okay so when it sets the variable to false so this image GIF it's just an image uh a loading file I got from loading.io that spins and so that's in a um image control and so its visible property is only to be visible when VAR show done is not true so then when VAR showd done gets finished then that label and the button to clear it out show up right so if we change this back to true and press the button now upload complete and whatever shows up and then the okay button just sets the variables back to false so it all goes away okay so that's how I'm doing that right I'm setting the variable show up loading true that makes the spinner show up by setting this to true and that to false when it's done it then sets bar show done to True which is what makes the text show up now if you're thinking whoa whoa whoa whoaa I I want to like download this right I wish I could just get this whole app if you go to trading. powerapps 911.com And subscribe to our resource Library then you have the ability to download this and all my other apps rewatch things it's a great time sign up for office hours and you can have a monthly meeting with me this Wednesday right um is the next meeting 12:13 we have one once a month or have two once a month so that people can come and ask their questions so that could be you so that's how the single upload worked in this screen right it's it's just a fancier prettier version of what you saw here now what if I want to do multiupload so multi- uploads just copy this and paste it multiupload in that whole drag and drop turns out that this control does drag and drop and just no one ever realized it right like if we say let's go here let's take rid of the onad file stuff for a moment like we don't want any of that to run but the way that this control is set up if you just hit play and then open up a folder again right when I grab these two files and pull them over here look I didn't even configure anything that just works by itself you drop them now those two files are sitting there and so then in order to upload both of those files we're going to use the same exact flow so we're just added a button and so in this button all we're going to do is we're going to say hey for all right so for all Loops through a table of stuff the attachment control or now called attach control one do attachments is a table of stuff so then I'm going to say do that as file this is for my standy anytime that I'm looping I always do an as something so I can reference it directly and now what do you want to do for each one of those uh files that are in there what I want to do is I want to do our same exact flow no different right and so it's just going to be that same file and then we're going to do this and then we're going to say our content bytes again like so and then now it's going to be file Dot and look there is our value and then we'll go right here and then instead of a content by we do name and all lowercase and it's going to be file. name right so that's the beauty of using that Capital file if not I would have just put the word value and name here which could have been a little confusing so doing an as file right here lets me specify that as file and I always do the all cap so I know it's something I made file. value and file. name closer curly closer curly close that and so now oh one more close now if we do this now if we press that button right so buddy on couch and Buddy on the trail I don't even know right so we'll press this notice right we need to put that whole loading stuff in we're not going to go how all that works today but just right we've covered that in several other videos before and so now if we switch back over to SharePoint and look buddy on couch and Buddy on the trail so both of those files were just uploaded boom multiupload single upload no Shenanigans no galleries no Bas 64 none of the madness this time around it's really straightforward the only thing that you just need to kind of keep in mind right is that you've got to get your syntax exactly right right just if you're having a hard time it is most likely because you've misspelled content bytes or you've misspelled this or remember in our power automate flow right like when we went in there right so we go to video upload and edit just be sure inside your flow here right so if we did my file whatever you call it here down here you're going to have both of those and if you hover right that one is trigger body file content bytes and if you hover over this one that's trigger body file name right those are the mistakes that we're going to make they're not hard they're just little typos that sometimes you know those us that aren't attention detailed people might miss there you go there's V2 of how to upload a file in power apps what do you think do you like it leave me comments below would you like to see additional things when it comes to uploading I'm game just tell me what it is right um yeah you know or if you just need help with this or any of your projects you can always hit up over at www power apps 911.com right we do training we do Consulting we do projects we even hop on the phone with you for half an hour and just fix your problem and never talk to you again we're pretty helpful like that all right with that I'm going to say thanks and have a great day

Channel: Shane Young

Views: 32,515

Keywords: Shane Young, powerapps911, PowerApps, powerapps upload file, powerapps upload image, powerapps upload a file to sharepoint, powerapps upload multiple files, powerapps upload, powerapps upload files to sharepoint document library, powerapps upload pdf to sharepoint, powerapps upload picture, powerapps add file, powerapps save file to sharepoint, powerapps v2 power automate, power apps easiest way to upload files to a sharepoint document library, powerapps sharepoint document library

Id: cjcDH7_v6cE

Length: 20min 6sec (1206 seconds)

Published: Mon Dec 11 2023