Power Apps Upload Multiple Files AND Drag and Drop Files

in today's show we're going to how to upload multiple files to powerapps what and we're going to do it by dragging and dropping or multi-selecting that's right we're going to do these things that you've been asking for for a long time i finally worked it out made it as easy as possible and i'm going to share with you but first here's our intro hi my name is shane young with powerapps911 those guys and today we're going to upload multiple files in one pass to flow using powerapps i'm very excited for this oh yeah we're gonna do drag and drop oh yeah we're gonna do multi-select this show is straight fire that's why the fire extinguisher up there right and for those of you don't like my enthusiasm i'm sorry i get excited about this type of stuff but yeah so what i did was i finally sat down and figured out how to do all these things and what's interesting is i didn't just take the method of uploading a single file and like loop through that with a for all we're actually going to send all the data over in one flow call and then have flow do the looping so then that way to be more efficient and you know a lot better and as a bonus because of the way i'm doing this if you guys are building offline apps this will also work in an offline scenario because we're putting it all into collection like this is a win-win-win-win video okay i'm sorry i'm excited i'll switch over to my desktop i'll try to calm down and take a look so the first thing i want to do over here on the desktop is the simplest right so you can see i've made a very simple app to teach you guys how this works we're going to show some stuff as we go but the most common one right is we're going to click on my attachment control here and so you scroll down here and i've been using you know different pictures um i don't know let's grab chewie's headshot so i'm clicking chewie's headshot and then i can just hold down the control key and grab chewie sit and theo and harley and roger and bowtie right so i grabbed four files so this is not totally new right you've always been able to do this with attachment control just hold down the control key you can or the shift key right whatever way you want to multi-select you can do that and we say open it is dropping them into that attachments library now that's one way to get the files in right kind of fun the second way though is we can drag and drop hang on let me open up an explorer one sec okay so i'm just going to pull over regular explorer right so i've got this open i've got to open my desktop folder and so in windows explorer i'm just going to highlight out of line four six seven i don't know those five files i don't care what i grab i'm gonna grab those five files i'm just gonna pull them over here look at this you can drag and drop into the attachment control so i there's debate this wasn't always here i just don't know how long it's been here but i discovered it this week so it's been there for a long time oops but look dragon drop we drop the files in so now we've got all of those files right we've got the different ones um that we manually uploaded or that we used you know by clicking on the add file and then we've got the different pieces here so i've got these six files here and so now i want to push those to sharepoint so our sharepoint document library so to do that we're going to click on upload all now before we do that i want to kind of show you a little bit about how this is going to work so kind of get us going so what i really am doing is this is outputted by attachments um or attachment control dot attachments and so i'm using that to feed into a gallery so there's a gallery on the page it's invisible right you don't need it to show up your users don't need to know it's here but i want you guys to know it's here because you need it but by passing all this through the gallery i can pass all the image or all the files they don't have to be images right so remember like um we had a whatever was here let's just get rid of chewie's head shot and let's add another let's add one as excel files and so even the excel file goes through this process right and so with all those in here we're now going to press upload all and right we'll see the little spinner and so after a couple seconds the upload is finished and if we go over to my sharepoint document library and do a refresh you're going to see right so there's roger and his bow tie theo and harley chewie sit a different oh those are some old hand let's just do another refresh i refresh too fast there we go a different name so all six of those files are right here so pretty cool right so what we're going to do is we're going to walk through how all this works but i guess i should show you the button for those of you who don't want to watch the whole video i know how you are um so if we look right here we'll see that the upload all button really what we're doing is we're using a collection and we're going to explain how this logic works but that's the code that does the hard part because i wanted to run one flow instead of a lot of people say all right take a flow and for all so of six things where it made six flow calls which consumes more resources takes more time so by packaging all this up into collection and shipping the collection to power automates with just the bare essentials it needs which we'll look at then you're able to do this now so that's that's what we're going to explore we're going to understand more about how this works now keep in mind if you just want to steal this after i don't care it's one download this app remember you can go to training.powerapps911.com and go to the resource library the curated library whatever we're calling it this day you'll see the little youtube thing you can sign up there and if you sign up for that uh subscription then you have the ability to download the working app and all the other working apps so a lot of cool stuff out there but we're gonna walk you through how to build this nonetheless the other thing to keep in mind as we talk through this you know is if you don't understand how to upload a single file so if you never watch the video right the video linking up there to upload a single file then this is going to be a little bit deep for you right but if you go and watch that one if you understand they upload a single process because we're not going to talk about all the basics again then you're going to be able to apply this concept so watch that video first if you haven't seen it okay so the first thing we did was we just do an attachment control in here um and then i just kind of customized it but and by customizing i mean i just went in here and said alright attachment control like there is add attachment text right so i just changed the text there like i didn't do anything special to it but one difference from the previous video you watched on a single upload is there is now no longer any code in onad file because we can't have this automatically trigger anymore in the single upload scenario when they upload a file on add file triggers and we ran the flow and we saved it here if you attach three files at once on add file runs three times but it gets really confused and basically it'll upload the first one correctly and it'll mess up the rest so that'll be a challenge you also might have noticed when we were attaching files that it only let me attach so many and so just remember that there is max um so there's max attachments so it is set to six i think you can set it up to 10. i haven't messed with the upper boundary of how many files you can do so you guys feel free to play that but there is a way to change that and then there's also math max attachment size and so that is the maximum file size and that is in megabytes so only up to a 10 meg file i believe that you can increase that up to 50 megs but what i don't know is if you tried to upload 650 meg files i'm guessing that would fall apart i've not tried like i said i've not stretched the upper limits of this so you guys will need to do your own experimentation leave comments below with what you find like the upper boundaries are because i'm certain there are upper boundaries but i'm kind of showing you the two knobs that you can turn and control the number um the other thing that i did here was i went in and so dropped target background color so i changed this to that really dark gray that's what gave it that nice look right when i was dragging in there like it made it real obvious what where i was the drag target was um and so there's a bunch of these different drop um settings that you can mess with if you want to change it maybe make it blink red because your user's like i can't figure out where to drop yeah you can change it for them okay so the attachment control nothing really to do with it so second step so let's first need attachment control second if you don't know where you get the attachment control it's because you didn't watch the first video so i'm not going to tell you so the second thing you need is the gallery and so the gallery is a requirement and what you're going to do with the gallery is you need to have the attachments control uh dot attachments right so that's going to be the item so my attachment controls name dot attachments that is the table of data of the attached records speaking that we need to attach a couple records to make this work so let's just grab a couple of pictures over here how about chewie uh should we getting a haircut oh nobody not gonna do that chewy haircut and we give me a kiss oh how cute what a nice dog if i can learn to use this there we go open those two okay and so the reason i didn't want chewie's kiss whatever it's in there so what i wanted here was for you guys to see um that you have to configure this so you're gonna need files in here to configure it and all that you really have to configure all the gallery really needs is an image control because we're gonna reference this image so you notice this is image three we're gonna reference that in a second so you have to use a gallery and there has to be an image control in here but you can make it real tiny i mean it doesn't matter because once again what are we going to do oh well i'm going to break things um remember that you powerapps being dumb powerapps anyway what you're going to do is you just need this reference and you don't have to show this so you can just set the visible to false but it just needs to be over in the corner of your app right because your users don't need to see it but you need it for its logic because the real challenge is then going to be over here in the upload all so let's talk about what this does so set var show loading to true right that just runs our spinner that's what made the little spinny wheel while we were waiting no big deal there but so this collection this is the thing where you have to really put your thinking cap on okay and so what i'm going to do remember when you're looking at a large one like this always work from outside in so we start with gallery one dot all items not attachment control dot attachment gallery one dot all items and the reason we start there is because we need that image control to be referenceable and the rim image control is referenceable via gallery one all items if you highlight that you would see down here image three the controls there the files all the things are there okay and so that is the first piece so gallery one alliance i'm gonna take that i'm gonna do an add column so remember this is a table add columns adds another column to that table so i'm going to add a column called base64 and call whatever you want by call it base64 and then we're going to do this crazy okay so this with function and so what this is doing is this is grabbing the whatever image is an image three dot image right so that's a different image on every screen or everything and it doesn't have to be an image remember this worked just as well for a word document as it did for a file an image but we have to use the image control so image3.image turn that into its binary data so this little json function and we talked about the first video makes the the whole extract of it so it's got the double quotes data blah blah blah blah comma and then the base64 double quotes so that's what this output so we use with to put that into this temporary variable called var demo from attachment control then we wrote this crazy shenanigan mid formula and this mid formula is what knocked off the double quote the header information all the way the comma right so it got rid of all that and then got rid of the comma at the end so you're left with just the base 64. we just need the raw base64 no headers no quotes just the raw base64. so it does that it makes that base64 and puts it in the column i named base64 i'm so clever and then to minimize the amount of data that we send from powerapps to powerautomate right the stuff we actually send across the wire i want to make that as small as possible i use show columns to say hey only show the column base64 and name that's why if we look at coal files oh i got to press the button to get profiles my clear coat files darn it so if we run just this let's just copy this out real quick and run it on a separate button so you can see what that does insert a button paste that in all right this is what we're here for we're here to learn so let's just play oh put that over here press the button okay so that would make a collection called co-files and so in there is the file name and the raw base64 that's it because that's all we need to create a file if you wanted to send more information because you want to have a parent record or some metadata or something else that you're going to use in your flow as you guys do more complex things great send more but don't send anything more than you have to so we use show columns so when we generate this collection called code files it just has the two things we need perfect smurfic perfect smurfic is that a word i don't know okay so let's just delete that so it doesn't confuse me and so then that's how the collection works so that's probably where i spent the most amount of time is understanding how to write this collection as clean and tight as possible to send a little data then just one time we run the the flow that i named powerapp compose good job shane and so what you're going to do in that is you're going to send the collection over but you're going to send it over you have to encode it so your json your collection name json format indent4 and that puts it into the format that flow wants so now we're going to jump to flow with flow i just have a regular powerapps trigger i have this composed up here this is not necessary but i ended up using the compose step to request the collection because when i did it the first time i had to grab the data right so when i did my first run here let's just go backwards to the last run we did so when i do the first run i came in here to the compose and where it says outputs click to download i copied all of this hot garbage i used really small files so hot garbage was as small as possible but i copied all of that like it still hasn't even loaded there's so much there please don't crash and so then once i did that run right got that then when i went to parse.json i copied that and i said generate from sample and i pasted the big wall of hot garbage which i made as small as possible also right and so it automatically figured out that i was going to pass an array with objects and there was going to be a name column that was a string and a base 64 column as a string and both were required so um power auto power automate flow whatever we call this thing it figured all that out itself by me doing the compose step to get it technically speaking i could delete the compose step but then i had to ask and power ups that are in there i would have broke the flow so i just left this here it's kind of redundant but it worked for me okay so now that we've parsed the json which so we've we took our table our collection and powerapps turned it into json right sent the json to flow flow got the json and parsed it back into a table it's just what you have to do so that's how you get it in here so now it's in flow as a table or an array if you want to use fancy words so then we just loop through that array so when we uploaded the six files it ran through this six times and then we did our normal create file in our document library name is just the name column and then of course for the file contents we had to take the base64 we had to do that base64 to binary what you learned in the first video and that was how you did it boom just like that that's what you'd see right so like if we go back over here again just so you can see it so with this one we ran 12 minutes i've been talking a long time see it ran six times and so it just uploaded you know roger to bow tie and then it uploaded whoever's next i forget theo and harley right it just worked its way through those uh just as fast as it could so that's it folks that is how you build so that your users can multi-upload and so that your users can drag and drop right all of that in one little video also keep in mind right like if you're thinking about you're like hey shane i want to do offline like you said in the beginning right remember you've got this stuff in cold files there you go you've done it you've got the data in the collection now you can save data that you can load data that when you come back online and then you can run the flow right like this does this because it uses a collection as a primary vehicle this makes it really easy to adapt this to offline if you're wondering about offline right i've got a separate video for those um you know i've done offline apps before so i know you get these questions but that's it folks hopefully like i was like legit like pumped up i'm still pumped up but hopefully you guys really enjoyed this and hopefully this helps you guys right but this is this is kind of exciting this is something people have asked me for for a long time and we've kind of known some of the pieces but i finally sat down assembled them all and then i tripped over the dragon drop and i was like so um if you have any questions any comments leave them below always happy to answer those um you know remember you can go download the app at training.powerapps911 or you can sign up for any of my classes i've got you know on-demand classes we got all access passes i got a live class coming up lots of ways to hang out with me who doesn't want to hang out with me right all right over that i'm going to say thanks and have a great day before you go be sure to click on the subscribe button over here so that way you'll be notified when new videos come out if you need any help or you want to work together whether your problem is big or small check us out at powerapps911 we do it all i rhymed or if you're looking for more formal training offerings we have those linked up here somewhere so check them out thanks and have a great day

Channel: Shane Young

Views: 64,778

Keywords: Shane Young, powerapps911, PowerApps, Power Apps, powerapps upload file to sharepoint document library, powerapps upload file, powerapps upload image to sharepoint document library, powerapps upload attachments to sharepoint list, powerapps upload to sharepoint document library, powerapps upload multiple files, powerapps upload multiple files to sharepoint, powerapps upload multiple file to sharepoint document library, powerapps drag and drop, powerapps drag and drop files

Id: 7UeRzfPo8RE

Length: 18min 21sec (1101 seconds)

Published: Mon Oct 04 2021