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
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:
Working with the files
In the frontend
The user can:
Upload images
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.
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.
In the backend (Bubble editor)
To save or modify the files, in your application workflows and actions you will be able to reference:
the complete list of files in the reusable 'file images' state
the image selected by the user in the 'selected file image' state
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).
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.