<div>
  <p>
    <code>data-min-size="102400"</code><br />
    <input type="hidden" role="uploadcare-uploader" data-min-size="102400" />
  </p>
  <p>
    <code>data-max-size="1048576"</code><br />
    <input type="hidden" role="uploadcare-uploader" data-max-size="1048576" />
  </p>
  <p>
    <code
      >data-multiple="true" data-min-size="102400" data-max-size="1048576"</code
    ><br />
    <input
      type="hidden"
      role="uploadcare-uploader"
      data-multiple="true"
      data-min-size="102400"
      data-max-size="1048576"
    />
  </p>
</div>
body {
  margin: 16px;
}

p {
  margin: 8px 0;
}

code {
  font-family: monospace;
}
function fileSizeLimit(min, max) {
  return function(fileInfo) {
    if (fileInfo.size === null) {
      return
    }
    if (min && fileInfo.size < min) {
      throw new Error('fileMinimalSize')
    }
    if (max && fileInfo.size > max) {
      throw new Error('fileMaximumSize')
    }
  }
}

$(function() {
  $('[role=uploadcare-uploader]').each(function() {
    var input = $(this)

    if (!input.data('minSize') && !input.data('maxSize')) {
      return
    }
    var widget = uploadcare.Widget(input)

    widget.validators.push(fileSizeLimit(input.data('minSize'), input.data('maxSize')))
  })
})

UPLOADCARE_LOCALE_TRANSLATIONS = {
  // messages for widget
  errors: {
    fileMinimalSize: 'File is too small',
    fileMaximumSize: 'File is too large',
  },
  // messages for dialog’s error page
  dialog: {
    tabs: {
      preview: {
        error: {
          fileMinimalSize: {
            title: 'Title.',
            text: 'Text.',
            back: 'Back',
          },
          fileMaximumSize: {
            title: 'Title.',
            text: 'Text.',
            back: 'Back',
          },
        },
      },
    },
  },
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://ucarecdn.com/libs/widget/3.x/uploadcare.min.js