# Advanced Form Popup

## Overview

![](https://4051367598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD8v0DEN20QQwdYStdXm8%2Fuploads%2FNrUtXrD4EvcZFp59RViO%2F102.png?alt=media\&token=eee9ae76-6cf3-4456-b831-e32e9f203489)

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.

![](https://4051367598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD8v0DEN20QQwdYStdXm8%2Fuploads%2F4HE9GoZ87pMNEDD7CBa0%2F103.png?alt=media\&token=a5c517d2-bc1c-42be-a67f-31e1ae8d84f5)

* 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:
  * **Multi-file\_fileuploader** has a custom state of `list of files (type: file)`

![](https://4051367598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD8v0DEN20QQwdYStdXm8%2Fuploads%2FStL2DaosxjuxqoMZBmAs%2F104.png?alt=media\&token=295efb57-0e1d-4b3d-b33f-14672e6c734a)

* **HTML multiuploader style** includes a code snippet that changes 

  **Multi-File\_uploader files's** color. You can modify the color by updating the HEX codes.

![](https://4051367598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD8v0DEN20QQwdYStdXm8%2Fuploads%2Fl6g4YCUZkhdd5UvCOdBQ%2F105.png?alt=media\&token=935ec09e-e1e4-4eb6-beb1-f204f6f17ad9)

* Upload files (videos, images, and documents) with **multi-file\_uploader files**
* **RepeatingGroup uploaded files** displays **multi-file\_uploader'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

![](https://4051367598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD8v0DEN20QQwdYStdXm8%2Fuploads%2Fx2HDfFTqKwgJRq3b4QUf%2F106.png?alt=media\&token=81bbbab5-fc25-4f10-bfca-ff1e3e2f0005)

* 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

![](https://4051367598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD8v0DEN20QQwdYStdXm8%2Fuploads%2Ffo3rl6K5l5B3kaPjGXfh%2F107.png?alt=media\&token=79f1c885-894c-463e-a5ff-680767648036)

* 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

![](https://4051367598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD8v0DEN20QQwdYStdXm8%2Fuploads%2FQzb9WJxsw07tAL3kyxGO%2F108.png?alt=media\&token=5db956aa-bbc7-4921-907e-c4053152ea73)

## *How to set up the custom multi-image\_uploader*

* ***Multi-image\_uploader** reusable element contains the following:*
  * ***multi-image\_uploader** has a custom state of list of `files images (type: file)` and `selected file image (type: file)`*

![](https://4051367598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD8v0DEN20QQwdYStdXm8%2Fuploads%2FB9NBmFs32jerutlNnLtF%2F109.png?alt=media\&token=27ff624f-dfea-44b1-b595-f2cef8b60fa5)

* **HTML multi-uploader style** includes a code snippet that changes 

  **multi-file\_uploader images upload's color**. You can modify the color by updating the HEX codes.

![](https://4051367598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD8v0DEN20QQwdYStdXm8%2Fuploads%2Fic3PB5J0Af0DRG0FJ6Tv%2F110.png?alt=media\&token=2770b248-5da4-46f2-89be-610c10d4a6e3)

* Upload images with **multi-file\_uploader 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).