The platform I'm working on involves the client(ReactJS) and server(NodeJs, Express), of course.

The major feature of this platform involves users uploading images constantly.

Everything has been setup successfully using multer to receive images in formdata on my api server and now its time to create an "image management system".

The main problem I'll be tackling is the unpredictable file size of users. The files are images and the depend on the OS of the user i.e user taking pictures, users taking screenshots.

The first solution is to determine the max file size, and to transport it using a compression algorithm to the api server. When the backend receives it successfully, images are uploaded to a CDN (Cloudinary) and then the link is stored in the database along with other related records.

The second which im strongly leaning towards is shifting this "upload to CDN" system to the client side and make the client connect to cloudinary directly and after grab the secure link and insert into the JSON that would be sent to the server.

This eliminates the problem of grappling with file sizes which is progress, but I'll like to know if it is a good practice.

CodePudding user response：

Restricting the file size is possible when using the Cloudinary Upload Widget for client-side uploads. You can include the 'maxFileSize' parameter when calling the widget, setting its value to 500000 (value should be provided in bytes).

https://cloudinary.com/documentation/upload_widget

If the client will try and upload a larger file he/she will get back an error stating the max file size is exceeded and the upload will fail.

Alternatively, you can choose to limit the dimensions of the image, so if exceeded, instead of failing the upload with an error, it will automatically scale down to the given dimensions while retaining aspect ratio and the upload request will succeed.

However, using this method doesn't guarantee the uploaded file will be below a certain desired size (e.g. 500kb) as each image is different and one image that is scaled-down to given dimensions can result in a file size that is smaller than your threshold, while another image may slightly exceed it. This can be achieved using the limit cropping method as part of an incoming transformation.

https://cloudinary.com/documentation/image_transformations#limit https://cloudinary.com/documentation/upload_images#incoming_transformations