diff --git a/web_src/js/features/dropzone.js b/web_src/js/features/dropzone.js
index 01c91892ba87b..ec50f20737ff4 100644
--- a/web_src/js/features/dropzone.js
+++ b/web_src/js/features/dropzone.js
@@ -4,7 +4,7 @@ import {clippie} from 'clippie';
import {showTemporaryTooltip} from '../modules/tippy.js';
import {GET, POST} from '../modules/fetch.js';
import {showErrorToast} from '../modules/toast.js';
-import {createElementFromHTML, createElement} from '../utils/dom.js';
+import {createElementFromHTML, createElement, elemGetAttributeNumber} from '../utils/dom.js';
const {csrfToken, i18n} = window.config;
@@ -52,8 +52,8 @@ export async function initDropzone(dropzoneEl) {
const dzInst = await createDropzone(dropzoneEl, {
url: dropzoneEl.getAttribute('data-upload-url'),
headers: {'X-Csrf-Token': csrfToken},
- maxFiles: dropzoneEl.getAttribute('data-max-file'),
- maxFilesize: dropzoneEl.getAttribute('data-max-size'),
+ maxFiles: elemGetAttributeNumber('data-max-file', null), // match dropzone default value, no limit
+ maxFilesize: elemGetAttributeNumber('data-max-size', 256), // match dropzone default value: 256 MiB
acceptedFiles: ['*/*', ''].includes(dropzoneEl.getAttribute('data-accepts')) ? null : dropzoneEl.getAttribute('data-accepts'),
addRemoveLinks: true,
dictDefaultMessage: dropzoneEl.getAttribute('data-default-message'),
diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js
index 23cd268dd1f7b..b8acd7d33e0c5 100644
--- a/web_src/js/utils/dom.js
+++ b/web_src/js/utils/dom.js
@@ -318,3 +318,10 @@ export function createElement(tagName, attrs) {
}
return el;
}
+
+export function elemGetAttributeNumber(el, attr, def) {
+ if (!el.hasAttribute(attr)) return def;
+ const v = parseInt(el.getAttribute(attr));
+ if (Number.isNaN(v)) throw new Error(`Attribute "${attr}" is not a number`);
+ return v;
+}
diff --git a/web_src/js/utils/dom.test.js b/web_src/js/utils/dom.test.js
index 4c9abdb395755..93a64ec2c4f00 100644
--- a/web_src/js/utils/dom.test.js
+++ b/web_src/js/utils/dom.test.js
@@ -1,4 +1,4 @@
-import {createElement, createElementFromHTML} from './dom.js';
+import {createElement, createElementFromHTML, elemGetAttributeNumber} from './dom.js';
test('createElementFromHTML', () => {
expect(createElementFromHTML('foobar').outerHTML).toEqual('foobar');
@@ -14,3 +14,13 @@ test('createElement', () => {
});
expect(el.outerHTML).toEqual('');
});
+
+test('elemGetAttributeNumber', () => {
+ expect(elemGetAttributeNumber(createElementFromHTML('foo'), `data-key`)).toEqual(undefined);
+ expect(elemGetAttributeNumber(createElementFromHTML('foo'), `data-key`, null)).toEqual(null);
+ expect(elemGetAttributeNumber(createElementFromHTML('foo'), `data-key`, 1)).toEqual(1);
+ expect(elemGetAttributeNumber(createElementFromHTML('foo'), `data-key`)).toEqual(2);
+ expect(() => {
+ elemGetAttributeNumber(createElementFromHTML('foo'), `data-key`);
+ }).toThrowError('Attribute "data-key" is not a number');
+});