refactor maxFiles/maxFilesize

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, createElementFromAttrs, elemGetAttributeNumber} from '../utils/dom.js';
+import {createElementFromHTML, createElementFromAttrs} from '../utils/dom.js';
 
 const {csrfToken, i18n} = window.config;
 
@@ -49,11 +49,9 @@ export async function initDropzone(dropzoneEl) {
 
   let disableRemovedfileEvent = false; // when resetting the dropzone (removeAllFiles), disable the "removedfile" event
   let fileUuidDict = {}; // to record: if a comment has been saved, then the uploaded files won't be deleted from server when clicking the Remove in the dropzone
-  const dzInst = await createDropzone(dropzoneEl, {
+  const opts = {
     url: dropzoneEl.getAttribute('data-upload-url'),
     headers: {'X-Csrf-Token': csrfToken},
-    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'),
@@ -64,8 +62,10 @@ export async function initDropzone(dropzoneEl) {
     thumbnailMethod: 'contain',
     thumbnailWidth: 480,
     thumbnailHeight: 480,
-  });
-
+  };
+  if (dropzoneEl.hasAttribute('data-max-file')) opts.maxFiles = Number(dropzoneEl.getAttribute('data-max-file'));
+  if (dropzoneEl.hasAttribute('data-max-size')) opts.maxFilesize = Number(dropzoneEl.getAttribute('data-max-size'));
+  const dzInst = await createDropzone(dropzoneEl, opts);
   dzInst.on('success', (file, data) => {
     file.uuid = data.uuid;
     fileUuidDict[file.uuid] = {submitted: false};

web_src/js/utils/dom.js

@@ -318,18 +318,3 @@ export function createElementFromAttrs(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 {createElementFromAttrs, createElementFromHTML, elemGetAttributeNumber} from './dom.js';
+import {createElementFromAttrs, createElementFromHTML} from './dom.js';
 
 test('createElementFromHTML', () => {
   expect(createElementFromHTML('<a>foo<span>bar</span></a>').outerHTML).toEqual('<a>foo<span>bar</span></a>');
@@ -14,12 +14,3 @@ test('createElementFromAttrs', () => {
   });
   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');
-});