☁️ AWS File Uploader - New Plugin from Zeroqode

levon · August 20, 2018, 2:57pm

AWS File Uploader - No File Size Limit
AWS File uploader plugin is a powerful tool, that allows you or your users to upload files from Bubble apps directly to your AWS (Amazon Web Services) without any file size limits.

Plugin comes with the multi-file uploader element as well as S3 objects element that returns a list of all the files uploaded to your AWS S3 bucket. The connector also allows you to delete S3 objects from your bucket.

Link to the plugin #1 AWS File uploader - Any size Plugin for Bubble | Plugin for Bubble by Zeroqode

uploader_new

Each uploaded file has its own visual progress bar, so you or your users can see the upload progress. Plugin will also return a state with file URL(s), file size, last modified date, file name.

Workflow contains three events “files uploaded”, “error occurred” and “bucket objects loaded”, and two actions “get all objects from S3” and “Reset File Uploader”, that will clear all files pending upload.

Using this plugin can’t be any simpler, but setting up the AWS server will require some efforts.

For that reason we have created our guide: https://docs.zeroqode.com/plugins/aws-file-uploader-plugin , that will walk you through the successful configuration of your AWS S3 bucket.

Then you should simply place plugin’s file uploader element anywhere on your page and start using.

In order to get the list of S3 files or delete file you need to place plugin’s S3 object element on the page (it can be hidden) and then the workflow actions will become available

If you have questions about this plugin or need any help, please reach out through Zeroqode Forum at https://forum.zeroqode.com

Levon Terteryan

Founder @ Zeroqode

Bubble Templates

Bubble Plugins

Bubble Courses

Convert Web to iOS & Android

No-Code Development Services

cheskiefisch · September 4, 2018, 5:33pm

Why is this different from the uploadcare uploader? im considering either of those.

levon · September 4, 2018, 7:17pm

this plugin allows you to use your own AWS account with S3 storage which supposed to be cheaper than uploadcare.

greg_mosley · September 18, 2018, 8:06pm

Hi Levon,

I’m just trying to understand more about this plugin, as looks to be a really good (cheaper!) option compared to the uploadcare version:

can you limit the uploader to just one type of file i.e .mp3? So if they try to upload anything else it will basically reject it (or if its already been uploaded can set it to run a workflow to delete this)?
Is there an easy way to link the uploaded track with the user that has uploaded it?
In terms of retrieving the file, how does this work? to give some context I am asking users to upload a song into their “account”. Their songs will then be displayed in a repeating group in their “dashboard”, with an ability for them to play the song. This means the song will need to be quickly accessible - is this possible? Currently using the standard bubble file uploader I can limit non-mp3 uploads, and the track url is just stored in the database next to the user so is easily accessible.

Thank you in advance!

Greg

levon · September 19, 2018, 6:33am

Hey Greg,
thanks for the questions:

yes, this is possible, see the screenshot with the plugin settings
yes, this is very easy and can be done with one workflow (let’s say save the plugin’s URL to current user’s field)
using the saved URLs for the user in the Bubble database you can show them in a repeating group and use audio player plugin to play it, when the user clicks on it. The file won’t be pre-loaded so the audio player plugin will probably just stream it
Hope this helps

greg_mosley · September 22, 2018, 6:57am

Hi Levon,

Thanks - I’ve managed to get it all set up and configured but am now having trouble with the streaming part.

I’m setting the audio player to using the url that is being saved when the user has uploaded a file, but its not retrieving anything (player just stops straight away).

URL that was saved from the file uploader against the current user (and set as the input to the audio player):

And the repeating group is just displaying all tracks by current user.

It worked previously using bubble’s built in file uploader/URL combo - but now the audio player isn’t working.

Do you have any ideas what could be causing this?

Thanks,
Greg

levon · September 22, 2018, 6:59am

we’d need an access to the app - please add maxim@bubblewits.com as a collaborator and point us to the right page please

greg_mosley · September 22, 2018, 7:08am

I’ve just added as a collaborator. The above screenshot was from the “-dash” page

levon · September 22, 2018, 7:09am

we’ll check it out although can’t promise it will be over the weekend.
What’s the app name?

greg_mosley · September 22, 2018, 7:10am

Thanks - its called hypno-stream

levon · September 24, 2018, 3:10pm

seems like something is wrong with the bucket policy, can you copy/paste it here so we could adjust it?

greg_mosley · September 24, 2018, 8:36pm

Sure, here it is:

{
"Version": "2012-10-17",
"Id": "http referer policy example",
"Statement": [
    {
        "Sid": "",
        "Effect": "Allow",
        "Principal": {
            "AWS": "arn:aws:iam::825736442345:role/Cognito_HypnostreamUnauth_Role"
        },
        "Action": "s3:*",
        "Resource": "arn:aws:s3:::hypnostreamuk/*"
    }
]

}

levon · September 25, 2018, 9:24am

Here is the corrected one, please update and retry

{
    "Version": "2012-10-17",
    "Id": "http referer policy example",
    "Statement": [{
        "Sid": "",
        "Effect": "Allow",
        "Principal": {
            "AWS": "arn:aws:iam::825736442345:role/Cognito_HypnostreamUnauth_Role"
        },
        "Action": "s3:*",
        "Resource": "arn:aws:s3:::hypnostreamuk/*"
    }, {
        "Sid": "",
        "Effect": "Allow",
        "Principal": {
            "AWS": "*"
        },
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::hypnostreamuk/*"
    }]
}

greg_mosley · September 25, 2018, 8:17pm

Thank you, its working now.

Who can I speak to about improving the security of the AWS setup? Want to make sure the files are confidential and therefore not publicly available - happy to pay (I’m not sure how much work will be required).

levon · September 26, 2018, 7:30am

Greg, just describe here what you require and we’ll see if it’s possible

greg_mosley · September 26, 2018, 10:13am

Sure.

At the moment it looks like all files are public. I want to be able to make it so only my application can view, edit and delete any files in my bucket.

Thanks

levon · September 26, 2018, 10:42am

we’ll investigate this but can’t promise fast turnaround

levon · September 26, 2018, 3:56pm

meanwhile, if you want to update the permissions so that upload and modifications are allowed only from your app you can use this CORS configuration (change the allowed origin to the URL of your app starting with https)

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://zeroqode-demo-02.bubbleapps.io</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>https://zeroqode-demo-02.bubbleapps.io</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

greg_mosley · September 27, 2018, 8:14pm

Thanks Levon, changed and it still works - thanks so much for your help on this

shaun · September 3, 2019, 9:17pm

Is there any way that this plugin could be used to allow users to connect to their own AWS?