Hey Bubble.io makers,
I’ve had this problem for awhile and haven’t been able to find a solution to it on the site, so I thought I would post my solution in efforts to help other people, as I think it’s such a common workflow, and will be in almost every app build.
It doesn’t filter on the front end of the file picking, but it does filter the multi-file Uploader’s value, to remove some files that aren’t image files, (say ex .docx or .pptx files), so that they are removed once uploaded, from the file uploader and the database.
Here are the steps:
- Put a multi-File uploader element on your page (download the plugin if you don’t have it)
- In the workflows tab, add an event for When an Input’s Value Has changed
- In this event details: set the Element to the name of your multi-file uploader
- In this event details: set the Only When to
Multi-File Uploader Name's Value:each items URL:filtered:first item is not empty
** where Filter is Constraint: This text doesn't contain .png and This text doesn't contain .jpeg and This text doesn't contain .HEIC and This text doesn't contain .svg:
For some clarity on why we’re using the and operator and not the or, is because we’re asking ourselves “which statements describe files I DON’T want to pass this filter?”
Let’s say that you wrote a statement like “this text doesn’t contain .png or this text doesn’t contain .jpg” and then you tried to upload a .png file. Technically, that .png file would pass this filter, because the text doesn’t contain .jpg and the statement is an “or” statement meaning only one of them needs to be true. Making this statement an “and” statement ensures that both statements must be true - since in this case, the file DOES contain .png, it won’t pass the “and” statement. I hope that adds some clarity here.
With these changes, we’re looking to see if any files that are NOT png’s or other image files exist, and then passing the filter if there are. This should catch any files that aren’t png files and then you can show an alert in the actions that only image files are allowed, and also a series of actions that delete the uploaded files from the database.
- on the page, create an alert that says “Only Image file’s are allowed to be uploaded, please try again”
- In the Workflow of this event that we created with the filtering, add an action for each of the files uploaded to be deleted, in Data > Delete an uploaded file
bubble doesn’t have the functionality to delete a list of uploaded files as of this post - In that action to Delete an uploaded file, set the URL to be This Multi-File Uploaders value:first Item’s URL.
- Duplicate this action, and do the same for This Multi-File Uploaders value:Item #2’s URL, all the way to 3, 4, 5, 6, 7, however many files you allow to be uploaded from the MultiFile Uploader. A maximum number can be set on the Uploader’s Settings on the Page
- after your done deleting all the files from the database, reset the Multi-File Uploader by Element Actions > Group > Reset Data > Multi-File Uploader
- Show Alert that you created that only Image Files are allowed to be uploaded.