FLOPPY: Plugin for localStorage, sessionStorage, IndexedDB storage, List Creation/Manipulation, Iteration, and More! Now with even more video docs!

Or how to make Floppy read from Custom State?

Hey @fabian.banushi, so your uploader has a state on it that holds the list of files. This is just like any other exposed state (output state on a plugin, custom state, data of a group or page, etc.).

To populate Floppy’s RAM List you execute the Set… or Add actions for Floppy’s RAM List.

up-04

This is how I have set it up

Edit:
I cannot use … value is changed because its not Bubble native plugin.
So I have used a Custom State to see if any values are in the condition must execute.
The custom state works by it self

Edit:
The Floppy is not reading the value I suppose. Maybe it only reads Data Thing

This event will never trigger:
image

Floppy’s Initialized event basically only happens when it becomes visible on the page. Your user hasn’t even seen the page and couldn’t possibly have uploaded any files. Surely on your file uploader element there is an Event that is triggered when the file uploader is done. That’s when you can add those values to Floppy’s RAM List.

Alright… I did it. But I cant access the features of multiupload plugin which is a progress bar…

This is the plugin:

Which means it doesn’t refresh when I delete it and the progress bar doesn’t work.

Basically does the Floppy access the other plugin features?

@fabian.banushi, that plugin triggers an event “a new file uploaded” once a file has been uploaded. In that case, when that event fires, you can either use Add RAM List Value(s) to add multiuploader's last uploaded file to add the file to the RAM List, or just Set RAM List to multiuploader's all uploaded files (those are states published by that plugin).

Yeah that’s what I did and it works… the files are displaying

