S3 Upload Control - Working on Test Page But Not in My App

I’m using the S3 Upload to AWS. I’ve set it all up in AWS, created a test page, uploaded files and everything works brilliantly.

Happy Days.

So now I’ve put the S3 Upload Control object within my app…

… and it doesn’t work!

The problem seems to be that the variable state is not available… so since state.idle is not there, the Browse button doesn’t appear. So I tried removing the dmx-show on the button, but it seems the s3upload1.select() is also not working.

The S3 Upload Control is not in a modal or form, so I can’t see that state needs any prefix.

Can you suggest what I try to get it working please? I’m currently using Wappler 3.5.5.

Best wishes,
Antony.

Code on test page that works

<div id="s3upload1" is="dmx-s3-upload" url="dmxConnect/api/aws_s3/aws_s3_signup.php" accept="image/*" class="text-center border" site="{}">
		<p>Idle State: {{state.idle}}</p>
		<p dmx-show="!file">Select file</p>
		<p dmx-show="file">{{file.name}}</p>
		<p dmx-hide="state.uploading">
			<button class="btn btn-primary" dmx-on:click.stop="s3upload1.select()" dmx-show="state.idle">Browse</button>
			<button class="btn btn-primary" dmx-on:click.stop="s3upload1.upload()" dmx-show="state.ready">Upload</button>
			<button class="btn btn-danger" dmx-on:click.stop="s3upload1.reset()" dmx-show="state.done">Reset</button>
		</p>
		<p dmx-show="state.uploading">
			Uploading {{uploadProgress.percent}}%
			<button class="btn btn-danger" dmx-on:click.stop="s3upload1.abort()">Abort</button>
		</p>
	</div>

Code in my app that doesn’t work

<div id="s3upload1" is="dmx-s3-upload" url="dmxConnect/api/aws_s3/aws_s3_signup.php" accept="image/*" class="text-center border">
	<p dmx-show="!file">Select file</p>
	<p dmx-show="file">{{file.name}}</p>
	<p dmx-hide="state.uploading">
		<button class="btn btn-primary" dmx-on:click.stop="s3upload1.select()" dmx-show="state.idle">Browse</button>
		<button class="btn btn-primary" dmx-on:click.stop="s3upload1.upload()" dmx-show="state.ready">Upload</button>
		<button class="btn btn-danger" dmx-on:click.stop="s3upload1.reset()" dmx-show="state.done">Reset</button>
	</p>
	<p dmx-show="state.uploading">
		Uploading {{uploadProgress.percent}}%
		<button class="btn btn-danger" dmx-on:click.stop="s3upload1.abort()">Abort</button>
	</p>
</div>