Upload to S3 from Bubble UI and Download from S3 through Bubble UI

Need help Plugins
1

Hi, I am new to Bubble.
I have a usecase scenario where user uploads the invoices, they get listed on the UI and these invoices can be downloaded through a download link. The whole front end for upload and download happens within Bubble. However the workflow I am thinking is to have an external AWS storage like S3 where these files could be stored and retrieved any time.

Has anyone implemented this solution or is there any examples that I can checkout in Bubble Market place to replicate.
Any help will be highly appreciated.
Thanks

2

@blueoceans2002 when each file is uploaded on bubble you get a link. If I understood OK you want to have a center external from bubble to have a whole database.

So, to keep it simple you can leave bubble handle the hosting and use the link as storage and retrievable.

Why not have a backend workflow on your bubble app to store the link on a google sheet with file name and link per row. And if you want to be able to save stuff as well, you could set an action that POST the file to bubble when a specific google drive folder has a new upload.

3

@Clasicwebtools thanks for quick response. The reason why I wish to have external repository is

  1. Control over the files to easily access at a later stage. Less dependency of bubble when the customers on platform prefer to leave with their data or migrate.
  2. Cost control on storage with scale (increase in no. of invoices over a period)
  3. I think AWS S3 storage would be more secure. Since it is in our control we can make it even more secure.

All that I want to achieve with bubble is build a front end interface with a lite backend Bubble db to ensure there is no latency in page loading better UX to all users while keeping the app and data secure.

My workflow is

  1. Users will login and upload Eg 100 invoices through bubble. These go into S3 straight with a link stored in bubble DB
  2. There is another screen where the users will have access to the list of invoices uploaded with fields - "uploaded by, date of upload, location of upload, file name, file size and link to file to download.
  3. When download button is clicked, the invoice is downloaded.

Currently I am doing this through a google form to get the file name and file link. However I thought it will be cleaner to build an app with nice personalised front end.

4

Yes people use external storage options all the time because Bubbles storage is too expensive. I use the Wasabi plugin by Zerqode. It comes with its own uploader element and you can retrieve files and show them in a list to download.

The AWS S3 plugin by Zeroqode works but I found it a pain to set up and it didn’t let me store things in subfolders it just put all the files in one large folder

5

@tylerboodman Thank you very much, thats a very helpful information.
Do you any tips or references that you can share that can help me in configuring the plugin?

Also a quick question. As I upload the file does it go into AWS S3 creating a record in the Bubble DB with details with file name, created at etc…?
Thanks

6

For the Wasabi plugin by Zeroqode they have a nice guide on how to configure everything on the Wasabi console. I can go into more detail but my troubles was getting the interface all streamlined to behave like a client would think it behaves. Because you basically make the whole interface for dragging in files and showing them on screen. Like when uploading you have a uploading popup, etc.

With most file storage plugins they aren’t automated so it won’t auto-create records in the database.

The way I have it set up is the file path when the user uploads is “/Invoices/Current page's Invoice's unique ID/”. So it created a subfolder in my Wasabi bucket for each invoice. Then I show a list and it retrieves from the path “/Invoices/Current page's Invoice's unique ID/” so it only pulls up the files related to the current page’s invoice. So really it doesn’t add anything to the database. Not sure if this is how you’re supposed to do it but it works great for me.

The other way you can do it is when a user uploads you would need to add each item’s file URL to a list of texts under the invoice.

I guess when you sign up for a paid Wasabi account they give you a sales rep, so I hit him with tons of security and reliability questions and they seem really good.

1 Like
7

Hi @tylerboodman thats super helpful. Thank you so much!
I am exploring an option from a youtube tutorial Use your own AWS S3 bucket with your Bubble Applications - without plugins or 3rd-party solutions - YouTube

Ill keep you posted on how it goes. Thanks

1 Like