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

Wappler General Need Help
1

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! :frowning:

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>
2

Maybe you have some JS errors on the page? Did you check the console in the browser devtools?

3

Good question @George… I often forget to look in the console!

I’ve got no errors, but I do have an unknown s3-upload component warning:

unknown
unknown740×315 50.2 KB

4

Well have you added the s3 component on the actual app page?
You can’t just copy bits of code from one page to another without the actual components files not being added on the page.

5

@Teodor, please don't make assumptions about what I have done and criticise my actions without asking me first... that leaves me feeling rather irritated!

I didn't copy the code, I added the S3 Upload Control from the menu system.

However I added it to an include file rather than the main index.php, and I can see now that Wappler didn't add the script line which I have now found in the test file:

<script src="dmxAppConnect/dmxS3Upload/dmxS3Upload.js" defer=""></script>

I've added that code to my index.php and all is working fine.

Thanks for your help folks! :slight_smile:

6

What server model are you using?
What kind of content page was it added on exactly?

7

The server model is PHP and it was added on an include page. The code Wappler added on the page is below… so the include header makes some reference to the s3upload, but the actual script line never appeared anywhere.

<!-- Wappler include head-page="index.php" appConnect="local" is="dmx-app" bootstrap4="sandstone" fontawesome_5="local" jquery_34="cdn" moment_2="cdn" components="{dmxS3Upload:{}}" -->
<section id="s_window_finances" class="section_window container-fluid mh_200" dmx-show="window.value=='app_finances'">

	<div class="row row_window " id="r_window_finances">
		<div class="col col_content_left" id="c_finances_left">
			<section id="s_finances_invoices_left" dmx-show="window_finances_left.value=='invoices'">
				<p class="text-center p-5">Invoices Left</p>
			</section>
			<section id="s_finances_payments_left" dmx-show="window_finances_left.value=='payments'">
				<p class="text-center p-5">Payments Left</p>
				<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>
			</section>
8

If your main page (index.php) was open in Wappler, you probably did not save it - as when it’s open when you add stuff in the content page it adds the scripts there but you need to save it as well.

9

Yes, I would have assumed that… but I have double checked and Wappler didn’t add it, I have had to add it myself.

Is there some way when components are added that rely on a js file then we can be warned in some way if they are being added to an include file?

10

Actually, I may be wrong in my last statement… I can’t be sure if it added it or not since I can see that Wappler will delete a double add… so it may have been there when I manually added it, and as you say, it may be that I just didn’t save the index.php file.