☁️ AWS File Uploader No File Size Limit- New Plugin from Zeroqode

Hi @projectmuse.dev,

It was recently brought to our attention that there is a bug present in version 1.183.0 of the AWS File Uploader plugin. We have reported this to the developers, who will come back with a resolution as soon as possible.

In the meantime, we recommend the following two suggestions to fix this behavior:

  1. You can downgrade the plugin to version 1.182.0 or lower, depending on which version works best for you.
  2. To make these errors disappear and for the plugin to work as expected, the S3Objects element must be present on the page. Since our testing pages contain all functionalities of the plugin, we unfortunately did not observe this issue during testing. If you do not want the S3Objects element to fetch data from your bucket, you can set it to “not visible” in the layout tab of the element settings, but the uploader elements will still work.

We are very sorry for any inconvenience this issue might have caused, but we will inform you as soon as a fix is released :pray:

Thank you so much for reaching out to us, and we appreciate your understanding and cooperation :hugs:

Best regards :sunflower:

Hi everyone,

A quick update regarding the AWS File Uploader plugin, specifically about the behavior where the File Uploaders do not work if an S3Objects element is not on the page. We have released a new version - 1.184.0 - which should resolve this issue.

We would appreciate it if you could update the plugin on your pages and share your feedback with us. We would appreciate some confirmation :blush:

Best regards :hibiscus:

Hi Bubble community :wave:

Hope all of you are doing well!

We are excited to share a new update for our AWS File Uploader plugin! Starting from version 1.187.0, the plugin now includes new Beta actions and elements designed to enhance security while maintaining all current functionality! As some of you came to us with issues saying the keys were visible, and after our tries to go around this using temporary keys, we were determined to find a way to resolve this once and for all!

Here is a simple example of the difference in setting them up:

Previous Element Setup:

  1. Add the element to your app.
  2. Add the AWS keys in the plugin settings and the element.
  3. Set up the element per your liking and use case.
  4. Upload and use the file URLs in your application!

New Beta Features Setup:

  1. Add the element to the app.
  2. Set up the “Generation URL” event for the specific element.
  3. In this workflow, add two new actions: “Generate Pre-signed URL” and “Upload file.”
  4. In the “Generate Pre-signed URL” action, show the path of the file, available in a new state called “File Path.”
  5. In the “Upload File” action, set up the result of the “Generate Pre-signed URL.”
  6. Upload and use the file URLs in your application!

Changes made for the Beta Features :

  • Both GUI and NoGUI elements have been updated to support the new flow.
  • The S3Objects element has been removed and replaced with a simple action “Get All Files.”
  • The delete actions are not included in the beta features, as only the “Delete Files/File (backend)” action will achieve the desired security and also work on the backend.
  • All events should work as expected with the Beta Features.Rest assured, the previous functionalities and actions are still available along with the Beta features.

We know the flow has changed drastically for these features, so we updated the documentation with more information on how to set them up - you can check it here. At the moment, we do not have a demo page showcasing the setup, but we are working hard to deliver it to you soon :pray:

Please note that these features are still in Beta, so if you encounter any bugs or issues, we encourage you to report them to us so we can continue improving the plugin!

Thank you for your continued support and trust in Zeroqode plugins. We look forward to hearing your feedback! Feel free to reach out to us with any questions or concerns at support@zeroqode.com :blush:

Best regards,
The Zeroqode Team :sunflower:

1 Like

@ZeroqodeSupport
Does the AWS File Uploader elements S3 Objects and FileUploader (Gui/noGui) only work when placed on pages??? Can they work on reusable elements? Just got the plugin and it’s not doing anything on the reusable elements, but is when placed directly on the page.

Hi @brycebernier,

Sorry for the late reply due to the weekend :pray:

We have sent you an email with more information, so let’s continue our communication over there to avoid any future miscommunication!

Best regards :sunflower:

I entered in my access token and everything else correctly but the files are not being uploaded. Can you please provide me with some guidance on what I need to do differently to have the files upload to the S3 bucket. Thanks.

Hi @cohereandnow,

Thanks so much for reaching out to us!

Could you please ensure that the region, bucket, and the two key fields do not have any spaces before or after them? These fields are case-sensitive, and any extra spaces or characters might cause this issue.

Additionally, please confirm that the bucket and CORS policies are correctly set up for the respective bucket. If you could share more details about what you see when trying to upload a file, it would help us better identify this strange behavior.

Hope to hear back from you soon :pray:

Best regards :sunflower:

Hey, thanks for getting back to me. I double checked and corrected it. Thank you.

I’m wondering if its possible to bypass these options in the image below. This open on mobile when the uploader is pressed.

I’d like it to bypass this and open the phone storage window directly. Users are only able to upload audio files so having the option for camera and photos is misleading and unnecessary.

