I want to limit the size (in MB) of the profile picture that the user is uploading.
How can I set the workflow for that?
Thanks!
1 Like
There is an option in the image uploader to select Limit Image Size, this is more than enough for a profile picture:
Limit image size before upload
By default, the input will upload the image the user picks without resizing it. If the image is big, that may lead to a slower upload. Check this box if you want the image to be resized if the image is wider than 800 x 600, in which case these dimensions will be used
3 Likes
Hi @DaveA, I don’t need the WxH to be resized but the MB size to be limited…
I don’t want users to upload pictures bigger than 500kB (for example)
There are a couple of other threads if you search for File Size, the only thing i can see is there is a hard limit of 50MB set by bubble system, but other than that no options to limit it.
I think your only option is to use the image size restriction.
You might be able to do some image processing using the imgix
Ok, yes I’ve seen the imgx processing options but they don’t consider the quality of the submitted picture… (I don’t want already low quality pics to be destroyed, for example).
strange that there is no option like “when-filesize-is-…”
imagine an average of 5MB per user, this will suck away the standard storage space having 1000 subscribers… if you start to have many many subscribers it can be a problem… not considering maybe other feature of your app where you need picture uploading…
Why are you concerned with storage space? Everything I’ve seen in the past from Bubble says there is no set limit on storage space per app. Did you see something different?
2 Likes
How about storage?
Each account offers 50GB of storage for user-uploaded files, pictures, etc. If your apps exceed this limit you can increase storage for $0.03/GB.
I have thought about that, and considered using Gravatar for profile images. simple use a stock image for a default profile picture and give the user an option to use a picture linked from Gravatar.
2 Likes
Well howabout that. Thanks for sharing, this is the first I’ve heard of that!
1 Like
Thank you I will try it
Hi what I tried was using a Picture Uploader Input element & in the workflow use “Element” > “An input’s value is changed”. Then in the “Only When” set a condition to trigger when the “Picture Uploader’s file size > x”
Where x is the number of bytes.
Then I reset the group that the Picture Uploader is in to make it empty again.
Hope it helps!
1 Like
If I understand what you’re saying, this might not be working as you expect. When I tried it, the input does get reset, but not before the file gets uploaded.
@sudsy did you end up finding a way to limit the file size of uploaded images and / or files?
I’ve read through every thread on the forum concerning the topic and nobody has posted an actual working solution.
I wound up writing a plug-in to do it. It works in conjunction with Bubble’s built-in file / image uploader. I have thought about publishing it to the marketplace, but it’s currently for internal use only.
There might be at least one third-party plug-in that does it, but my solution is different in that it simply augments Bubble’s existing uploader.
So to answer your question, no, I did not find a solution, so I built my own. 
2 Likes
If you publish it to the marketplace please let me know. I think a lot of other people would be interested in it as well.
1 Like
Ok I found out how to do this. In the workflow area there is a built in bubble event that is to “delete uploaded file”
So to make use of this to limit the file size users are able to upload, just set a conditional on the workflow to execute based on the size of the file in the uploader
The file you delete is the picture uploader value
Using this method, it seems that bubble will in fact first upload the file to the file manager section, then after recognizing the conditional will delete that file from the file manager
3 Likes
Nice. Seems like a workable solution.
Better, of course, would be to prevent the upload to begin with OR to simply downsample the uploaded file so that it’s within acceptable limits and then keep the resampled version and delete the original version. This is probably possible with Imgix, although I haven’t actually tried it.
EDIT:
On 2nd thought, that wouldn’t work. You’d need to upload the resampled image to Bubble’s Amazon storage in order to have it persist as a “master” file, and I’m not sure that’s practical. Enforcing the constraints before upload definitely seems like the “proper” solution.
Definitely would be. I wish there was a way to “read” the file before upload so the time dedicated to upload, and in my work around the deletion of the file, would not be wasted by the user. Although I will implement a warning after the first “file too large upload” and perhaps an on screen instruction, it still wouldn’t be as good as never having the upload to occur in the first place and get a warning / message to display size restrictions.
The croppie plugin helps with this! Spending way too much time on the forum to work through all these issues but slowly coming to final revelations on how to optimize the uploading of images.
In croppie you can set an image file size limit
What this is doing is that croppie is built to first “browse files” before they are cropped and / or deleted or saved.
Because you are “browsing” first, the selected file will be “read” prior to an upload and so you can then trigger the event “image too large”
What croppie is doing is not loading the image into the croppie element ( side note: croppie allows you to crop the image prior to upload to D.B. ) if it is too large based on your settings.
My workflow event shows a warning that the image is too large.
@sudsy croppie also lets you save the original file ( if desired ) as well as the cropped file. I don’t know yet if it is “downsampling” the image when you restrict it’s dimensions based on the crop settings. Still investigating the abilities of the plugin further and how it effects the storage, but at least have the ability to “read” the file before uploading, so cut down significantly on wasted time for users trying to upload files that are too large.
edit
After further investigation into croppies abilties…it also allows you to change the name of the file when you save it.
Not only is it saving the new file name in the file manager, the size of the file is considerably less ( I am not sure why exactly ). My original file in the example above was 1.8MB, so the cropped image file is about 1/3 the size of the original file.
2 Likes
Hey, thanks for the rundown, @boston85719! I actually glanced at that and have been considering using it for my app, because I want to give the user some creative control before uploading the image. I will likely use it or some customized variant. Thanks for sharing your findings!
EDIT: BTW, I believe that’s a “pluginized” version of the following, so those docs might be helpful.
1 Like