Complicated multi image/ file upload and display set up

progressdiary · 2024-08-28T09:18:22.110Z

Hi Guys, I’m really stuck here so please be patient this will be a long post but I hope an entertaining one for everyone. I am building SPA app as a demo to add to my portfolio so I can start to work as a freelancer/ Bubble Dev. however I have once again got myself stuck and I’ve tried a few different approaches and followed some videos but the results still don’t work properly. WHAT I’M TRYING TO ACHIEVE: upload and display multiple images and files on each data type “note”, To-Do" “Project” , the issue is that when I set this up the images from one particular note display in ALL the other NOTES, and then once saved they are in the DB but wont reload to be displayed when that note is selected again… even though they do the first time

So lets dive into the overview–
This is a note taking app where the user can create “notes”, “to-do lists” and “projects”. each of these are in their own group (G) not visible on page load and collapsed when hidden. Type of content and Data source only start being relevant and possible on these groups for the data type in question. What I mean is i can’t set Type of content and Data source to the page or parent groups before the selected note, to-do or project ( see below for page layout explanation) as this this returns errors when other data types are selected.

Data types and fields:
Note:
completed- Y/N
content - text
due date - date
file - list of files
images - list of images
tag - list of tags
title - text

Project:
completed- Y/N
content - text
due date - date
file - list of files
images - list of images
tag - list of tags
title - text

Tag:
name - text
note - list of Notes
project - list of Projects
to-do - list of To-do parents

To-Do Child:
completed - Y/N
content - text
to-do parent - To-do parent

To-Do Parent:
completed - Y/N
content - text
due date - date
tag - list of tags
title - text
to do list - list of To-do Childs

User:
avatar - image
name-First - text
name-Last - text

PAGE LAYOUT AND ELEMENTS:
Screenshot 2024-08-28 080608
Screenshot 2024-08-28 080950

Page: index
Type of content : NA
Data source: NA
G main content
Type of content : NA
Data source: NA

Screenshot 2024-08-28 080823470×603 23.7 KB
G Note Expanded (This is the first parent for all notes)
Type of content : Note
Data source: Get expand from URL
-G Selection
Type of content : Note
Data source: Parent group’s Note
- G Image Uploads
  Type of content : Note
  Data source: Parent group’s Note
- imageuploaderbutton (Notes)
  - Intital value = parent group’s Note’s images: each item: processed with imgix
- RG ImageListUploads
  Type of content : image
  Data source: G note Expanded’s note_state_manager
  - G cell’s image (Note)
    Type of content : image
    Data source: current cell’s image
    - Image Uploaded (note) - Dynamic image = Parent group’s image’s URL
    - Text image file name (Note) - Parent group’s image’s file name truncated to 15
    - Button Delete image (Note)
- Button Save Note
  
  Screenshot 2024-08-28 0811581347×936 55.9 KB

EACH OF THE OTHER “G project Expanded” and “G To-Do Expanded” are set up in the same way so to save repeating myself we can follow the assumption that they are all set up the same. ie, what works for one will work for the other two as well.

PLUGIN: Multiple Image Uploader (I’m not using the multi file uploader by bubble because its UX is quite crap and I still run into the same problems as here but then I also have to redesign the uploads section and how to add more images so it doesn’t look horrendous and even after that the upload button is covered by the previous uploaded images … just not a great UX IMO)

Screenshot 2024-08-28 0813391468×803 33.8 KB

CUSTOM SATES: (all the are set on the "G {data type} Expanded’s " element rather than the page level. )
note_state_manager - image - List = yes
todo_state_manager - image - List = yes
project_state_manager - image - List = yes

Screenshot 2024-08-28 0830021038×815 57.5 KB

URL PARAMETERS
expand = current cell’s note’s unique id

Screenshot 2024-08-28 094216912×250 17.7 KB

nav = g nav note’s text
Screenshot 2024-08-28 093927

project = parent group’s unique id

WORKFLOWS:
When button Save note is clicked

Screenshot 2024-08-28 0945111184×635 39 KB

Screenshot 2024-08-28 094649

When imageuploaderbutton (Notes) is clicked

image1170×322 21.4 KB

When button Delete image (note) is clicked#

Screenshot 2024-08-28 0951471055×356 24.3 KB

Screenshot 2024-08-28 0952061053×268 17.5 KB

RSULTS AND ISSUES!

Custom State works - I can add and delete files.
When I save using the save button the files are saved
All images appear on all notes so I need to work out a way to make the images save to the specific notes unique id
Once the screen id refreshed the images wont show again until a new image is uploaded then that new image and Randomly SOME of the previously uploaded images display…
I’m getting duplicates of previously saved images
Also I have not been able to successfully delete images from the file manager in the DB… currently I only have the delete button set up to delete the file from the custom state… but how do I set that up to delete from the data base once it’s there? there is not option to delete parent group’s image. I tried to do a search for…

image1025×372 27.8 KB

But this just deletes the entire data row i.e… the whole note and not just the image from the parent’s group.

I’M DEVELOPING A TWICH HERE GUYS!!! and I’ve had to lock the tool shed where the hammers are kept and give the key to the neighbor! HAHA HELP!

I’ve watched the YouTube videos on multiple image/file uploads by coaching no code apps as well as Thilak S also Mathew @boston85719 I’ve followed along with your training in nocodetrainer.com that you linked in a previous thread on a similar topic as well as I have read your OG post here How to upload multiple images This requires a large change in my structure and is also “doing stuff” I don’t fully understand yet haha.

Please be aware also that I’m on the basic account as I’m learning so Unfortunately I cant use backend workflows or version test and things like that that come with the paid plans. But currently I cant justify 32/m plus extras to play around with an app that I’m not planning on publishing but rather to build a portfolio so I can showcase what i can do and head out freelancing and developing for others as well as then my own custom projects. (I hope this makes sense and doesn’t make me sound like to much of a tight-arse)

system · 2024-11-06T09:19:06.121Z

This topic was automatically closed after 70 days. New replies are no longer allowed.