Canvas Manual
Search…
Advanced Form Popup
Use this for short forms that need multi-file or multi-image uploaders.

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:
    • Multi-file_fileuploader has a custom state of list of files (type: file)
  • 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.
  • 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
  • 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:
    • multi-image_uploader has a custom state of list of files images (type: file) and selected file image (type: file)
  • 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.
  • 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).
Last modified 1mo ago