<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',
},
},
},
},
},
}
This Pen doesn't use any external CSS resources.