☁️ AWS File Uploader - New Plugin from Zeroqode

[Julia]

Hi, there!

Let’s go in order

@tjc4

The issue has to do with spaces in file names:

• Plugin - sometimes converts them to + and sometimes converts them to %20
• AWS - always converts them to +

This is a problem for me because I have some AWS Lambda functions that write to the Bubble DB and expect the names to match.

Would it be possible to always write S3 URLs with + for spaces like AWS?

Our plugin uses for URL encoding and URL decoding standard functions. There the spaces (" ") are encoded as %20. This is done in consistence with the specifications, and the plugin is built so, that to work according to the specifications. Unfortunately, AWS uses ‘+’ for space encoding which not the standard way and was obviously due to some legacy problems.

Please have a look at this old AWS forum thread: https://forums.aws.amazon.com/thread.jspa?threadID=55746 where you can find some more information about this. So, I’m afraid we cannot change this option for this plugin. Apologies for the inconvenience.

@tjc4

Here’s a screenshot showing that the Upload File Type input was properly reset by the reset inputs action but that the uploader was not.

We have investigated this case and found out that the Bubble reset popup function will not reset all our plugin functionality. To be able to reset the plugin uploader there is a plugin element ‘Reset input’ action, which can be used in this case. The important thing here is to use the ‘Reset input’ action AFTER the popup has been shown. Here is a screenshot as a reference.

@max

found another issue: if the fileuploader is set to “allow image processing = yes”, images in portrait mode uploaded from iOS devices are turned by 180 degrees. This doesn’t happen for landscape images or when image processing is turned off. However, to save hosting space, it would be great to be able to use this functionality properly.

To be able to check this, could you please share screenshots with plugin settings, iOS and browser version that was used. Thanks

Looking forward to hearing from you!

Best, Julia.

[tjc4]

@Julia

@Julia

Our plugin uses for URL encoding and URL decoding standard functions. There the spaces (" ") are encoded as %20. This is done in consistence with the specifications, and the plugin is built so, that to work according to the specifications. Unfortunately, AWS uses ‘+’ for space encoding which not the standard way and was obviously due to some legacy problems.

A few comments on this:

1. The Zeroquode plugin doesn’t encode spaces as %20 as your reply implies. It sometimes encodes spaces as %20 and sometime encodes spaces as +. In fact, it’s more common for the plugin to encode spaces as +. My original post’s screenshot shows this. More examples in screenshot below.
2. Just because a product adheres to specifications - and per my first bulleted point I’m not sure that it does - does not mean the specs make sense. If you’re creating a plugin specifically for S3, the specs should state that the plugin is to write a URL that matches the actual S3 URL.

As such, I ask that you please reconsider your stance on this issue. Zeroquode already writes most S3 URLs with + for space so it can be done. And since this plugin was specifically designed to work with S3, writing URLs in the same format as S3 is the only solution that makes sense

These are all file names written by the plugin with + for space. %20 for space is the exception.

@Julia

We have investigated this case and found out that the Bubble reset popup function will not reset all our plugin functionality. To be able to reset the plugin uploader there is a plugin element ‘Reset input’ action, which can be used in this case. The important thing here is to use the ‘Reset input’ action AFTER the popup has been shown. Here is a screenshot as a reference.

I haven’t been able to get this to work. Can you provide more detail? Specifically on “Step 3 - Reset input Fileuploader B”?

Here are my reset options:

Option 1: it’s obviously not password related.

Option 2: Reset relevant inputs resets inputs used in a workflow. I already do this everytime the S3 Plugin is used to create an upload. See screenshot:

Option 3: I already had a “Reset a group/popup” before “show popup” targeting the entire popup (see Step 1). I added a second after “show popup” (see Step 5) targeting the S3 input’s parent group. That did not work.

From your screenshot and description, it seem you’ve targeted the input directly but I don’t know how to reset something that isn’t a group/popup. In other words, I cannot select the S3 uploader element directly.

You suggest there is a plugin element ‘Reset input’ action but I cannot find it (note: I’m working with version 1.57.0 which appears to be the latest version).

The only plugin action I can find is the one shown below which does not reset the inputs.

Can you please clarify? Thank you!

[Dumitru]

@tjc4

A few comments on this:

