Restrict file upload type without plug-ins

I was searching for a way to restrict file uploads to MP4 and MOV. The two Forum results I found were either complex or required plug-ins, so I found a simpler way to handle this.

Create the File Upload element on the page (we’ll call the element FileUploader)

Add a workflow…
Elements: An Input’s Value is Changed:
image

Only When: This FileUploader’s value’s name:lowercase doesn’t contain “.mp4” and This FileUploader’s value’s name:lowercase doesn’t contain “.mov”
image
(I thought this should be an “or” statement, but it only works when I make it an “and” statement)

Step1
Data (Things) → Delete an uploaded file
File URL
This FileUploader’s value
image

Since there doesn’t appear to be away in Bubble to restrict the upload from happening, this at least delete’s the file immediately. Then you can the workflow launch a pop-up or display text on the page to say “Upload Denied, Please upload a MP4 or MOV”

To carry it one step further, in case you can add…
Only when this FileUploader’s value’s name truncated from end to 4 is “.mp4”

1 Like

Definitely SHOULD be a “or”. If its a “and” it must be tru always!!

Yeah I’d just do name contains mp4 OR name contains mov, then run the delete actions. The double negatives might be making it harder to understand.

Question about this method:

Can’t you just name the file anything you want? I can technically upload an mp4 file using any extension name. How would this be checked for?

Yeah, but why would you do it? The purpose is to ensure things like video players are compatible. If you intentionally try to bypass it, of course it’ll break, and it’s nobody’s fault but the user’s!

1 Like

It may still be useful to do a “real” check of the file type & its contents to avoid malicious intent (in this case, you will surely need a plugin). It depends on the type of application & the specifics of the app. However, for 99% of use cases out there this probably doesn’t matter

1 Like

:+1: Agreed. In my use case, it’s an early stage MVP so I’m scrambling to develop as many features as I can, knowing that some may become tech-debt or have to be re-factored. Instead of spending a week on it to make it bullet-proof or pay for another plug-in, this worked in minutes.

1 Like

I’m glad you got it working. In the future, I offer a free plugin called Better Uploader which lets you limit file types, file sizes and gives you a ton of control over this kind of flow.

All the best

1 Like

Yeah exactly.

TBH the entire FileUploader element is poorly thought out, we should be able to specify allowed file types so it’s natively supported through a file upload screen in our OS.

The actual way it’s handled in the backend is also extremely insecure, I don’t want to get into the details but basically even if you use a plugin or whatever, there’s no way to stop a malicious person from uploading a file into your app.

1 Like

:point_up_2: Zero arguments there!