cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Advocate V
Advocate V

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! 🙂

 

22 REPLIES 22
Highlighted
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.
Highlighted

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

Highlighted

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);

 

 

 

Highlighted

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
    }
)

 

 

 

Highlighted

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.

Highlighted

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.

Highlighted

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?

Highlighted
Helper V
Helper V

Amazing! Thank you for passing this along. 

Highlighted

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
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Top Solution Authors
Top Kudoed Authors
Users online (8,497)