Hello,
This is probably already known to you, but I learned about it yesterday so someone else migth as well find the method useful.
Problem: Taking a photo using the camera in a canvas app normally means that you must use a Flow to upload the photo to SharePoint.
Problem 2: When displaying photos from SharePoint in a canvas app most of the times means that the photo is loaded directly from SharePoint and not bu using the SharePoint connector which gives you permissions related errors in some cases.
Solution:
A really simple app with one Image Upload and one Button
The OnSelect code for the Button
Set(ImageBinaryRaw, JSON(UploadedImage1.Image , IncludeBinaryData));
Set(ImageBinary,Mid(ImageBinaryRaw, Find(",", ImageBinaryRaw)+1, Len(ImageBinaryRaw)-Find(",", ImageBinaryRaw)-1));
Patch(ImageUploadTest,Defaults(ImageUploadTest),{Title:"Test", Base64Image: ImageBinary});
Reset(AddMediaButton1)
This is what the SharePoint list looks like:
This is the result screen:
Its a gallery with an image control. The code for the image control:
"data:image/jpg;base64," & ThisItem.Base64Image
Quite simple! 🙂
Hi @MagnusGöransson ,
Thanks for your sharing, it's amazing! If you have any other questions about PowerApps, please feel free to reply here.
Best regards,
For some reason, the forum converts one of the formulas
"data:image/jpg;base64," & ThisItem.Base64Image
This is what it should look like:
This is by far the cleanest and best answer I have found, one little extra I just concatenate the ImageURI in the patch so that its automatically readable. this will also make it easier if you want to use flow to decode this into file content.
Set(ImageBinaryRaw, JSON(UploadedImage2.Image, IncludeBinaryData));
Set(ImageBinary, Mid(ImageBinaryRaw, Find(",",ImageBinaryRaw)+1, Len(ImageBinaryRaw)-Find(",", ImageBinaryRaw)-1));
Patch(DB_Images, Defaults(DB_Images), {Title: ImageNameInput.Text, Base64Image: Concatenate("data:image/jpg;base64,", ImageBinary)});
Reset(AddMediaButton2);
Used the solution this way, works well though I'm still working on editing an entry without it making a new row entirely.
SharePoint Columns
Employee
TotalAmount
ReceiptType
ReceiptDate
BaseImage64Multiple (Just used multiple lines instead of single line of text)
Department
UploadDate
Comments
Set(
ImageBinaryRaw,
JSON(
UploadedImage3.Image,
IncludeBinaryData
)
);
Set(
ImageBinary,
Mid(
ImageBinaryRaw,
Find(
",",
ImageBinaryRaw
) + 1,
Len(ImageBinaryRaw) - Find(
",",
ImageBinaryRaw
) - 1
)
);
Patch(
Receipts,
Defaults(Receipts),
{
BaseImage64Multiple: ImageBinary,
Employee: DataCardValue10.Text,
TotalAmount: Value(DataCardValue11.Text),
ReceiptType: DataCardValue12.Text,
ReceiptDate: DataCardValue14.SelectedDate,
Department: DataCardValue16.Selected,
Comments: DataCardValue13.Text,
UploadDate: DataCardValue9.SelectedDate
}
)
Great!
Changing Patch so it updates in stead of creating a new row is quite simple.
Instead of "Defaults(Recipient)" you should point to the record you want to update.
This solution doesn't seem to work with 'Add picture' control? I know you said it works for camera control but is it possible to make it work for "Add Picture' upload to SP List?
I have tried many hacks online but nothing seem to work so far.
In the above example I am using the Add picture to upload to SharePoint so it works.
What error do you get or what is not working?
Amazing! Thank you for passing this along.
Just wondering if you can take the text in the photograph field from SharePoint and turn it into an actual picture or launch it as a picture on a website? Asking because, as I understand it, the only way to view these images is within PowerApps.
User | Count |
---|---|
256 | |
107 | |
90 | |
51 | |
44 |