PowerApps: Upload File To SharePoint

 Hello Friends,

Welcome back with another post on PowerApps. Today, we will talk something different. Sometimes, you had faced a situation where you need to upload a document to document library. As we don't have any File Upload control in PowerApps, then how do we achieve this? Let's try.

For this, we have to first know the process, we have to follow. We will use the attachment control, provided by the List Screen. Along with this, we will use Power Automate to save the file in SharePoint. Additionally, we will make some manipulation to get the file content. Let's start-

1. First of all open the PowerApps and create a blank canvas app. I named it "UploadFileToSharePoint". Save this app.
2. Now add a New Screen of type "Form". Now connect it's data source to any of the list of SharePoint. Basically, we have to get the attachment control from the Form. The moment you link this form with any list, all the fields control will automatically gets populated on form.
3. 
4. Check, if the Attachments control is there. If not, then click on Fields provided just below the Data Source option in right panel and choose "Attachments" control.
5. 
6. Now add a blank screen and cut the attachment control from above screen and paste it here.
7. 
8. Now, make some changes to the properties of this attachment control:-
1. Set Items property as blank
2. Set BorderColor property as "Transparent"
3. Set Tooltip property as blank
4. Set DisplayMode property as "DisplayMode.Edit"
9. Now, from the right panel:-
1. Set Max attachments as 1
2. Set NoAttachmentsText as blank
3. Set AddAttachmentText as "Select file"
4. Set MaxAttachmentsText as "Click on upload button to Save the file."
5. Set Tooltip as "Select file"
10. Now add a button named "btnUpload" and Text as "Upload".
11. In order to save the file in SharePoint, we need two information-
1. File Name
2. File Content (in Base64)
12. The attachment control does not return the content in base64 format.
13. For that we need to do some customization.
14. We will add an Image control. The content of file will be linked to this image control and then we will use this image content to fetch the base64 value of file. Let's see-
15. Add an Image control set the Image property to "Last(DataCardValue9.Attachments).Value"
16. Here DataCardValue9 is the attachment control.
17. You may set visible property of this image control to false.
18. Click on btnUpload and select it's OnSelect property. Here we will fetch the base64 value of file.
19. Add below code-

20. Set(
        vrImageContent,
        JSON(
            Image1.Image,
            JSONFormat.IncludeBinaryData
        )
    );
    

21. When you bind this variable to  a label, you will find something like below-
22. 
23. The data starts from something ""data:appli...;base64,...""
24. We need to remove the string ""data:appli...;base64," and the ending double quote which is present at the end of the data. After removing these, we will get the final base64 value of file content. For this, add below code just after the above one-

25. Set(
        vrBase64Value,
        Mid(
            vrImageContent,
            Find(
                ",",
                vrImageContent
            ) + 1,
            Len(
                Mid(
                    vrImageContent,
                    Find(
                        ",",
                        vrImageContent
                    ) + 1
                )
            ) - 1
        )
    );
    

26. This code is fetching the data by skipping first set of non desired string ("data:appli...;base64,) and then extracting the next actual content by skipping the last character which is double quote (").
27. Now we will use this final value to upload the file in SharePoint. This completes the first part.
28. Now coming to second part.
29. Create a document library named "FileFromPowerApps".
30. Now open Power Automate. Click on "+ Create". then select "Instant cloud flow".
31. Choose the trigger type as "PowerApps". Give a name "SaveFileToSharePoint" and click on Create.
32. 
33. A blank flow will be created with PowerApps as default action.
34. Now click on "+ New step" and choose "Create file (SharePoint)" action.
35. 
    
    
36. Select the SharePoint site, where you had created the document library in "Site Address" field.
37. Select the document library name by clicking on folder icon showing in "Folder Path" that you had recently created to store the documents.
38. Now the File Name and File Content. For this, click on respective field boxes then click on "Ask in PowerApps" from Dynamic Content window.
39. 
40. It will create the input parameters for PowerApps by default. Now click on "File Content" field and delete the input parameter reflecting over there. Then click on Expression window and select the function "base64ToBinary" and pass that input parameter to this function. This was done because the file content we will receive from PowerApps will be in base64 format and it needs to be converted into binary format before saving.
41. 
42. Save this flow and come back to PowerApps. Add a button and select its "OnSelect" property. Click on Action >> Power Automate from top bar menu. A list of available supported Power Automates will be displayed. Choose the recently created Power Automate. Wait for couple of seconds till it add the Power Automate to the OnSelect action. After getting added, it will look like below screenshot. Now copy the function showing "SaveFileToSharePoint.Run(" and paste the same at the end in our btnUpload >> OnSelect property code.
43. 
44. This Power will ask two values-
1. File Name >> Last(DataCardValue9.Attachments).Name
2. File Content >> vrBase64Value
45. Close the function bracket.
46. 
    
    a
47. Save the PowerApps.
48. The complete code is-

49. Set(
        vrImageContent,
        JSON(
            Image1.Image,
            JSONFormat.IncludeBinaryData
        )
    );
    Set(
        vrBase64Value,
        Mid(
            vrImageContent,
            Find(
                ",",
                vrImageContent
            ) + 1,
            Len(
                Mid(
                    vrImageContent,
                    Find(
                        ",",
                        vrImageContent
                    ) + 1
                )
            ) - 1
        )
    );
    SaveFileToSharePoint.Run(
        Last(DataCardValue9.Attachments).Name,
        vrBase64Value
    );
    

50. Now, it's time to test it.
51. Before that, please remove the button we have added temporarily to get the Power Automate function.
52. Please find below a series on snaps to show the working of functionality.
53. 
    
    
54. 
    
    
55. 
    
    
56. Clearly file has been uploaded successfully and is able to open.
57. This way we can achieve the functionality. This was done for a single file.
58. In case, if you wish to upload multiple files, 
1. You need to reset the Max Attachments count accordingly.
2. Instead of Image control, you need to take gallery control with Image and Title.
3. Change the function for properties (OnAddFile, OnRemoveFile, OnUndoRemoveFile) and assign the attachments to a local collection.
4. On btnUpload >> OnSelect, use ForAll function to save files one by one automatically.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !