How to limit the size of a user-uploaded file

There is often a need to limit the size of files that a user can upload to the server.
In this simple example, we’ll show you how to limit the size of a user-uploaded image to 2MB.
The user interface is shown below:

ui
The user interface consists of the following elements:

  • File Uploader Button;

  • Text element (contains a message about exceeding the allowed file size);

  • Image.

You can use the "on Before Upload" handler of the "File Uploader Button" to set the file size limit, as shown below.

before

If the image is successfully uploaded to the server, we will display the image in the user interface.

success

If the allowed file size is exceeded, an error message is displayed in the user interface, an exception is thrown and the file is not uploaded to the server.

When the file is successfully uploaded to the server, the link to the image is passed to the “Image” element (via Source URL Logic) and we can see the picture in the user interface.

Live Demo

That’s all!
Thanks for reading, and as always, happy codeless coding!

Hi,

I have tried implementing this recipe. However, for some reason, the Files" context block does not seem to load anything.

Here is my logic :

And I get the following result in the console :

Uploaded File = {}
Uploaded File Size = undefined

Nothing urgent, but I would like to understand where I’m doing something wrong.

Thanks

Could you add a link to your page so we can try it out?

Hi Mark,

I just sent you via personal email the address to the page where it does not seem to be working. I thought it wouldn’t be that great and secure to include the app’s URL openly in the forum.

Best regards,

Nicolas

Hi Nicolas,

My French is terrible (as in non-existent). Could you please walk me through the page so I know how to reproduce the problem?

Regards,
Mark

Sure !

It’s not that hard, actually : press on the top-right yellow button labelled “Personnaliser ma photo”. Then you can upload an image. The logic tests for something over 200 kB, and should, as I understand it, block from being uploaded if oversize. However, I managed to put an image 1.7 MB in there. Hence my question.

I thought your question is that the Files block is undefined.

I believe both might be linked. I do upload a file. But the logging shows Files is undefined. And although I applied the recipe provided by Roman in the initial post, the end result is that a larger file than the limit is sent through.

We were able to duplicate the problem. This is a regression. The problem is with property value retrieval for the File objects. For the reference purpose the internal ticket number is BKNDLSS-27920

This should be fixed shortly.

Regards,
Mark

Wonderful, glad I could help.
There’s no hurry on my side :slight_smile:

Best regards,

NR

I have the same problem, I tried to print the size of the image to try to debug, but it doesn’t print anything, so it evade the condition.

Please see my response here:

1 Like

Hello @Nicolas_REMY @Marco_D_Alessandria

We’ve just updated cloud servers with a fix for the issue you described above. Could you kindly let us know whether fix works for you well?

Regards,
Inna

1 Like

Hi @Inna_Shkolnaya , I have tried it, and it seems to be working OK.

Thanks a lot.

Hi @Inna_Shkolnaya!
Yes, it’s work, thanks!