Uploading images to SharePoint list without using Flow

[MagnusGöransson]

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

[v-xida-msft]

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,

[MagnusGöransson]

For some reason, the forum converts one of the formulas

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

This is what it should look like:

[Kelly-Cook]

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

[adyboon]

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

[MagnusGöransson]

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.

[Anonymous]

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.

[MagnusGöransson]

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]

Amazing! Thank you for passing this along. 

[CP153319]

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.