Templates Plugins Courses

☁️ AWS File Uploader - New Plugin from Zeroqode


#1

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 https://zeroqode.com/plugin/aws-file-uploader-1533465056312x784389392881156100

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, on https://docs.zeroqode.com/plugins/aws-file-uploader , 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

zeroqode-for-web-160x120

Bubble Templates

Bubble Plugins

Bubble Courses

Convert Web to iOS & Android

No-Code Development Services


#2

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


#3

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


#4

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:

  1. 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)?

  2. Is there an easy way to link the uploaded track with the user that has uploaded it?

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


#5

Hey Greg,
thanks for the questions:

  1. yes, this is possible, see the screenshot with the plugin settings
    image
  2. 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)
  3. 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

#6

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


#7

we’d need an access to the app - please add [email protected] as a collaborator and point us to the right page please


#8

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


#9

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


#10

Thanks - its called hypno-stream


#11

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


#12

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/*"
    }
]

}


#13

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/*"
    }]
}

#14

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


#15

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


#16

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


#17

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


#18

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>


#19

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