Displaying a Base64 image in a form ... Topic is solved

[Mr71]

I have a base64 string that I use to successfully display an image stored in the db within an html page ... is it possible to display the string with an object within a nubuilder form ?!

[kev1n]

Hi,

Use an image object, then assign the base64 string to it's src.

Code: Select all

$("#imgId").attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');

[Mr71]

Hi Kevin
with the image object (I guess I have to set the custom code [onnuload]) the string of your example comes out as shown in the photo. I would like to display album covers (300 x 300 jpeg/png), with the html object they display fine (with the img tag), but I don't know how to connect the string base64 contained in the database field. I don't know if another solution is possible (not with json string which I know is in the snippets code and it works great on nubuilder)
... thank you very much as always ...

[kev1n]

Use a html object that contains a img tag.
Replace #objectid# with the nuBuilder object id that contains the base64 string.

Code: Select all

<img src= "data:image/png;base64,#objectid#" width="300" height="300">

[Mr71]

Yes, it works well, thanks Kevin !! Is there a solution to store the base64 image string with the file browser (
directly on the image without using external converters !?). It is not essential but it would be very convenient ...

[kev1n]

If you use a file object, add an event listener to it, convert the file to a base64 string and assign it to the nuBuilder (text) object.

[Mr71]

I deepened your advice and found this system to be able to insert a base64 encoded image. If I use in a HTML object the code below works fine but I don't know how to write the encoding in the database field.
If I use a "procedure" nuRunPHP('obj_base64','iframe_c_html',0); in form properties linked with an html object (with the tag for iframe in html tab: <iframe id = 'iframe_c_html' title="" width="1400" height="600">) to use php, the code seems to work only for the html part (open browse window and show only text <p> tag, not id "64" and"img"), leaving out the javascript part, so I don't see the result. what's the problem?! Where am I wrong !? This is the code:

Code: Select all

echo '<script>
    function readFile() {
  if (this.files && this.files[0]) {
    var FR= new FileReader();
    FR.addEventListener("load", function(e) {
      document.getElementById("img").src       = e.target.result;
      document.getElementById("b64").innerHTML = e.target.result;
    }); 
    FR.readAsDataURL( this.files[0] );
  }
}
document.getElementById("inp").addEventListener("change", readFile);   
</script>';

echo ('
<p> *** IMAGE *** <p>
<input id="inp" type="file">
<p id="b64"></p>
<img id="img" height="300" witdh="300">
');

[kev1n]

Can't you place the code in the form's custom code? (without echo)

[Mr71]

so it works, (I see the encoding and image on the html object) but how do I pass the base64 encoding to the database field !?

[kev1n]

Store the base64 field in a nuBuilder text object (e.g. with object id "base_64" that is on the form.)

Like that:

Code: Select all

nuSetValue('base_64', e.target.result);