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:
1. SharePoint Setup
![02-06-2025-04-52-50]()
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.
![13-06-2025-11-58-51]()
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()
}
)
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.
![02-06-2025-04-58-22]()
![02-06-2025-04-59-29]()
Default = Parent.Default
This ensures that the existing description from SharePoint will appear in the Rich Text Editor when the form is loaded.
![13-06-2025-12-16-55]()
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:
![05-06-2025-05-46-10]()
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
![02-06-2025-05-22-25]()
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'].
![02-06-2025-05-01-54]()
Output
Document Library
![02-06-2025-04-56-45]()
List Columns
![02-06-2025-04-55-58]()
Conclusion
Using this article, you can easily upload multiple image using Rich Text Control From PowerApps to SharePoint List Column and Document Library.