Intermittent error when uploading to S3 Bucket: Failed to construct ‘URL’: Invalid URL

[rajwinder_b]

1. My Goal

I have a page in where a user uploads a file and fills out some other options (Appendix 1). All the inputs are completed then the submit button gets activated.
When the Submit button is clicked on my page, the file should upload to S3 without any issues where it is accessed and used.

2. Issue:

When clicking the Submit button this triggers the upload to S3. In some cases this works immediately without any issues, in other cases when I click submit I get the error UploadFileToBucket Error: “Failed to construct ‘URL’: Invalid URL. However, when I get this error if the user spam clicks the submit it will work!!

Looking closer at the error (Appendix 2) it stays that there are undefined values but when you check them they are populated and when they are logged out they are also populated.

For more context,

• The configuration for the uploading the file to bucket (Appendix 3).
• The submit button configuration (Appendix 4)

Another note: when in the editor the upload works significantly better, almost always working. The issue is worse when previewing or live.

3. Steps I've taken to troubleshoot:

From looking at the S3 buckets in AWS, I could see that when we get the ‘Failed to construct URL’ the input file (that we upload) doesn’t get added to the bucket. So the issue is definitely occurring when the file is being uploaded.

To upload the file to the S3 Bucket we use the Retool Query where the Resource is an S3 Bucket. This has 3 values that we populate called:

• S3 Content-Type
• Upload File name
• Upload data

When we click the ‘Submit’ button we call the trigger function of the UploadFileToBucket

Fix attempt 1: I wanted to ensure that the values we use for these are defined before the trigger is called. So, instead of using the UploadFileToBucket trigger being called directly by the submit button. I wrote a function that was called by the ‘Submit’ button which checked the values are defined before hand then calling the trigger. Unfortunately, this didn’t work and was still intermittently failing.

Fix attempt 2: Used the inbuilt click handler ‘Only run when’ with the same logic I used in the function:

{{ !!fileDropzone1.files[0].type && !!setInputname.data && !!fileDropzone1.value['0'] }}

Similarly, this didn’t work.

4. Additional info: (Cloud or Self-hosted, Screenshots)

Appendix 1 - The page with the issue

Appendix 2 - Error

Appendix 3 - UploadFileToBucket config

Appendix 4 - Submit button config

[Ross_Coombes]

I've just hit this same issue, any luck on resolving it?

[Ross_Coombes]

We've now figured out what the issue was for us, sounds different to the poster but apparently you can also get this URL error if the user does not have permission on the resource.

[Darren]

Thanks for sharing that update, @Ross_Coombes!

[rajwinder_b]

Unfortunately, no luck solving it yet but I will look at your fix and see if I take anything from it.

[rajwinder_b]

Do you have any suggestions for the issue?

[Darren]

Everything you've shared about the query and construction of your app looks correct, @rajwinder_b, so I certainly don't have a quick fix in mind. The fact that this happens inconsistently - and can even then be bypassed by spam clicking - makes it particularly difficult to diagnose.

I'd be interested in seeing the configuration of the resource itself, just to better understand how it's set up, and taking a look at the network requests just to confirm that certain parameters are being passed in as undefined.

One small tweak that might make a difference is triggering the UploadFileToBucket query with additionalScope - more info here - instead of directly referencing the page elements. If the timing works for you, it might be useful to have you join Office Hours tomorrow!

[rajwinder_b]

Thank you, I will have a look at the additional scope info you sent. If that doesn't help I will join an office hours session!