1. The Zeroquode plugin doesn’t encode spaces as %20 as your reply implies. It sometimes encodes spaces as %20 and sometime encodes spaces as +. In fact, it’s more common for the plugin to encode spaces as +. My original post’s screenshot shows this. More examples in screenshot below.
2. Just because a product adheres to specifications - and per my first bulleted point I’m not sure that it does - does not mean the specs make sense. If you’re creating a plugin specifically for S3, the specs should state that the plugin is to write a URL that matches the actual S3 URL.

As such, I ask that you please reconsider your stance on this issue. Zeroquode already writes most S3 URLs with + for space so it can be done. And since this plugin was specifically designed to work with S3, writing URLs in the same format as S3 is the only solution that makes sense

Hello @tjc4

Let me provide insight on the matter.

Thank you for your feedback here, and providing details on the “issue” it appears that it may seem that encoding some “urls” with a plus sign is indeed on your side, however the plugin itself is designed to work with web standards when URL encoding replaces unsafe ASCII characters with a “%” followed by two hexadecimal digits.

I understand that plugin works with AWS and it is designed to upload to that file storage, however we created with a more universal approach of url encoding.

Looking at your urls, we could not replicate this type of behavior on our side I’m afraid, and also in our logic there is no option to offer “+” sign for unsafe characters.

Thanks for your understanding.

Kind Regards,
Dumitru

[Julia]

Hi, @tjc4!

@tjc4

I haven’t been able to get this to work. Can you provide more detail? Specifically on “Step 3 - Reset input Fileuploader B”?

Here are my reset options:

I have checked your app and found this option. Please make sure you are checking the same page which contains the FileUploader element because if the page contains only FileuploadeGUI element this action won’t be able.

Here are the settings of the step-3

Best, Julia.

[tjc4]

@Dumitru, unsure why you couldn’t replicate. I get the + much more often than I get the %20.

Video proof:

[tjc4]

@Julia, yes, I found that option after I replied. It appeared when I added a GUI element.

I currently use the NoGUI element because (1) I don’t need or want GUI, (2) the GUI element does not work for me, (3) I tried getting my GUI element issues resolved (see post below) but didn’t feel like I got much help and gave up.

Here’s my previous post where I raised the GUI not working issue.

Here are my S3 bucket’s permissions:

It seems I need to use the GUI element so please tell me how to make it work. Thanks!

[Julia]

Hi, @tjc4!

@tjc4

@julia.minacova, yes, I found that option after I replied. It appeared when I added a GUI element.

I currently use the NoGUI element because (1) I don’t need or want GUI, (2) the GUI element does not work for me, (3) I tried getting my GUI element issues resolved (see post below) but didn’t feel like I got much help and gave up.

Here’s my previous post where I raised the GUI not working issue.

I see. I am so sorry that you have faced problems with this. Let me familiarize with another thread and issue described in it and check this carefully. I’ll do my best to help you!

@tjc4

@Dumitru, unsure why you couldn’t replicate. I get the + much more often than I get the %20.

Video proof:

Let me jump in here. So, it is a very weird situation. We have tested the Uploader inside your app as well and uploaded a couple of files (via Chrome/Windows and Safari/iOS) and all the files have %20 instead of +. Here is a screenshot of the result that can be seen in your app.

Looking forward to hearing from you!
Best, Julia.

[tjc4]

@Julia, please do let me know how to get the GUI uploader working.

On encoding, your upload tests prove nothing. As mentioned in my video, I’ve only found two files that encode as %20.

I shared links to those two videos in one of my previous posts as examples of mismatches between Bubble URL (%20) and S3 URL (+).

You then took those two files that I have already confirmed produce %20 tested them and said “look, all the files we tested encode as %20.”

I can tell they’re the same two files from the names. You also tested a third file with no spaces in the name (thus no potential for error).

Also, no matter how you or Dumitru spin it, mismatching URLs between Bubble and S3 is a bug, not a feature. You can do lots of cool stuff in AWS beyond S3. But if you can’t send data back from AWS to Bubble because “do a search for” in Bubble doesn’t return any results because the URLs don’t match then you can’t really do any of the other cool stuff AWS can do.

[Julia]

@tjc4,

@tjc4

