# 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.

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LvIQ3fQu87cgGlrzfUi%2F-LvKzWPu4EBLg8nuC0eC%2FScreen%20Shot%202019-12-05%20at%204.12.58%20AM.png?alt=media\&token=3577f939-8090-453f-b583-4ce67585d310)

* 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)`

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LvIQ3fQu87cgGlrzfUi%2F-LvL0ayNJdVKizMCwLJF%2FScreen%20Shot%202019-12-05%20at%204.23.58%20AM.png?alt=media\&token=4a80ae3d-c06f-427b-8349-37e3b3673248)

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

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

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LvIQ3fQu87cgGlrzfUi%2F-LvL4vJi7vpvYTOMUZyR%2FScreen%20Shot%202019-12-05%20at%204.42.37%20AM.png?alt=media\&token=c1f87a34-af60-4ff2-ba41-65f2f48c117c)

* 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

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LvIQ3fQu87cgGlrzfUi%2F-LvL2FAKtMY0sMQtO_Go%2FScreen%20Shot%202019-12-05%20at%204.31.20%20AM.png?alt=media\&token=dc55ab4b-1a9b-41e7-ad15-41421edf7c54)

* 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://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LvIQ3fQu87cgGlrzfUi%2F-LvL3B3xmm12B1khO6JR%2FScreen%20Shot%202019-12-05%20at%204.35.32%20AM.png?alt=media\&token=b1b1451e-a564-4a77-a2d6-705cc696a40e)

* 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://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LvIQ3fQu87cgGlrzfUi%2F-LvL3a6cDVGpzv4vmeGt%2FScreen%20Shot%202019-12-05%20at%204.37.45%20AM.png?alt=media\&token=c5080888-6ff5-4293-b83d-2000873d82e9)

## 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)`

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LvIQ3fQu87cgGlrzfUi%2F-LvL5YCfqBO663i2EzgP%2FScreen%20Shot%202019-12-05%20at%204.47.39%20AM.png?alt=media\&token=e3c70cf3-038d-42f8-bd4d-14d452b324d7)

* ***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.

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LvIQ3fQu87cgGlrzfUi%2F-LvL5nDR0JteUucPqHrz%2FScreen%20Shot%202019-12-05%20at%204.48.38%20AM.png?alt=media\&token=cd5fbdc6-d44b-491a-9c74-614393a38947)

* 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).