I’m also wondering how to display names and percentage of uploading progress of the list of files being uploaded in a RG. Below is an example of what I’m looking for as well as an image of me attempting it with your plugin (my attempt doesn’t show any data until after they are uploaded).

What I’m looking to do:

My attempt:

Thanks!

Does this plugin allow multiple files to be uploaded on the backend or just a single file at a time? I tried checking the backend workflows of their demo page but seems like they didn’t have the backend workflows available to view. @redvivi. I’m also trying to get an idea of how the meta data feature works. Am i able to retrieve the audio files durations, artist and cover art and save it in bubble along with the aws URL? Thanks.

Hi @cohereandnow,

We are glad to hear that the plugin is now correctly uploading the files to your bucket. For future reference, would you mind sharing what was wrong with the initial setup? :pray:

Unfortunately, you cannot disable the Photo Library and Live Camera options for upload. However, you can restrict uploads to only audio files. This way, if users attempt to upload other file types, they will not be uploaded to the bucket, and an error message about the accepted file types can be displayed!

Regarding the upload percentage for each file, as shown in the screenshot, the GUI element has a state called “Upload Progress of Current File.” Setting this up for each file isn’t straightforward since it’s not a list of texts for each file. However, you can achieve your desired use case with a more intricate setup.

Just to confirm, is your last message for us or another developer?

Best regards :hibiscus:

I also got this error. Wanted to let you know.

Thank you for your response.

Couldn’t I add a custom button that initiates the the upload process for the AWS plugin and then bypass the 3 options and go straight to file storage? I could do this with an ID attribute on a button and have the button run JS of something like this but with the correct names for the action for the AWS uploader. Would you be open to providing me with that? I know i can restrict certain files but having this bypassed would make the user experience much better. Thank you.

document.getElementById(‘custom-upload-button’).addEventListener(‘click’, function() {
document.querySelector(‘#aws-uploader input[type=“file”]’).click();
});

Hi @cohereandnow,

Could you please provide more details about what actions you are performing and what workflows are being triggered before you encounter this error? I will do my best to get to the bottom of this :pray:

I will also discuss this with the development team and get back to you as soon as possible!

Best regards :sunflower:

Hi @cohereandnow,

We’ve discussed with the developers about launching the file library instantly, and they said that you can set your own ID for the element and use it in your code. To do this, set the ID in the “ID Attribute” field and then modify the ID in the code you provided.

Additionally, the developers have provided some code that might help you out. Please take a look at it below.

document.querySelector('#ElementID > form').addEventListener('click', function() {
    document.querySelector('#aws-uploader input[type="file"]').click();
});

Best regards :hibiscus:

Hi Everyone

The plugin is not working well with .HEIC files
The option to crop the image does not appear for these files and in some cases the format is not recognized either

Here is a video with examples My Page

These files are essential for iPhone users

Thank you so much for taking the time for this. It doesn’t seem to work. Could you confirm if I implemented it correctly or let me know what I need to change. I went ahead an added the code you provided to an html

document.querySelector(‘#awsplugin > form’).addEventListener(‘click’, function() {
document.querySelector(‘#aws-uploader input[type=“file”]’).click();
});

and added the ID attirubute “awsplugin” to the button.

I don’t remember exactly what caused the error. I’ll keep an eye out for it in case it happens again.

Hi everyone :wave:

Please excuse the delay in our messages after the weekend :pray:

@Eliakim,

We tested this on our side and experienced the same behavior. We’ve reported this to the developers and are currently awaiting an update. We will keep you informed as soon as we have more information!

@cohereandnow,

Could you please explain how you set up the feature? Also, could you confirm if, by “button” in your reply, you meant adding the ID to the GUI uploader element? Feel free to use your code if it works without issues :blush:

Best regards :sunflower:

Yes. Here are screen shots of the set up in the html and the GUI uploader element. Which I renamed to FileUploader AWS. Neither my code or your code works.

Hi @cohereandnow,

People often use a “Run JS” action from the Toolbox plugin to execute such code. However, after further discussion with the developers, we believe that achieving your desired outcome might not be feasible with this approach :frowning:

Here’s what the developers have shared:

The code attempts to add a click event to a form element within the #GUIelementID selector. When this element is clicked, it should trigger a click on a file input within another element selected by #aws-uploader. Please ensure that there is an element with the ID #aws-uploader on the page, as our plugin does not have such an ID, nor does the input element.

The provided code will not solve this behavior—it simply triggers a click event. The three file options displayed are part of the system UI, and we do not think it can be bypassed.

Fell free to delve more into this. If you do find a solution, we would greatly appreciate it if you could share it with us :hugs:

Best regards :hibiscus: