Templates Plugins Courses

AWS Plugin: file uploading

Hi, I just started using the AWS file upload plugin but am wondering 2 things:

  1. When a user uploads a file, I want it to be stored in their personal folder, of which there should be only 1 per user. However, when user uploads another file, it creates a new folder every time. In my Bubble database, I added a field called “personal folder” which is a List of Files. Am I doing something wrong here?

  2. (SOLVED) When a user uploads a file I noticed it automatically uploads to AWS - great! However, I want to run a workflow that adds the file to the Current User’s Photo (field) so that I can display it in their profile. I’m currently unable to do so as there is no workflow running. Does it mean I need to add a button which will then trigger the workflows, or is there a smarter way?

Thanks!

Hi, @micky!

Thanks for reaching out!

Let me check if it is possible to implement the described case with this plugin and I’ll get back asap!

Best, Julia.

Thanks Julia! Another question is: following your documentation our bucket is accessible to public. We have added the bucket policy code in json which I believe makes sure that only people who access the link from our own domain will be able to see the file. Is this enough to make sure that no one except our own users can access these files? And should we continue to keep our bucket accessible to public, or is this a temporary setting?

In the meantime I was able to find the “When FileUploader is finished” function which solves question 2 and 1 partially (no need to add field “personalfolder”).

However, I am still struggling as multiple personal folders are being created in AWS even though it’s the same user uploading files. How can I make sure this goes to 1 personal folder only?

Also when user uploads a file and then replaces that file with a new upload, I see that AWS still stores both uploaded files instead of only the replacement. Is there a workflow I’m missing?

Thanks!

Hi, @micky!

Glad to hear that you have managed to get the point 2 worked :slightly_smiling_face: :+1:

Recently we have updated the plugin and added a possibility to upload files in a certain folder. For instance, you indicate the folder name and all the files will be uploaded in these folders on AWS. If you need to different folders, for example, you may set 2 buttons. The first button will have settings for the Folder1, the second - Folder2. Actually, this means that all the files will be uploaded in a specific folder. Please take a look at docs page where these fields are described: https://docs.zeroqode.com/plugins/aws-file-uploader-plugin#file-uploader-element.

Here you mean the following: the user uploads a file, that file is being uploaded to AWS and then the user clicks to “remove” and the file isn’t been removed? If so, then I have checked on a Live Demo and it works properly. Could you please record your screen in order to see what is going on your side? You can use Loom to record.

You see, a plugin is a tool that, basically, connects AWS to your app. The Access Permissions and Bucket Policy depends on AWS itself. In our case, we have set our bucket accessible to the public in order to test the plugin, but I’m afraid I cannot provide the info with regards how it’ll work with other settings. Here are the links that might be helpful:

  1. https://docs.aws.amazon.com/AmazonS3/latest/dev/example-bucket-policies.html
  2. https://docs.aws.amazon.com/AmazonS3/latest/user-guide/add-cors-configuration.html
  3. https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

Hope all info above will be helpful!
Best, Julia.

Hi Julia, thanks for your response. Actually when I disable Bucket access it doesn’t allow access to anyone anymore including myself. It also doesn’t allow Bubble to show anything anymore. How do your other plugin users use this/protect their bucket if the requirement for the plugin to work seems to be that the bucket must have public access?

As for the file uploading and removing, I have retried this and both files still remain the folder despite user clicking “remove.”

Hi, @micky!

You see the plugin works even when the Public access is blocked, meaning you are able to upload files, remove them etc, but they cannot be displayed through the link and it is obvious because the Public access is restricted. Once you enable the Public Access the link shows the image. Generally speaking, all the restrictions and how they work should be checked in AWS documentation. Hope this link will be helpful: https://docs.aws.amazon.com/AmazonS3/latest/user-guide/block-public-access.html

As for remove action, I have checked and it works regardless the Public access, the only thing is whenever you delete the file, refresh the AWS page where your files are to see the result.

Hope this helps!
Best, Julia.

Hi Julia! Thanks a lot for your response. Strangely, uploading is not working anymore i.e. if I upload a file through Bubble it doesn’t go into my s3 bucket. I have reached out to AWS to assist but they say I should ask you as the plugin creator. Another question I have to you is what I should use in my bucket policy for “version”? I used the version from the S3 example which according to AWS is correct, but since doing that my plugin isn’t working anymore. Can you assist? Thank you!

Hey, @micky!

