fix dropzone numbers

Author: wxiaoguang

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'),

web_src/js/utils/dom.js

@@ -318,3 +318,18 @@ export function createElement(tagName, attrs) {
   }
   return el;
 }
+
+/**
+ * Get a number from an element attribute. If the attribute doesn't exist, return the default value.
+ * If the attribute exists but is not a number, throw an error.
+ * @param {HTMLElement} el
+ * @param {string} attr
+ * @param {number|null} def
+ * @returns {number|null}
+ */
+export function elemGetAttributeNumber(el, attr, def = null) {
+  if (!el.hasAttribute(attr)) return def; // getAttribute also returns null for non-existing attribute
+  const v = parseInt(el.getAttribute(attr));
+  if (Number.isNaN(v)) throw new Error(`Attribute "${attr}" is not a number`);
+  return v;
+}

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('<a>foo<span>bar</span></a>').outerHTML).toEqual('<a>foo<span>bar</span></a>');
@@ -14,3 +14,12 @@ test('createElement', () => {
   });
   expect(el.outerHTML).toEqual('<button id="the-id" class="cls-1 cls-2" data-foo="the-data" disabled=""></button>');
 });
+
+test('elemGetAttributeNumber', () => {
+  expect(elemGetAttributeNumber(createElementFromHTML('<a>foo</a>'), `data-key`)).toEqual(null);
+  expect(elemGetAttributeNumber(createElementFromHTML('<a>foo</a>'), `data-key`, 1)).toEqual(1);
+  expect(elemGetAttributeNumber(createElementFromHTML('<a data-key="2">foo</a>'), `data-key`)).toEqual(2);
+  expect(() => {
+    elemGetAttributeNumber(createElementFromHTML('<a data-key="abc">foo</a>'), `data-key`);
+  }).toThrowError('Attribute "data-key" is not a number');
+});