With professionals and entrepreneurs more heavily dependent on the web, the creation of files and documents has never been more apparent until today.
On that note, turning to file-sharing spaces has been critical in empowering work-from-home arrangements. For instance, Google Drive and Dropbox have seen a surge in usage since lockdowns have ensued.
Understandably so, entrepreneurs who are looking to explore the technology sector will find a lot of hope and potential in investing in cloud-based storage. Whether this is something you’re looking into or you’re just curious about the core features of Dropbox-like products, we’ll let you in on the process of building a file-sharing app in this article and the next one!
Let’s start!
As with every other app built on Bubble, we’ll begin by turning to the platform’s visual design tool to map out your app’s UI. Since we’re patterning after Dropbox in this scenario, you’ll want to develop two pain pages—the homepage to preview a folder list, and a folder page to preview a list of files contained in that folder.
Establishing your database
Once you’ve established your product’s display, you can start building the appropriate data fields to make your app work. We’ll turn to these fields for linking your product’s workflows.
Thankfully, Bubble’s premade database simplifies the process of creating data types with special fields. To better your product’s speed, split larger items into different data types.
For instance, we’ll build two different data types for every file. One will cover the relevant file details, while the other will conclude more significant data like the file content itself.
When you develop these as separate data types, it lets you load only the relevant data when you need it to, beneficially limiting the content amount Bubble will have to process.
Because we’re trying to clone a no-code version of Dropbox, you can pattern your settings after the following data types and fields:
Data type: Folder
Fields:
- Folder name
Data type: File
Fields:
- Current-folder – Folder. Note: Creating a field based on a separate data type allows you to seamlessly integrate all of its linked data fields.
- File-content – File-content
- File-name
Data type: File-content
Fields:
- Content – FIle (file content type, not the file field)
(source: https://bubble.io/blog/build-dropbox-clone/)
Establishing workflows
When you’ve mapped out your app’s database and design, proceed to link every element to ensure your app works. Bubble optimizes workflows that users can trigger, completing a series of actions and making your product functional.
Establishing a new folder
Because we’re building a cloud storage product, we’ll have to develop a page that lets users create new folders where they can store their content.
That means, we’ll have to supplement both a popup element and a button to display content without leading a user away from the page they’re on.
Here, we’ll include a text input field that lets the user name the folder they want to create.
When the user clicks the create button, they’ll automatically trigger another workflow.
In this workflow, we’ll choose “create a new thing.” For this particular scenario, what we’ll want to create is a new folder.
Once we’ve selected to create a new folder, we’ll have to make sure that our text input element matches our database’s relevant field.
A good sign that the steps you’ve worked on so far are correct is when a new folder is created.
When this workflow is complete, we’ll move forward to establishing a function that lets the popup element appear on the screen.
As expected, we’ll begin by creating a new folder when a user clicks the “create folder” button.
Here, select “show an element” then choose the popup.
When both of these workflows are complete, we’ll have to show these items in the form of a list. This only becomes doable with a repeating group element.
When optimizing a repeating group, link a database data type to an element. For this example, “folder” is what you’ll classify the type as. You must also establish the data source as a list of every “folder” found in your database where the “current user” is “the creator.”
When you’ve configured the data source, you can proceed to map out the dynamic content available for viewing for this grid. You can do so by arranging the first column with the appropriate content you need to present. When this is done, everything else should automatically be populated by your powerful element based on the data you put.
Sending data to other pages
In a repeating group, you can also establish events for every available column. This feature becomes extra handy when developing workflows in your app.
Similar to what you would see in Dropbox, we’ll have to display a complete list of every piece of content you’ve stored on a different page. Do so within every folder.
When leading a user here, we’ll build another workflow that a user can trigger when they click on “file names” on the homepage.
As usual, resort to a navigation event to lead a user to a different page.
From hereon, the “folder page” should be the destination page type.
As with earlier steps, you can supplement more data to this page so Bubble can easily determine which folders to give a preview to. The data you’ll want to show is the “current cell’s folder.”
And just like that, you’re halfway through cloning a robust Dropbox-like product without even turning to code!
Check out the next blog to complete the process.
Are you interested in building an app like this? We’re the agency you want to partner with!
Give us a call, and we’ll help you out!
(source and screenshots from https://bubble.io/blog/build-dropbox-clone/)