The problem is that I can’t access the Multiuploader features…
If I delete a file it won’t disappear in the Repeating Group. And if I add a new one it will not show on the Repeating Group. And the progress bar as you can see is stuck (which it never does when I use Multiupload as Data Source in the Repeating Group.

Do you have any idea how to access those features?

Thanks
Fabian

That plugin only has two actions:

So, I don’t really know what you mean by “delete a file” with respect to that plugin. But, in any case, Floppy’s RAM List Only updates when you tell it to. So, let’s say that clicking an (X) icon on the file displayed in the repeating group is supposed to delete that file: Just execute a workflow that (1) removes that item from Floppy’s RAM List (using the Remove… RAM List action and then (2) deletes that file.

If you want to implement the “cancel” function of that plugin, you’d do the same thing, basically: When (X) is clicked (1) cancel that file upload (2) remove that file from Floppy’s RAM List.

This is pretty basic Bubble stuff so I don’t quite understand the source of your confusion?

I just want to update the Repeating Group
When I delete a thing, the Repeating Group should be updated.
When I add a thing, Repeating Group should be updated.

And if it’s possible… The progress bar (when the files are still uploading) is to be updated in real-time.

I’m trying to remove a value from Floppy’s RAM. It doesn’t work… I’m I doing something wrong?

Remove the item at Current Cell’s index using “remove by index”.

I removed the plugin from the workflow…
I wasted a lot of time trying to put it to work.

Thanks anyway
Fabian

Small typo: it should be “yes” (not “yet”).

CleanShot 2023-03-31 at 07.28.50@2x

1 Like

Thanks, @rico.trevisan! I’m sure you’re the first person (perhaps besides @ihsanzainal84) who’s bothered to read it. :slight_smile:

2 Likes

Gotta RTFM.

2 Likes

UPDATE TIME: Just published v 1.9.39 of Floppy, which adds a brand new element plugin, Floppy Date Range Processor.

Floppy Date Range Processor can make lists of date ranges unique and/or sort date ranges (either ascending or descending). Neither of these processes are possible in vanilla Bubble. This plugin was created to solve a problem mentioned in another thread (where literally the poster needed to remove duplicates from a list of date ranges – which doesn’t work, which is somewhat surprising given that lists of date ranges can be :merged with the proper deduplication behavior. This plugin fixes that oversight on Bubble’s part).

You can set it up as a “passive” element plugin – where you send it a list of date ranges in the main inspector interface, and, whenever that input list of date ranges changes, it publishes the deduplicated and/or sorted list of date ranges to the “Processed Date Ranges” output. As with nearly all element plugins, whenever any of its inputs change, it reupdates and reprocesses the date range list. When this happens, the output is updated, an “Initialized/Updated” event is triggered, and a “Date Ranges Processed” event is triggered. (All fields in the main interface are optional, so you don’t have to set anything at all… because…

It can also be used “actively”: It has an Action (“Process Date Ranges”) that takes an input list of date ranges and optionally deduplicates/sorts them and publishes that list to the “Processed Date Ranges” output. After doing so, the “Date Ranges Processed” event is triggered.

Simple, simple, but very powerful if you need this functionality. Part of my ongoing commitment to providing Floppy purchasers an ever-growing list of cool functionality. If you’re familiar with my element plugins you’ll immediately grok how to use this. Fully documented in the plugin interface, as usual.

Demo page here with editor link to inspect:

Interesting Historical Note: Floppy Date Range Processor is likely the first Bubble plugin developed in partnership with a large language model. The basic bones of the code for this plugin were generated after training GPT-4 with my “create Bubble elements plugin” script and simply describing the functionality in natural language. Since GPT-4 can’t know everything about Bubble plugin creation, a significant amount of work went into debugging, testing and adding other features to the base code. But I would like to thank GPT-4 for its clever and efficient implementation of date range sorting, and basic code skeleton, which likely saved me about an hour of drudgery. (I’m sure over time, this tool will help me save more time and be even more efficient in producing new plugins.)

ONE OTHER NOTE: You may have noticed a new “Z” plugin, “Floppy Bulky” in Floppy recently. Do not mess with Floppy Bulky. It is not complete yet and still in development, it is not safe to use in production, and is not actually for use as a normal plugin. I’ll finish it and explain it soon enough…

More later,
Keith

2 Likes

Hi everyone,

I’m relatively new to Bubble.io, and I’m not sure if this is the right place to ask my question, so please forgive me if I’m in the wrong forum. I wanted to ask about the Floppy plugin and whether it can transform my Bubble.io web app into a Progressive Web App (PWA).

In the past, I used a service worker to download the HTML/CSS/JS of our e-commerce website, and the result was a stunningly fast navigation experience with near-instant loading times. I would like to replicate this feature in my Bubble.io web app, and I was wondering if Floppy can help me achieve this.

I would appreciate it if anyone with experience using the Floppy plugin could provide some guidance on whether it can be used to transform a Bubble.io web app into a PWA. Additionally, if anyone has any other suggestions on how to achieve a similar result, I would be grateful for any advice.

Again, I apologize if this is not the right forum for my question or if my lack of knowledge makes my inquiry seem naive. I’m just trying to learn as much as I can and create the best possible experience for my users.

Thank you for your time and help!

Hi @tacius: There are certainly components of Floppy that could be helpful in creating a PWA with Bubble (e.g., basic access to browser storage). I’m sure that people have created certain types of PWAs, but I am not one of them and this is an area I haven’t really explored to any depth in Bubble. So I’m not an expert on that.

One challenge in Bubble is that we don’t have access to arbitrary objects in the page – the only object datatypes we have in Bubble are Things (custom datatypes that define objects in our database) and these can only be created or modified via interaction with the database. And plugins cannot directly create or modify them and there is no “client-side” representation of Things. There are various complicated workarounds for this (such as abusing the API Connector) but I’ve not found a way to easily automate such approaches.

Anyway, a long-term goal for Floppy is to support/enable a Bubble-database-compatible front end so that you could store objects in browser storage (IndexedDB specifically) and operate in a completely offline scenario and then sync data back to Bubble when online.

Unfortunately, current (and basic/core) limitations of Bubble make it impossible to realize this vision today. (There are ways you can do this for a specific app, but in Bubble plugin land, what I’m focused on is delivering products that are of use to Bubble developers generally and they must work in a generic context, not just in one particular case. And, when the interface gets too complex, or requires too much setup or too much manual labor on the Bubble developers part, that’s just not a great plugin.)

I’ve done a lot of work on these issues and while I can see how I might accomplish it, it’s not worth working on further until there is some sort of solution to “the Thing problem”. Whether Bubble will ever address that at all is unknown.

Again, I haven’t created a PWA with Bubble, but I know others have and it would be worth posting in the Need Help section asking for pointers to any resources for creating PWAs in Bubble. It’s possible someone has a great guide or thread about this, but I don’t know of one off the top of my head! It’s totally worth creating a new thread in Need Help with your question.

I assume there must also be existing Floppy users who are using Floppy as part of their own PWAs (or at least PWA-like apps) and maybe some will chime in here! (I’m interested to hear about that, too.) I know that @equibodyapp has some experience with at least attempting to create PWA-style apps with Bubble and is a Floppy user, but I’m not sure how helpful my plugin has been to her because of the limitations I mention above!

As for Floppy specifically, there are some cool new plugins coming to it that solve some related challenges, but are not about browser storage specifically. (I’m basically saying that I am regularly introducing new stuff in the collection of plugins that is Floppy and you probably won’t be disappointed by spending $12 to add to some particular app.)

2 Likes

Hi @keith !

Bought the plugin and have been able to save to the local browser fine, but having issues with Floppy updating across pages… I’ll try to explain (maybe I’m doing it wrong).

I’m building an e-commerce page where users can favorite items and of course, buy them. I’m using reusable elements to display a list of items marked as favorites and another for items added to the cart. As items are favored or added to the cart, I’m saving them to the local browser. That is working fine.

But, as items are added (and appearing in the console) the lists aren’t updating, so I’m assuming that the Auto-Read function only works on load. In order for the repeating group lists to update within the reusable elements, the page needs to refresh. I dropped a Floppy element on each page and reusable element in order to read and write to the browser. Is there a way to keep them all in sync? What am I missing?

Also, not very clear what a RAM list is… and haven’t been able to figure out the triggers.

Thanks for your help!

Andy

Ok wow. What is your question exactly? The functionality of the Floppy element is pretty clearly documented. It sounds like you’re confused about READING browser storage? I can’t quite understand what your issue is.

None of this is complicated. You might want to expose your editor. Which is not to say that I’ll fix things for you. I just don’t understand how anyone could be confused by anything in this plugin. It’s insanely powerful but also basic.