Usually after I spend way to much time searching for answers to things I find a need to post how to do it so that future bubblers can avoid the headache.
First install the bubble plugin for multifile uploads
After that place the element on the page. You can edit the design a bit. I made it “invisible” so that I could have a custom design for user experience
I accomplished by placing a group “on top” of the multifile upload element…however you must “bring to front” the multifile upload element so that it still functions.
Then you need to have a repeating group on the page. This is set to the value of the multifile upload element
Style your repeating group content anyway you want. However, it is important to have your database set up properly to save the images.
Notice that I have image_s3 with a type of “image”…this is the important component to save the file as an image to be able to use all functions for images such as processing with imgix
Now what you need to do for this to work is to put a icon or button into your repeating group to enable saving individual images…I have not yet created a “save all” button but assume it won’t be an issue. I am still working on all of the design aspects but have a workflow set to save the images.
It is important to remember that the “images” in the repeating group is only set to the value of the multifile upload element on page, so they are not saved to your database until this workflow event on the click of a button or icon in the repeating group cell.
It is at this point that you can save the URL to reference as an image, but to be able to use all image functions like process with imgix, you must save as a “current cell’s file:saved to S3”
Then when you want to reference the dynamic data in image elements you reference the “image_S3” and you’ll have a regular image from you database.
The above screen shot is of the bare bones user interface for saving the files. It is just a repeating group cell with reference to the current cell’s file.
I have two inputs, one is a description, the other is to change the file name.
You could also include a drop down with tag selectors and other items to save along with the image.
I am having one issue with the design though.
I don’t know how to change the look of the multifile upload element during the upload process…I’d love to have full control of the background color and content or just be able to hide it altogether.
If anybody has any idea of how to change the style with CSS or JS or how to hide it, I’d really appreciate the help on the topic.