Streaming live at 10am (PST)

Change form file upload maximal file size

Hey webflowers :wave:t3:

I’ve built a webflow form which automatically uploads submissions via zapier to a cms collection inside webflow. Inside of this form I use the file upload field to upload a thumbnail image to the collection. Now I’ve encountered a unexpected problem:

Max. file size for file upload field is 10MB.
Max. file size for collection images is 4MB.

this makes it possible, that users can submit images that then won’t get uploaded to the cms because of the 4MB limit. Now here is my question:

Is there any way, to limit the file size of the file upload field to less then 10MB?

I’m working with a lot of custom code on this site so a quick js- or jquery-script would be perfect for me.


a read-only-link or link to my site is in this case not needed I think, since the solution (if possible) should be easy to implement on multiple sites.

just solved it. for anyone interested, this is my code:

$("[type=file]").change(function() {
    if(this.files[0].size > 3000000){
       this.value = "";
       $(this).siblings(".file__error").css("display", "block")
    }
    else {
    	$(this).siblings(".file__error").css("display", "none")
    }
});

file__error = The class of an element placed next to the input-element which shows the alert message.
3000000 = The new file size limit (in this case 3 MB)

1 Like

Where does this code need to be placed for it to work?

Add the code before the </body> tag on the page you want it to work. You need to also add the code like this <script> the code in here </script>

Hi there!

I’ve been looking for a way to limit my upload sizes as well and came across this post. I’ve tried to replicate it in my project, but I can’t seem to get it working?

Here’s my Read-Only link: https://preview.webflow.com/preview/sympokamou?utm_medium=preview_link&utm_source=designer&utm_content=sympokamou&preview=e74f6a88c8ff5555ea95cae5c3150983&pageId=5f3bef6b3619423b5c274ff6&mode=preview

I’ve implemented it on the first Upload link on this page (“Photo de l’artiste”). I’m not sure if I need to “hide” the error field initially; but I tried both ways, and I can’t get the error message to work.

I copy/pasted what you had and just changed it to to 1MB instead. Keep in mind that I’m new to all the code-tweaking, so hopefully there’s a simple fix! :slight_smile:

Thank you!!

You need to hide the field initially. sadly I can’t really test it with the read-only link. You would need to provide me with a link of the live website (can be .webflow.io).

Okay - I just hid the field, and here’s the published link: https://sympokamou.webflow.io/infos-pour-artistes

Try to make structure like this:

Bildschirmfoto 2020-11-03 um 18.45.28

AHHHH!!! That did the trick… thank you so much!!!