Advanced Form Popup

Overview
A popup that includes custom inputs such as multi-select checkboxes, multi-file and multi-image uploaders.
Structure
The block includes the following:
Various bubble input elements (input, multi-line input, dropdown, date/time input, radio buttons, search box, and multi-dropdown)
Four custom inputs:
Group Inner multi-select options
RepeatingGroup Options displays a list of options (set to dummy data for now)
Group Inner single checkbox_yes / no
Multi-file uploader (reusable)
Multi-image uploader (reusable)
How to set up
Update the data source for all standard Bubble inputs
Update the data source for RepeatingGroup Options and its associated workflows
Clicking on Group Main select option will add the current option to a list of selected options on RepeatingGroup Options
RepeatingGroup Options has a custom state selected options of type Dummy. Modify the custom state's type.
Update Text Click to check this
​
Group Inner single checkbox_yes / no has a yes/no data type. Clicking on the group will display "yes" in the group (check the box) or "no" in the group (uncheck the box)
Add workflows to Button Cancel and Button Save changes
How to set up the custom multi-file uploader
Multi-file uploader reusable element contains the following:
new_fileuploader has a custom state of list of files (type: file)
HTML multiuploader style includes a code snippet that changes 
Multi-FileUploader files's color. You can modify the color by updating the HEX codes.
Upload files (videos, images, and documents) with Multi-FileUploader files
RepeatingGroup uploaded files displays new_fileuploader's list of files 
Clicking on Group Main delete file deletes a file
Group Inner image_file contains an image with link preview, a document icon, and a video icon
If needed, modify the conditional statement on Image file preview and add any additional file extension you might want to include. The default file extensions include:
.jpg
.jpeg
.png
.svg
.gif
If needed, modify the conditional statement on Feathericon doc and add any additional final extension you might want to include. The default file extensions include:
.doc
.docx
.pdf
.xls
.xlsx
.csv
.ppt
.pptx
If needed, modify the conditional statement on Feathericon video and add any additional final extension you might want to include. The default file extensions include:
.mp4
.m4a
.wmv
.mov
How to set up the custom multi-image uploader
Multi-image uploader reusable element contains the following:
new_imageuploader has a custom state of list of files images (type: file) and selected file image (type: file)
HTML multiuploader style includes a code snippet that changes 
Multi-FileUploader images upload's color. You can modify the color by updating the HEX codes.
Upload images with Multi-FileUploader images upload
RepeatingGroup uploaded images's displays new_imageuploader's list of files images
Clicking on Group Inner delete image deletes a file image
Add workflows to Group Inner move left and Group Inner move right. These groups should be used when you want to edit the order of a list of file images.
Clicking on Group Inner select image_file will update RepeatingGroup uploaded images's selected file image. This should be used when you want to select a main image from a list of images (e.g., cover photo, profile picture, or main listing image).

Popups - Previous

Add List Popup

Next - Popups

Rating Popup

Last modified 1yr ago

Copy link

Outline

Overview

Structure

How to set up

How to set up the custom multi-file uploader

How to set up the custom multi-image uploader