PowerApps upload file to SharePoint document library

in today's show we learn how to use power apps to upload a file to a SharePoint document library that's right no crazy code no parsing no fixing up stuff we I finally solved it after a year and a half how to make a simple button that just grabs any file you want and sticks it straight into SharePoint document libraries I'm just so excited but first here's our intro hi my name is Shane Young with power apps 9-1-1 those guys in today's show we're gonna find the upload a file straight to a SharePoint document library from powerups that's right folks I have been trying to figure out how to do this for about a year and a half other people have kind of found ways of doing it but I've never loved any other way it's right they've been very complicated we've been hacking triggers and writing really complicated flow actions or you know one of my customers like we put a file over there in an attachment and then we move it I mean there's just a lot of really chaotic ways that we've done it as I've never loved enough any of those enough to share with you or to really use any of my solutions so today I'm going to show you what I have finally solved thanks to someone else out on Twitter has named Romero I have a link below to his content but he had probably one of those more complicated versions of solutions uploading lots of files which was awesome it works but in his video he had this little one little step that he took that I had never thought of and I stole that one piece as they were take it and bring it into my super simplified solution I'm so happy so good job Romero thanks for sharing right this is what the community is all about people post content and then others build upon it and so the same with us hopefully when I post this you guys can take this and run and do even more cool things with it okay I know that's enough talking you guys just want to see this Chuy is sitting over there Chuy is tired hear me talk about it so let's just switch her to my desktop and take a look so over here my desktop I thought the first thing we should do is just show it to you right so upload a file straight to the SharePoint document library yes please you can click on this notice when it pops up it shows me all files it doesn't just say image files you have to switch it it says all files very cool and let's just say let's upload I don't know let's grab a picture of over here real quick logos and we will there you go there's Chui sticker and then after a second or so we can launch the SharePoint file and this would actually open the file straight in SharePoint yeah right but you I got it's an image chain you've kind of done image stuff before that's fair let's do it in let's go over here and this time let's say let's go to my desktop and so for this PDF launch that SharePoint file PDF it works for excels it's works for Word document I've used it a lot of different ways and so far so good really the only limitation I found with it so far is the attachment control only lets you have up to 10 Meg files so I've not used this to attach files larger than 10 Meg's I'll be honest and none of my customer cinereous is that been a holdup right so I've not tried to find ways to do larger files so I don't know where this breaks on the high end just so we're on the same page but man file 0 to 10 Meg's this this process is kick button and you know here we can see I've kind of built it my way but what we're gonna do now is we'll switch over we're going to build it completely from scratch so you understand how we do it mechanically and then what you guys make the UI look like or how you handle the file links what you do with them you know that's up to you what I'm really imagining you this long SharePoint file is cute to show you how smart I was yeh by the reality I'm imagining most of time you want to get that file link back and then store it in some other location so you can have a reference you know oh I attached this file to a SharePoint document library I need to link back to that file so that's what I'm imagining but you know you guys take build from this do something cool with yourself okay you wanna see how we do this I bet you do so switch over to the maker portal all right over here in the maker portal I have a brand new blank app and all I've done is grab the attachment control and so there's a link below to the video if you haven't seen it where we talked about how I go in and create a SharePoint forum I steal the attachment control so I can use that for other things I'm not gonna go over those principles again this video will be long enough without all that extra stuff but it's in the other video if you need to see it but the big reason that we do this is if we hit play when you could attach a file you get all files the ability to reference all the files on here versus the default one that we've used for years was we would go over here and say insert media and the add picture control which we all know and love but the downside of that control was that it defaults to all file or image files and then you got to change it so boo on that control for this solution so nobody okay so now we've picked our control and you know named a detachment control it's all I've done so then what we want is we're going to actually grab a media control in an image weirdly enough this image control is the key the missing piece that I did not understand and so what am I do is I'm going to go and attach file real quick so attach file and I'm going to attach a small image file for now we're gonna do all files but a small image file was the easiest way to work through how all this works so we're gonna say open so there it is done and so then we go the image control Hey what I want you to show me is the last record in attachment control dot attachments right attachment control dot attachments is all the attachments in that control in our case we only have one I want the last one though can you know a specific record and then I want the value and there you go you can see Chuy's cute little icon yeah a chewy icon so that well you're not this is the thing that Romero taught me and that I love all right so if we copy this out and we throw some labels on-screen well I'm just kind of make sure you guys understand what happens here if you do this you can see that you get this built in a pressed blob manager thing and if we throw another label on the screen and we say all right instead of that what I want to do is I'm going to actually say I want what is the image control image 1 so we're going to say we want image 1 dot image look joy go it's the same thing my which makes sense so what was appointed that here's the point grab a button I'm gonna say hey button what I want you to do is I want you to set var demo to be the value over here so this but we're going to do is we're gonna sighs should save our demo attachment control and so we're going to pipe that into the JSON function which there's a couple videos on that also so once again if you haven't seen those I'll put links below but with the JSON functions supposed to do is in court encode this for so include binary data so we do like that and we do like that and so then now if I press that button I have a variable called var demo attached control some of the a label on the screen throw it down here and we're gonna say var demo attachment control and you can see that all it had was that a press stuff and put it in some quotes yeah okay so now what I must say though instead of using this I'm going to use image 1 dot image right which your way that's the same thing which is what I thought for the longest time so reason I've never tried this and paste this in here we're gonna say alt button what is that let's turn on the scroll real quick on this hit play it is the actual file contents I've needed this for so long this is it some of you probably the light bulbs went off for a cut right I don't need you more scene alright guys the rest of you you're probably not as excited yet but this this is the thing that I needed so what I was trying for the longest time was to get the can take this value and pass the JSON function which you guys saw just spits out that a press thing that doesn't do anything but for whatever reason I don't understand why no one will ever know but by referencing the image control of the JSON function it's like oh that's an image I can encode that right for the crazier part go over here we'll attach another file let's attach we go back to my desktop let's attach an Excel workbook right so upload this excel doop doop doop press our button look at that it knows it is an open XML format ah cute office document spreadsheet sheet base64 and then everything off there's comma that's the actual file this is really exciting calm down Shane you gotta make the calm down ok so what we're going to do now that we have solved this piece now that I have that raw data everything else is borderline child's play at this point so what we're going to do is the first thing I want to do is this is everything this is the type of file and the base64 encoding I only need the encoded portion so pretty much everything after this comma so what we're going to do is we're going to do a little fix-up here won't give a little love and for right now just to help us learn we're gonna do it in separate state steps so bar base64 364 only like that and so what we're going to do is we're going to do a bunch of our string manipulation work in order to parse out this file so that we can get just the the pieces in there do you guys think thing I can write this off top my head maybe so what we're going to do is we're going to do a mid function and let's see so what is the text that we want to do mid up we want to do the VAR demo from attachment control because that's our happy text what character I want to start out I want to use the find function and I'm going to find the text of a comma in var demo from attachment control so I want to find the comma and I want to add one but I don't want the comma I want to start right so we get this right or the very first character for us is going to be a you okay it's we're gonna do that and let's see so that is our mid function right that is where we want to start sweet if we want to grab everything from there to the end let's just do that just to show you kind of what happens so that closes out the mid function that closes out the set function so then now if we press the alt button Boop and then we're still another label on here and in here we're going to do var base64 only and we'll turn on our scroll bars as well okay so then look now we we got we basically just stripped out all of this and we started to you because that's the we'll file but we're not done yet because you all the way the bottom there is that the JSON thing throws on these quotes and if you have the bottom of our file right here our file would be corrupt because that quote is not valid so we got to pull that off the end and so the way that I did it in text manipulation it's all about how you want to do it I guess but the way that I would do it I'm guessing that's what you guys wanted me to show you how I would do it the mid function allows you to write so if you hover over MIT or you go in here it's like text and start number comma dot dot dot the ellipses the ellipses are optional and what we can do is we can set the length how much data do we want well what we really want here is we're gonna want the length of the entire file right so that's bar demo from attachment control okay hit tab so I want that but then I need to subtract out from that the midpoint or the define the location right remember because it's fine right here this spits out a number let's grab this right here oh let's try again all right so it spits out 17 eyes stripping out those first 79 characters so we're going here I'm gonna say subtract out that and then what I want to do is I want to subtract out I believe two more all right so it's mad at me for something let's figure out why it's mad at me Oh nope no it is it's right here this print the seat doesn't go there that parenthesis at the end there you know but I think this is just minus one so let's just press it and see what happens let's see how close we get so we'll say button alright we still start with a u we end with five days so we go to the end we end with one two three four five A's Oh early Wow good job Shane so here's the thing about this function right if this is like your right mind is melting just steal it right it's on the screen right now just copy it or if you're one of our curated content people you just go download this function you don't have to type any of it but the great thing about the way that I wrote it here is I didn't hard code anything so it works just as well for this excel file whereas if we go back and it a PDF and then press the button again what happened right everything changed so now this is a smaller thing but this one starts with J V this one starts for JV I started on JV once the prone time down here this ends with two equal signs and this equals ends with two equal signs so that's why it's important to write this formula right this whole chaotic piece you have to write it in a way that can handle different file types and so that's one you have to use these fine and link functions and I think I have a separate video on that as well maybe I'll put us that I posted links to all my videos watch all hundred of them anyway so there you go so now we know how to get this data out now what it's time to do is how do we get it into SharePoint so we have the base 64 so we're over here we're going to write the world's simplest flow new instant from blank we're gonna call this easy upload that's what we're gonna call it our triggers when you power apps we're going to say create there you go power apps action 1 is done action 2 new step we're going to search for SharePoint oh my goodness we're gonna spell SharePoint correctly though and so in the SharePoint connector there is a create file somewhere in your yeah there it is and so it's ok where do you only create it well good question I want to create it in my power apps video site do did you do there they are Oh bless me I just sneezed and then folder path well I'm gonna go in here and so there are the document library and then let's see go back um here where is my there's my shared documents that's what I wanted so in shared documents I created a four called files upload from power apps we're gonna click on that so that is a folder location it's going to stick it in and so then the file name well that's fair we'll just ask on routes for the file name OOP file content we will do see more here and asking power ups as well now it seems like that's all you should have to do but in reality SharePoint isn't store base64 files like the rest the world chair point stores women binary for some weird reason so now that I've created that what I'm gonna do is I'm gonna X out of it we're going to write another quick little expression and what it's going to be is is going to be base64 to binary so this is going to take that long strings that we just were sending over and we encode it once again though you don't care you don't have to understand really what's going on here all you have to do is give it the string and what is the string that you want to give it you want to give it the file contents that we're sending over that's it right now one of the things I do a lot of times here we're gonna do for you guys to make this easier for you to see it the whole thing right now you click on this and do expression with this come on flow thank you I'm gonna do a ctrl a ctrl C because that's so hard to read that editor is kind of terrible we're gonna add a comment and I just pasted in boom and so then now I can see exactly what that expression looks like so that once again easier for you guys to to see it and do it but remember your trigger body's going to be dynamic it should be the same if you followed my exact steps but your trigger body can be anything it's just that that long string of text we send over the other thing that we're going to do yeah you know I promise you we can do this in two steps I've done it but I realized in building the demo app that I want to be able to respond so to respond I'm gonna give a third step so I'm gonna do is I'm gonna type in power apps here Boop and respond to power apps just like this we're gonna add an output we're going to add a text output and we're gonna call this SharePoint file link so that way you can know you can get the value back right he's creating a file in SharePoint is great but most of the time you want that back so you can use it send it an email save it off to your data source you probably want that link back in your app so I thought I'd just go ahead and save you guys leave me the YouTube comments on where's that here that is so then what you have to do here is you have to know your SharePoint URL so I'm gonna go over my SharePoint URL right so there's my SharePoint URL I'm gonna copy that out we're gonna paste that in we're gonna get rid of this trailing slash though and so then there's dynamic content called created a file and there is the path and so that will just automatically grab the path of the file that we just created so pretty straightforward but remember this whole Shane's callous thing that would be your tenant I don't think any of you work here well my consultants are watching this oh yes you guys do the rest of you you guys got to putting all your stuff that looks great we'll say save alright after a second and a quick drink for me it is all safe so go back to order power apps and so now I'm going to do is I'm going to insert another button real quick and so on this button we're going to say actions and flows we get rid of this thing now if you guys notice I got the new experience I don't know how I feel about the new experience yet but that's a different story um but I've got a whole bunch of new things one over here oh here I'll show you nevermind I won't I guess some cool some tricks for this though so somewhere in here there's the easy upload I got lucky and found it so I want to add this to our app whoa went really slow goes mad at me for making fun of it and so now we're going to X out of here and I don't really need this button some-some copy this and then we'll just delete this button go away button my codes still here so we'll expand out this thing with a new expander and then we will pull this down and then we'll do this and so what does this say says easy upload dot run and so what is the file name the file name is but that's going to be is that's going to come from our attachment control right so that would just be last attachment control dot attachments like so and then dot and then there's name boom and then the create file file content is that variable sävar base64 only because we know that's exactly we want so we can do that and then what we're going to do now that that's the flow we need to capture that return object I press this on button I shouldn't know let's try skin so we go over here we're actually going to say we want to set and it's going to be var final link to the output of that and we're going to do a dot here dot share point file link just like that there you go so now if we press our little lovely little button what should happen so say play well click on our button it should take that right last file we uploaded the PDF it should send it out there and we should go out here do a refresh file is uploaded from SharePoint or power apps not from SharePoint hey a few seconds ago we uploaded this PDF if we click on it let's make sure it works yes oh so nice when we go back over here hit the X and so if we click this thing up OOP and so then right here set var file link that looks like a valid URL so just to test it what I'll do is I'm going to start a button or hit the plus you can just grab a button from here watch this you can drag them over now yay boom it goes right we told it to and so we're just say use the launch function and we're going to launch var file link just like that and so if I hit play now and click on this button it launches a straight into the by Oh boom you now have all the pieces so I'm go ahead I'm going to do some some assembly required I'm sure I'm gonna lose a bunch of you here so bye again but that's every one of the pieces because now what I'm going to do is we're gonna talk about how to make this control do all this without all those madness going on right so let's kind of simplify the process and so the way that we're gonna do it is running over here and so with your attachment control there is something called on add file and so right now I don't know I was doing something with it before I don't care that was the copied code from earlier what we want to do is we're gonna grab this buttons code because it does everything everything I want so ctrl C and so we're going to say on add file we're going to paste this in and so let's see it'll set the control it'll do that I'll say I think that'll do everything so the other thing I'm gonna do here is I'm gonna go to the end of it I'm gonna say hey I want you to reset of the attachment control right so what was it named it was attachment control good job me so like that that will reset it and then we can get rid of this button yeah we raise button well we'll get rid of this we'll get rid of this we'll get rid of this we'll get rid of this we can never do this so now we just have our attachment control and so then now if we attach a file and we say yes upload this word document boop see the whole Anne's marching and it resets black to blank that makes me feel pretty good that if I come over here this word document and we click on it success Oh Chui says good job thanks Chui okay that's pretty cool so then what I did from there was I just went in and I started to hack this control up to make it less apparent what was going on so I basically went in here and I just started turning things I got like right your fill or did you feel that instead of your fill being white we're gonna use transparent all bunch so I'm gonna set your fill to be transparent and copy us on to type anymore I'm going to change the color that's the black we're going to change it to transparent and then we're gonna set the border color actually yeah we're gonna set the border color to clear or transparent there we go and then what I did is I went I set a hover border color so that way people would know that they were coming after it and so I said the hover board of color just to black just to make it so the idea is when you hover over it it turns black okay oh and C so that attachment that stuff needs to go away so it's going here and so that looks like there are some things like hover color well we want hover color to be I'm not white I want it to be transparent and then there's also a hover Phil said that's a transparent so then now if we hover oh it turns like that okay so you're like well how does people know to click that so what I then did was I said alright I'm going to insert an Khanh I'm gonna throw the add icon over top of it like this however you want to size it and so then I'm going to right-click on this and say reorder I'm gonna say send it to the back so it's behind the attachment control but the attachment controls completely clear so you don't know that so if you hit play and you hover boom so then now I'd have to kind of you know I played with the sizing and all that things right but that is how I built this pretty thing this was me you know spending hours of my time I'm really terrible making things pretty than making this thing a little bit nicer that's conceptually how that works so even though they think they're cooking the plus in reality they're clicking the attachment control and when they click the attachment control then things are firing oh I broke something who knows yeah and so then now we can upload our files and life is great and in our code here right so remember all the code really here is about on add file we know we're resetting the attachment control over and over again so we don't ever have to worry about it now the image control you know it is still has to stay here so don't don't go deleting it image control is still here but what you want to do with the image control is you can just set it to visible is false you know and then just throw it over here make it real tiny it doesn't matter everything should still work so now if we hit play and we attach a file and this and I haven't clicked multiple times I've had that weirdness happen but it's only been happening in the play mode Y or in the preview mode when I run the app I've not had to quit multiple times sometimes get it a trigger but so if we click on like Chuy's knows we don't care see the little dots marching doo-doo-doo and so then over in SharePoint there's Chuy's knows and there's cheese-face I think that's it so right so when you're all said and done you need these three controls on the screen remember you can put get crazy with your logic you know you could do more things you know you you could go and make this thing so it allows multiple uploads right ramiro kind of covered that you can cover that you can come up with different ways I know my buddy Daniel on the consulting team he he did it by using for auto blooped through a series of basically run that flow over and over again for a bunch of stuff that he put into a attachments control the other thing that we'll probably do in a later video is what we're really gonna do for real customers is we're going to take and make this a actual component app our apps component so in that way you could just reuse this component every time you want to have the the SharePoint up what you wouldn't have to like think through how it all worked you would just be able to kind of plop it here in and out without putting all those pieces together but I haven't done that yet I'm Eric I've done it but I didn't want to do it in this video because I'd be another half an hour and who wants to watch an hour video no one remember if you are a subscriber to the curated content you can just go download this app and all the codes you're not to type loss in if you're not I aren't you yeah no big deal you can go and recreate all this yourself and build upon this people right the idea was I did this I want you to do more with it I want you to take this and expand on the concept and do cool things but now that we can finally save file straight into SharePoint we have one a year and a half of my life put to good use or bad use I don't know but it I've been thinking about this for a really long time so with all that I guess I'm just gonna say thanks and have a great day before you go be sure to click on the subscribe button over here that way be notified when new videos come out if you need any help or you all work together whether your problem is big or small check us out at power apps 9-1-1 we do it all i ron't or if you're looking for more formal training offerings we have those that lean to up here somewhere so check them out thanks and have a great day

Channel: Shane Young

Views: 272,936

Keywords: Shane Young, powerapps911, power apps, shane young powerapps video, PowerApps upload file to SharePoint document library, powerapps upload photo to sharepoint, powerapps upload file, powerapps upload file to sharepoint, powerapps document library, powerapps attachment control, flow save file to sharepoint document library, powerapp upload image, powerapps add image to sharepoint list, powerapps add image, powerapps upload picture to sharepoint, how to add image in powerapps

Id: 3QaiM8SeWfM

Length: 28min 21sec (1701 seconds)

Published: Sun Nov 24 2019