How can I limit the file size for a direct cloudinary upload (client side jquery)

Question

I cant find in the documentation how to limit the size of the file when using direct upload. I am generating the file upload input field in the server side using:

cloudinary.uploader.image_upload_tag

And after that the file is uploaded from the client side.

Also. $cloudinary.config seems to be designed for specifying the api key and bucket name, no other configuration.

I appreciate any light on this!

Answer 1

If you using direct upload, fix your max uploadable file size in direct upload javascript billow are code sample for that.

$(function () {
    $('#direct_upload input[type="file"]')
    .fileupload({
      dropZone: '#direct_upload',
      disableImageResize: true,
      imageMaxWidth: 600,
      imageMaxHeight: 600,
      maxFileSize:2048 //2 mb
      acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
      start: function () {
        $("#direct_upload .progress").attr("style","display:block")
      },

      progress: function (e, data) {
        var com = Math.round((data.loaded * 100.0) / data.total)
        $("#direct_upload .progress .progress-bar").attr("style","width:"+com+"%")
        $("#direct_upload .progress .progress-bar").text(com +"% Complete")
      },
    })
    .on('cloudinarydone', function (e, data) {
        $('#submit-btn').attr('style','');
        $("#direct_upload .progress").attr("style","display:none")
        $("#direct_upload .progress .progress-bar").attr("style","width:0%")
        $("#direct_upload .progress .progress-bar").text("0% Complete")

        $.post(this.form.action, $(this.form).serialize()).always(function (result, status, jqxhr) {
          $('.status_value').text(result.errors ? JSON.stringify(result.errors) : status);
        });

        var  image_url = $.cloudinary.image(data.result.public_id, {
           format: data.result.format, width: 75, height: 75,style: "display:none", crop: "fill"
           })
        $('.Submitted').append(image_url);
    });
  });

Hope this work for you.

maxFileSize:2048

This fix your file size max to 2 mb.