cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
MagnusGöransson
Kudo Collector
Kudo Collector

Uploading images to SharePoint list without using Flow

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: 

 

image3.JPG

image2.JPG

This is the result screen:

 

image4.JPG

Its a gallery with an image control. The code for the image control:

 

"data:image/jpg;base64," & ThisItem.Base64Image

 

Quite simple! 🙂

 

24 REPLIES 24
v-xida-msft
Community Support
Community Support

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,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

For some reason, the forum converts one of the formulas

 

"data:image/jpg;base64," & ThisItem.Base64Image

 

This is what it should look like:

 

imgae6.PNG

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?

CP153319
Helper V
Helper V

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. 

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Top Solution Authors
Top Kudoed Authors
Users online (1,374)