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