Upload Images from Rich Text Control to SharePoint List and Document Library

Introduction

PowerApps offers a powerful Rich Text Editor control where users can input formatted text and insert images. However, saving this data properly — especially when images are inserted — to SharePoint is not straightforward.

In this article, I'll show you exactly how I solved this real-world challenge:

Save user-entered Rich Text + multiple images from PowerApps.
Upload images separately to a SharePoint Document Library .

Save the final HTML with SharePoint image links inside a SharePoint List .

1. SharePoint Setup

Step – 1.1: Create a SharePoint List (e.g., " Product Quality Checks ") with
- Title (Single line of text)
- Description (Multiple lines of text, enable Enhanced Rich Text).
- Status (Choice) ("Pending", "Complete")
- Inspection Date (Date and Time)

Step – 1.2: Create a Document Library (e.g., " Quality Check Photos ") to store uploaded images.

2. PowerApps Setup

Step – 2.1: Go to https://make.powerapps.com/ and open the app where the Gallery screen is created using the Product Quality Check data source. Inside the gallery, add a View icon to each item to allow users to view detailed information. When the icon is clicked, set a variable SelectedRecord to ThisItem and navigate to the FormScreen . On the FormScreen, display a Display Form with its Item property set to SelectedRecord to show the selected record's details. This allows users to view full record information directly from the gallery.

View Icon OnSelect Property Code:

  
    Navigate( 
    FormScreen, 
    ScreenTransition.Fade, 
    { 
        Type: "View", 
        SelectedRecord: ThisItem
    } 
)

Add an Edit icon to each item in the gallery to allow users to modify their data. When the icon is clicked, it sets the variable SelectedRecord to ThisItem and navigates to the FormScreen . On the FormScreen, an Edit Form is displayed with its Item property set to SelectedRecord, allowing users to view and update the full details of the selected record.
Edit Icon OnSelect Property Code:

  
    Navigate(
    FormScreen,
    ScreenTransition.Fade,
    {
        Type: "Edit",
        SelectedRecord: ThisItem,
    }
)

Add New button in your Gallery Screen and When the user clicks the Add New button then it will navigate to same FormScreen but it uses Blank() to show New form for creating a new record.
Add New Button OnSelect Property Code:

  
    Navigate( 
    FormScreen, 
    ScreenTransition.Fade, 
    { 
        Type: "New", 
        SelectedRecord: Blank() 
    }
)

Step – 2.2: Create Screen and Give name FormScreen and Add Edit Form Control and add your data source and in this form, In Form Add Required Data Card.
- Form Properties:
  - Datasource = Add your Datasource in my case Product Quality Checks is data source
  - Item = SelectedRecord
  - DefaultMode = Switch(Type, "New" ,FormMode.New, "View", FormMode.View)

Note: The Rich Text control is not available by default in PowerApps forms. However, you can easily add and configure it to replace the standard text input for fields such as the Description field. This allows you to capture rich text, including formatted text and images, and save it to a SharePoint list.

Step – 2.3: Add Rich Text Control in Form for that, Unlock the Data Card for the Description Field.
- In your PowerApps, navigate to the form containing the Description field.
- Find the DataCard for the Description field (usually named something like DataCardValue_Description).
- Click on the DataCard, then in the right-hand properties pane, click the Advanced tab.
- Unlock the DataCard by clicking on Unlock to change properties .

Step – 2.4: Remove the Existing Text Input
- Inside the unlocked DataCard, locate the Text Input control that is currently used for the Description field (it may be labeled DataCardValue_Description).
- Select and delete the Text Input control.

Step – 2.5: Add the Rich Text Editor Control
- From the Insert menu, go to Text and choose Rich Text Editor .
- Insert the Rich Text Editor control into the same DataCard where the Text Input control was removed.
- Position the Rich Text Editor so it fits nicely inside the DataCard.

Step – 2.6: Set the Default Property for the Rich Text Editor
- Select the Rich Text Editor control.
- In the Default property of the Rich Text Editor, set it to display the existing Description value from the SharePoint list:

  
    Default = Parent.Default

This ensures that the existing description from SharePoint will appear in the Rich Text Editor when the form is loaded.

Step – 2.7: Set the Update Property to Save Rich Text
- In the Update property of the Description DataCard, set it to save the content entered in the Rich Text Editor control:

  
    Update = RichTextEditor2.HtmlText