@julia.minacova, please do let me know how to get the GUI uploader working.

Yes, sure, we are working on this matter. As soon as I have the relevant info, I’ll get in touch.

@tjc4

You then took those two files that I have already confirmed produce %20 tested them and said “look, all the files we tested encode as %20.”

@tjc4

I can tell they’re the same two files from the names. You also tested a third file with no spaces in the name (thus no potential for error).

Considering the testing process, we really tried to reproduce your issue to get the source of the problem in order to fix it. A file without spaces was uploaded by mistake. Since we had a read-only mode, we couldn’t delete, so you found it.

So, finally, we reproduced the issue. The “+” in the filename is appearing whenever the video file is recorded on a mobile phone. Those videos that are made on a laptop, encoding with %20. Now we are investigating this in order to find a solution. I do let you know when I receive the info from the dev team. Thanks for understanding and patience

Best, Julia.

[tjc4]

@Julia, thanks for the quick reply. Look forward to getting things working.

@Julia

So, finally, we reproduced the issue. The “+” in the filename is appearing whenever the video file is recorded on a mobile phone. Those videos that are made on a laptop, encoding with %20. Now we are investigating this in order to find a solution. I do let you know when I receive the info from the dev team. Thanks for understanding and patience

I’m not sure the pattern is as you describe. I made a this video on my Win 10 laptop. It is saved with + in the name so I suspect the issue isn’t as simple as laptop = %20 and mobile = +

[Julia]

@tjc4, we are working on this. So, we need to solve two issues. First one is - to find out why the GUI is not working for you. And the second - to fix that all the files with spaces will be saved as correctly in any case. Please bear with us while we’re checking. Thanks for the patience and understanding

Best, Julia.

[Julia]

Hi, @max!

Hope you are doing well! I’m reaching out to you just to kindly remind that we’re waiting for the details with regards to your issue like screenshots with plugin settings, iOS/browser version that was used in order to investigate this case.

Looking forward to hearing from you!
Best, Julia.

[max]

Thanks for the reminder! Here are the required infos:

iOS Version 14.0 / Safari Version 14.0

Here are the plugin settings:

Hope this helps to find the issue. Thanks!

[Julia]

Hey, @tjc4!

We have fixed ‘space’ encoding in published URLs for NoGUI File Uploader element, so all the files will be saved in the database correctly, instead of “+” there will be %20. Please upgrade the plugin to the latest version, refresh your app and give it a try again.

With regards to GUI element, we are working on this, as soon as I have the relevant info, I’ll get in touch. We are trying to reproduce your issue in order to investigate the cause.

@max, we have fixed image preview rotation problem for some devices. Please upgrade the plugin to the latest version as well and give it another try.

Best, Julia.

[max]

Awesome, I just gave it a try, it works well! Thanks a lot

Any idea which devices might still have issues?

[Julia]

Hey, @max!

So, some rotation problems can still be persistent on the newest ios versions. I’m afraid I cannot provide a list, unfortunately. Anyway, we are glad that you are satisfied We do really strive to improve our products so that you are able to get a better experience.

Best, Julia.

[diego.peter.matheu]

Hi @Julia!

After the last updates on the plugin, I have an issue regarding the background image. I want the uploader to be seen as a pdf icon. Everything was perfect, but since the last update, I cannot see only the background image…see screenshot. Can you please take a look? (I’ve tried everything, even putting the font size to zero…)

[Julia]

Hi, @diego.peter.matheu!

Thanks for reaching out!

Yes, sure! To help you better could you please share AWS uploader element settings screenshots, screenshots of the supposed result (what result do you expect) and the file (image) for testing purposes.

Looking forward to hearing from you!
Best, Julia.

[tjc4]

Been 10 days since I asked about the GUI uploader not working so checking back in… any update on this? Seems I need to use the GUI element since the NoGUI element doesn’t have a reset inputs action. Please let me know. Thanks!

[diego.peter.matheu]

Thanks!! @Julia!
Of course! Here you have the screenshots of the element, the screenshot of how the uploader looks like on live mode and the screenshot of how it should look like (it was like this before the last update you did). I should only show the image (the pdf icon: https://s3.amazonaws.com/appforest_uf/f1591972891600x990855602655862400/logo_pdf-2.png)