Multimage uploader

Description and instructions for the multimage uploader reusable

Functionality

Overview

Use this reusable when you need to upload multiple images. It consists of an uploader and a thumbnail gallery.

The user can upload files by:

• clicking in the uploader and selecting one or more files

• drag and drop files into the uploader

Multimage uploader reusable

Contents

States

The multimageuploader_template reusable contains the following custom states:

• allowed file extensions

  • type: text

  • format: file extensions separated by commas, i.e.: png,jpg,gif

• file images

  • type: file (list of)

  • list of the uploaded files

• selected file image

  • type: file

  • file selected by the user

  • used to set an image to the cover photo, main image, or default

Styles

You can customize certain styles of the reusable just by customizing the code in the 'HTML multiuploader style' element:

Styles

Working with the files

In the frontend

The user can:

1. Upload images

2. After uploading the images, the user can reorder them or delete one or all of them if desired. This is done by clicking on the icons in the thumbnails. Deleting an image will also delete the image from the app's file manager.

3. He can also select an image by clicking on it. This can be useful for example to indicate which is the main image in a gallery.

Click on an image to set it as the cover image, main image, or default

Error message when uploading a file extension that is not allowed

In the backend (Bubble editor)

To save or modify the files, in your application workflows and actions you will be able to reference:

1. the complete list of files in the reusable 'file images' state

2. the image selected by the user in the 'selected file image' state

Reusable states

Internal logic

All the logic to make the reusable work is already contained within itself.

Allowed file extensions

We have limited the upload of files to image files. Allowed file extensions are listed in the reusable's 'allowed file extensions' state.

Default list of allowed file extensions

aces,avci,avcs,avif,bmp,cgm,dicom,emf,example,fits,g3fax,gif,heic,heif,hej2k,hsj2,ief,jls,jp2,jpeg,jpg,jph,jphc,jpm,jpx,jxr,jxrA,jxrS,jxs,jxsc,jxsi,jxss,ktx,ktx2,naplps,png,t38,tiff,wmf

Due to the characteristics of the Bubble file uploader, we cannot stop the file upload, but we can detect if it is not among the allowed file types and, if that is the case, delete it so that it does not occupy storage space in your application. In addition, we warn the user that one or more files have not been uploaded because they are not of the allowed file type.

Modifying the list of allowed file extensions

If you want to add, modify or completely change the allowed file extensions, just modify the 'allowed file extensions' state by entering the extensions you want to allow separated by commas (without a period).

Adding a new allowed file extension

Svg is not allowed by default due to the special characteristics of this vector format. But, of course, you can easily add it by following the instructions above.

Use cases

This element is very useful for creating and/or editing all kinds of image galleries: products, photos, drawings, etc.