This ensures that any changes made in the Rich Text Editor will be saved back to the Description field in the SharePoint list.

Step – 2.8: Now Add Button in FormScreen and give name Save and OnSelect Property of Save button, To capture the content entered in the Rich Text Editor control and save it to the SharePoint list, use the following formula:

  
    Set(varHTMLText,RichTextEditor1.HtmlText); 
SubmitForm(Form1);

Step – 2.9: In Form OnSuccess Property We will apply logic for upload multiple images from the Rich Text Control to the SharePoint Document Library with use of Power Automate and update the SharePoint List with the processed HTML content.

  
    // Reset temporary context variables used for string parsing 
UpdateContext( 
    { 
        base64Start: 1, 
        endPos: 0, 
        fullBase64: "" 
    }
); 
// Extract all base64 images from the HTML text and upload them to SharePoint 
ClearCollect( 
    colBase64Images,  // Store processed image info 
    ForAll( 
        // Split the HTML text on each <img> tag 
        Filter( 
            Split(varHTMLText, "<img src=""d"), 
            Find("base64,", ThisRecord.Value) > 0  // Keep only base64 image tags 
        ), 
        With( 
            { 
                mainLine: "<img src=""" & ThisRecord.Value,  // Full <img> tag 
                firstPart: Mid(ThisRecord.Value, 1, Find("base64,", ThisRecord.Value) + 6), 
                base64Start: Find("base64,", ThisRecord.Value) + 7, 
                fullBase64: Mid(ThisRecord.Value, Find("base64,", ThisRecord.Value) + 7) 
            }, 
            With( 
                { 
                    // Extract the actual base64 string (until the next double quote) 
                    endPos: Find("""", ThisRecord.fullBase64) - 1, 
                    base64Str: Mid(ThisRecord.fullBase64, 1, Find("""", ThisRecord.fullBase64) - 1) 
                }, 
                With( 
                    // Upload the base64 image to SharePoint and get the image URL 
                    {uploadedLink: UploadImageToDocumentLibrary.Run(base64Str).sharepointfilelink}, 
                    { 
                        // Replace the base64 string with the SharePoint image link 
                        mainLine: mainLine, 
                        firstPart: firstPart, 
                        base64Start: base64Start, 
                        fullBase64: fullBase64, 
                        endPos: endPos, 
                        base64Str: base64Str, 
                        uploadedLink: uploadedLink, 
                        replacedLine: Substitute(Substitute(mainLine, base64Str,uploadedLink),firstPart,"") 
                    } 
                )
            ) 
        ) 
    ) 
);

// Rebuild the full HTML: start + all processed image lines 
Set(varFinalHTML,First(Split(varHTMLText, "<img src=""d")).Value & Concat(colBase64Images, replacedLine, "")); 

// Save the final HTML (with SharePoint image links) to SharePoint 
Patch( 
    'Product-Quality-Checks', 
    Form1.LastSubmit, 
    {Description: varFinalHTML} 
); 
ResetForm(Form1); 

// Clear the variables used to store HTML(img) content 
Set(varHTMLText,Blank()); 
Set(varFinalHTML,Blank());

3. Power Automate Setup

Step – 3.1: Go to https://make.powerautomate.com/ and Create a flow from PowerApps to PowerAutomate and give name "Upload Image to Document Library".

Action 1: In the Power Apps (V2) Trigger, add an input named Input of type Text.

Action 2: Add a Create File action, Specify the Site Address and Folder Path of the Document Library where the image will be saved.
Set the File Name (e.g., utcNow().jpeg ), and In the File Content field, use the following expression:

  
    base64ToBinary(triggerBody()['text'])

Action – 3: Add a Respond to a Power App or flow action , then add an output named sharepointfilelink of type Text. In the Value field, specify the Site Address followed by the File Path from the Create file action—for example:
https://yourtenant.sharepoint.com/sites/yoursite/ outputs('Create_file')?['body/Path'].

Step – 3.2: Add Created PowerAutomate Flow in PowerApps as per below Image.

Output

Document Library

List Columns

Conclusion

Using this article, you can easily upload multiple image using Rich Text Control From PowerApps to SharePoint List Column and Document Library.