How to show image in UI that is saved in internal/external DB
I have a requirement where the user will browse a jpeg file and will click on upload file that will save the base 64 file of the image to database.
Now the challenge is how to display that saved image file in UI?
***Edited by moderator, Maryrita: moved to Product Support from Applications***
***Edited by Moderator Marissa to update categories***
Accepted Solution
Pegasystems Inc.
IN
You need the entire data URI. That is how base64 images in HTML work. Since you know what kind of image it is, you can construct corresponding URI. For instance, for showing GIF, you need to add -
data:image/gif;base64,
to your base64 string.
Pegasystems Inc.
IN
Hi Subha,
When the image is uploaded, in this case, a base64 encoded string will be stored in the BLOB. You may be using a property to store this string.
E.g.: testSign="iVBORw0KGgoAAAANSUhEUgAABOIAAAKICAYAAADdOVVAAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAP"
We can display the image by referencing this property using a label control in the section. Please refer the attached screenshot.
Thanks,
Shreshta
Coforge
IN
Hi i am using the filepath control. I am unable to find the base 64 string in any clipboard page or in parameter page. Can you just tell in which page the base 64 string is stored.
Currently i am just uploading the image using file path control. Once i get the base 64 string i will save that in order to use it later on.
Coforge
IN
Hi
I got your point. But as of now i am unable to find the base 64 string in any clipboard page.
I am just having a section with file path control where i am browsing the image file and choosing it.
Can you please tell now what are the steps i need to follow in order to get the base 64 string of that image and save it to DB
Pegasystems Inc.
IN
FilePath control is used for binary uploads of files. It'll not return or set base64 anywhere. Subsequent activity/page submit is used to upload file to server. You can call pxUploadFile activity to get uploaded file data into Primary-pyUploadedFile page and from there decide how to persist on server.
Pegasystems Inc.
IN
This seems more ideal. However, I tried this but I'm unable to get the image to display in the section.
Should the property contain the entire data URI of the encoded image? Or just the base64 string? Just the string isn't working for me. The entire data URI works fine though but looks like it needs to be generated?
Thanks,
Shreshta
Accepted Solution
Pegasystems Inc.
IN
You need the entire data URI. That is how base64 images in HTML work. Since you know what kind of image it is, you can construct corresponding URI. For instance, for showing GIF, you need to add -
data:image/gif;base64,
to your base64 string.
Coforge
IN
Hi
I have got the base 64 encoded string. Now i am using image control keeping property as the source. In the property i have stored the entire string i.e. data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4RDcRXhpZgAATU0AKgAAAAgABAE7AAIAAAAGAAAISodpAAQAAAABAAAIUJydAAEAAAAMAAAQyOocAAcAAAgMAAAAPgAAAAAc6gAAAAgAAAAAAAA
But still the image is not getting displayed
Aaseya IT Services
AU
Hi,
Use label instead of image control and use this <img broder=0 src="data:image/png;base64, <pega:reference name=".PropertyName" />" width =500 height= 500/> I have achieved this. Please refer below image for reference. Hope this helps:)
Pegasystems Inc.
IN
I don't see any reason why it wouldn't work. Are you on Pega 7.1+ versions? Is your base64 valid? Can you try testing it on this fiddle. Replace src with your base64 string.