In our previous blog post, we talked about how profitable file-sharing solutions are these days. As such, we tackled the first few steps of how to build a Dropbox clone without having to manually write code at all.
For this write-up, we’re continuing our tutorial on how it is to build a file hosting service with Bubble!
Now that we’re done discussing how to establish your database and workflows, how to create a new folder, and how to send data to other pages, we’re moving forward with how to display dynamic content on particular pages, how to create new files, how to view a saved document, and lastly, how to edit and delete a file.
Let’s continue!
How to display dynamic content
When a user has been led to another folder, you can quickly source this data from your workflow and give a preview of the appropriate content.
Then, you’ll want to establish the page type on the destination page to be the same data type you’ll want to be processed on your workflow. In this context, you’ll establish the “folder property” from the “folder page.”
Once done, we can proceed to supplement dynamic elements we can give a preview of for the appropriate content for every folder.
How to create a new file
In every folder, we’ll have to create a feature that lets users save and upload new documents and files.
As with every other workflow we’ve built beforehand, this next workflow will be patterned after the rest.
As expected, we’ll use a popup element to effortlessly enable this experience.
Here, we’ll want to create and properly name a new file. That said, we’ll supplement a file uploader element and a text input field.
When a user clicks on the “upload button,” we can proceed to build a new workflow. This new workflow’s objective will be to “create a new thing.”
Here, what we’ll want to build is the “file-content.” After, we’ll attach it to the actual file.
Once done, we’ll include an additional workflow step, establishing a new item—it being the file.
When developing the file, we’ll associate the relevant data field to the file-content. Simultaneously, the “current pages folder” will also have to be classified as the files folder.
Once this workflow is complete, we’ll proceed to create our folder page’s final function. The succeeding workflow should be used to preview the file creation popup element.
When a user has successfully uploaded every file, we’ll proceed to add another repeating group element to show every piece of item in the folder.
When supplementing this repeating group, establish the content type as “file” then proceed to “search for all files” and configure the “the current pages folder” to be the current folder.
When we’ve mapped out this repeating group’s data source, proceed to work on your file’s dynamic content elements.
How to view a file
When you’ve created and displayed a file list, develop a workflow that lets users view all of your files as solo pieces.
This feature will come in handy when a user needs to view files they saved in their drive.
Like earlier, we’ll resort to using a popup element to preview this item, enabling our users not to be led to a different folder page.
When developing this popup, the content type will have to be configured as “a file.”
Once done, we can finally supplement dynamic elements that preview every file’s content. In this context, we’ll optimize an image element so we can give a preview of an uploaded file.
While the popup element is being developed, remember to return to your original folder page to initiate a workflow that a user can trigger to successfully give a preview of this particular element.
In this file’s repeating group, build another workflow when a user clicks on the “files” title.
When this popup gives a preview of dynamic content sourced from the database, we’ll have to choose the “display data function.”
What we want to display here is the “current cells file.”
Lastly, we’ll display the actual popup element.
How to edit an upload
One of the many things Dropbox allows users to accomplish is to edit the file titles of the content they upload. Like our earlier workflows, we’ll use another popup element to host this capability.
When working on this popup, configure the content type as “file.”
Here, add a text input element before adding a supplemental content field that shows users the name of the file of the “current popup file.”
Next, we’ll make sure that when a user clicks the “update button,” we’ll have to pattern our current file’s title to the text input field’s current value.
Here, we’ll select “make changes to a thing.”
What we’ll want to update in particular is the “current popups file.” The value of the text field should also be the file name.
And just like that, we’ve built a Dropbox clone! Cloud-based storage solutions are the way to go at a time like this, so if this is something you see yourself investing in, Bubble is the best no-code provider to work with.
Do you have app ideas you’d like to realize? We’re the agency you want to partner with!
(source and screenshots from https://bubble.io/blog/build-dropbox-clone/)
