Comment on page
Limit file types in the File Uploader
How to limit the allowed file types that a user can upload using the FileUploader element
Sometimes we need to limit the type of files a user can upload to our app.
In this article, we'll review how to do it easily.
We can't prevent the user to upload the file to the app but, once uploaded, we can check the file and delete it from Bubble storage.
Add to the page:
- 1.A group 'Group Uploader' with Type of content: file
- 2.Inside that group, add:
- 1.The file uploader element
- 2.Another group 'Group Alert' with a text inside
Our elements
3. Create a state 'allowed file types' in the FileUploader element:
- type: text
- content: the extentions you want to allow separated by commas (no spaces)
Our state
4. Inside the 'Group Alert' add the following text:
The alert content
- 1.Add a workflow When the FileUploader's value is changed. We'll check if the extension is allowed, if it is not, well remove the file and we'll alert the user.
The whole trigger
The condition in detail
The regex to extract the file extension: ([^.]*$)
2. Inside the workflow, we start by deleting the file. This is important so our app storage is not full of waste.
3. Then we show the 'Group Alert', we schedule the closing of the alert and we reset the Group Uploader to reset the FileUploader.
The whole workflow
It's important to give feedback to the user in an alert so the user knows that the file was of a type not allowed. Otherwise, the file disappears and the user doesn't know what's happening.
The close alert workflow
The implementation in use:
