Upload a File Through Canvas and Get Image Data

Das ist die englische Version des Artikels. Die deutsche Version findet ihr hier: https://wp.me/p3Vyfd-kY!

In this article I summarize my experiences and network enquiry on the subject field of file uploads in Power Apps Sail Apps. You tin can go a trivial crazy, but in the end it works ;-).

we volition accept a wait on

• Attachments at SharePoint ListItems / DataVerse Tables,
• File upload without SharePoint / DataVerse Forms,
• and the best of two worlds

Szenario 1: Attachments at SharePoint ListItems / DataVerse Tables

This is probably the simplest thing that is possible in connection with the upload of files. Using the Forms bill of fare item, I select the blazon of form (Edit or Brandish):

Since this is virtually the upload of files, I choose the Edit form, which is now created on my canvas. But first I have to select the data source:

If you want to create a new listing entry via the form, yous have to set New equally the Default fashion or set the FormMode in your UI processes. If you want to edit attachments to existing list entries, set Edit hither:

Our form is now ready and we focus on the DataCard Attachments. If I click on Attach file, the file selection dialog opens and lets me choose the right ane from all my files:

If I click on Open in the dialog, my file selection, hither an erstwhile police beetle, is transferred to my attachment field and is bachelor for upload.

To submit the form, I add a button and configure the OnSelect property with the SubmitForm (Form1) command. If I now click on this button, my file selection volition be saved as an attachment to my new list entry.

Szenario 2: File upload without Forms

Totally simple scenario: I have a simple canvas app with which I want to transport PDFs/Excel-Files,… in a multi-level approval. The data is in an Azure SQL database and the files are stored in a SharePoint library, but could just as easily be stored in an Azure BLOB storage.

The Add Moving picture control

In principle, the selection is not difficult, because there is only one way to select files and transfer them to a downstream process: The Add Picture show control:

If I click on „Tap or click …", the file option dialog opens. Now it's also clear why the command is called Add together Picture, considering it only lets me select pictures:

Other files do not piece of work? Yes they practice! To do this, you have to select All Files and yous can at present also run into all other files.

Can you change that? No!
Is this a trouble? YES, because:

Important! The Add Moving-picture show control only gives me the option to switch to All files in the browser. On mobile devices, at least Android, just image choice is possible.

How I tin can deal with this follows in the next scenario. First, let's wait at how I tin relieve the files in my library.

This is where Power Automate Flow helps u.s.. Only for that to work, we need a button that transfers our file to the Catamenia.

The Add Picture command consists of two elements:

• the AddMediaButton, which I can click and open the file selection dialog (from which I volition subsequently get the file name from the FileName property) and
• the UploadedImage, which contains the FileContent in the Image property.

In gild to transfer the data to my menstruation, I collect my files in a collection of elements with the property pic and picName. I catechumen this into a JSON object and pass it on to my menstruum.

First nosotros demand an Instant Cloud Flow and provide it with a Power Apps trigger.

Via „Ask in PowerApps" we generate an input parameter for the period, which we use as input for a Parse JSON activeness. Equally a reminder: In our app we create a JSON object consisting of an array of our files and the file names.

Hither is the advisable scheme for my example:

{     "blazon": "array",     "items": {         "type": "object",         "backdrop": {             "picName": {                 "type": "string"             },             "pic": {                 "type": "cord"             }         },         "required": [             "picName",             "pic"         ]     } }

The post-obit screenshot shows the data equally it runs into the period:

Now we accept an array of files that we will iterate through to save each one on SharePoint:

The well-nigh important function is the decodeDataUri control, which transfers the file content from the JSON to a new object in which the content type and content are separated from each other. The consequence of this formatting is every bit follows:

So far so good, but in this scenario has some restrictions:

• We take to switch to AllItems in social club to too see files that are not images
• Information technology this only works on the spider web and non on mobile devices
• It still looks like a motion picture upload

Szenario 3: The all-time of both worlds

We have now seen how I upload files via the Zipper command using a Form and how I can implement an upload without a course by using the Add Picture show command..

What I need at present is the file upload from the SharePoint / DataVerse forms, applied to any data source.

Well and then go!

Pocket-size note: I also got this idea from the net, but I didn't remember the source. I'll deliver them later.

To get to the Attachment command, I beginning demand to create a form with a connectedness to a SharePoint list or a DataVerse tabular array.

And so I look for the corresponding DataCard and copy the control DataCardValue8. (For me it is the eighth field. The number can be different for you)

Re-create:

Paste:

After you lot take inserted the control, you tin still see a few errors. These comes from the fact that the control nevertheless references properties of the form from which we copied it. Fixing this is a bit of piece of work, only not hard.

Was that it? No, because the information format that we get from the control element is a session URL that nosotros cannot process further. The catamenia nosotros created higher up throws the following error:

But I wouldn't write all of that if there wasn't a fashion out.

We use a pocket-sized Image control to help, which we place invisibly on the course and whose Image property we have to refer to the first attachment of the zipper control:

My implementation currently only allows one file to be processed at a time, so we should limit the Zipper control to ane zipper:

When that is done, nosotros tin can go on to utilize the menses divers above and invoke information technology as follows:

The but difference is that we get the file proper name from the Attachment control and the file content from the Prototype property of the Paradigm control.

Suggestions for improvement and questions are welcome, via Twitter (@PapaRiedel) or LinkedIn.

Have fun!

holcombbuthich.blogspot.com

Source: https://stefanriedel.wordpress.com/2021/04/19/en-power-apps-file-upload/