JavaScript not loading on include page

Wappler General How To
#1

Hello, I have the following script that automatically loads each time a file is uploaded to the file input:

    <script>
									// Be aware! We are handling only the first <input type="file" /> element
						// To avoid errors, it should be placed before this piece of code
						var input = document.querySelector('input[type=file]');

						// You will receive the Base64 value every time a user selects a file from his device
						// As an example I selected a one-pixel red dot GIF file from my computer
						input.onchange = function () {
						var file = input.files[0],
							reader = new FileReader();

						reader.onloadend = function () {
							// Since it contains the Data URI, we should remove the prefix and keep only Base64 string
							var b64 = reader.result.replace(/^data:.+;base64,/, '');
							console.log(b64); //-> "R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs="
							dmx.global.set('b64', b64);
						};

						reader.readAsDataURL(file);

						
						};
								</script>

It works fine on the parent page, but when loaded from the include page, it doesn’t work at all. It’s like something in the include file is interfering with the script.

Here is the page loaded form the include file in the head page:

image
image2456×746 35.3 KB

Here when loaded form the head page directly (the code is on the head page):

image
image2456×746 58.7 KB

As you can see, the b64 value gets inserted on the input automatically when the file is uploaded

#2

You need to call the js script function while loading the sub-page.
(I think you are using SPA.)

#3

How can I call it using wappler?

#4

for example ;

function alertTest() {
  alert('Hello World');
}

use on success , on done, onclick etc.

success:"alertTest()"

1 Like
#5 
dmx.Formatters('string', {
    encodeBase64: btoa,
    decodeBase64: atob
});

Usage:
{{ 'Hello world'.encodeBase64() }} becomes SGVsbG8gd29ybGQ=
{{ 'SGVsbG8gd29ybGQ='.decodeBase64() }} becomes Hello world

script block is below the dmxAppConnect.js include it should work

#6

Thanks!

1 Like