Unfortunately, this issue is not reproducing on our side, meaning on the Live Demo you are able to upload and get files from the S3. In this case, please check the current plugin settings in your app if everything is set up properly according to the documentation and give it another try.

Do you receive any error message while using the plugin after the version modifications? Just in case, please pay attention to the docs page where we showed an example and make double-check settings: https://docs.zeroqode.com/plugins/aws-file-uploader-plugin#3-iam-security-roles .

Also, follow these links that might be helpful as well: https://docs.aws.amazon.com/IAM/latest/UserGuide/access_policies_manage-attach-detach.html and https://aws.amazon.com/iam/faqs/ .

Best, Julia.

Hi Julia,

I’m running into 2 errors.

  1. the FileUploader element is working but whenever I hover over it, it gives an xml error, for any image that I upload. How can I solve this?
  2. Whenever an image is uploaded via this plugin, my Bubble workflow is triggered so that the image S3 URL is added to one of the fields of a User. That field is type text to allow for the URL. However, I am unable to display the image. I use the Image element on Bubble (see screenshot) but it will not display anything.I tried this previously and it did work using the same logic (field type text and the formula was the same as well). Is there something I’m missing?

"Screenshot 2021-02-19 at 17.59.14 "

![Screenshot 2021-02-19 at 15.47.20|209x179](upload://tjl5JPxIIUeqvQvRuKphcP7kam2.png) ![Screenshot 2021-02-19 at 15.47.17|212x216](upload://3y6EoTcDGWssJH9HTPjzEP7OEGz.png)

Actually I checked S3 and these files are not uploading to S3

Hi, @micky!

Unfortunately, this issue is not reproducing on our side. Could please record your screen while doing this in order to understand better what is going wrong? Loom is the best tool for that.

And here could you please to show the workflow and the result you get. And also what is saved into the database, meaning in the field which is used for “Image”

Looking forward to hearing from you!
Best, Julia.

Hi Julia, apologies for the late response and thank you for your help! After much trial and error I was able to fix the above issues.

However, a previously mentioned issue unfortunately still persists, which is that S3 is not deleted any uploaded files. For example, users can upload their profile pic on Bubble to S3. But everytime they replace their profile picture, S3 still stores the old one (see screenshot).

The other issue is that the folder structure works only sometimes, strangely enough. The profile picture of the user shows up less than half of the time. I’m unable to reproduce the issue.

I have set it up so that each time a user uploads a profile picture, it goes into S3 into a folder with their First and Last Name (here I have just updated to only First Name). This works half the time. My S3 bucket is now showing a number of folders with first & last name, but also a bunch of photos stored under folder called “unknown”

Strangely enough, users whose profile pictures have not gone into their personally named folder but has gone into the “unknown” folder, are the ones who are able to see their profile picture in Bubble. Those with their own folders cannot.

Screenshot 2021-03-03 at 17.18.43

Hi @Julia would you please be able to look into this?

Another question I have is that all of our photos are being resized to very poor quality. Every time I upload a high quality photo it resizes to very poor quality.

Examples:


Is there a way to keep its original file size or at least make it not so blurry?

Thanks!

Hi, @micky!

Please accept my sincere apologies for the slow reply! Allow me to carefully review all the questions and concerns above and I will get back to you as soon as possible.

Best, Julia

Hi, @micky!

In order to understand better what is going on on your side, could you please add our [email protected] account to your collaborator’s list? Also, please tell us your app name and page name (steps which we can reproduce like where we need to click or where we can find the right group etc) where this problem occurs on the test.

Note: avoid the warning message regarding the plan, as we are an agency and you can easily add us to your collaborators.

It is hard to give an answer in this case, because we don’t know the plugin settings and what logic is used. Therefore the access to your app will help us hope so, to understand better your case.

Please check the plugin’s settings which can resize the uploaded images:

Best, Julia.

Hi @Julia apologies for the delayed response, somehow I miss notifications here. Returning because the plugin keeps giving issues. I just tried uploading a small jpeg image and it gives me a long error. I got multiple reports from users (over 45 users reported this bug) saying they cannot upload a profile picture.

This is the first part of the error it gives:

<?xml version="1.0" encoding="UTF-8"?> SignatureDoesNotMatchThe request signature we calculated does not match the signature you provided. Check your key and signing method.

@Julia I did a Loom recording: https://www.loom.com/share/898853f52eec45a9b94fb55e258fb2b5

Unfortunately our current paid plan doesn’t allow collaborators (we would need to upgrade for that)