diff --git a/packages/apps/workshop/stories/design-system/components/file/file-webcomponent.stories.js b/packages/apps/workshop/stories/design-system/components/file/file-webcomponent.stories.js index 3a80ca10..13235d95 100644 --- a/packages/apps/workshop/stories/design-system/components/file/file-webcomponent.stories.js +++ b/packages/apps/workshop/stories/design-system/components/file/file-webcomponent.stories.js @@ -94,6 +94,7 @@ export const DragDropArea = forModule(moduleName).createElement( disabled="$ctrl.disabled" maxsize="150000" model="$ctrl.model" + multiple droparea> `, { @@ -106,6 +107,25 @@ export const DragDropArea = forModule(moduleName).createElement( DragDropArea.storyName = 'Drag & Drop area'; +export const DragDropAreaSingle = forModule(moduleName).createElement( + () => compileTemplate( + ` + + `, + { + $ctrl: { + disabled: boolean('Disabled state', false), + }, + }, + ), +); + +DragDropAreaSingle.storyName = 'Drag & Drop area single file'; + export const DragDropWithPreview = forModule(moduleName).createElement( () => compileTemplate( ` @@ -113,6 +133,7 @@ export const DragDropWithPreview = forModule(moduleName).createElement( disabled="$ctrl.disabled" maxsize="150000" model="$ctrl.model" + multiple droparea preview> `, diff --git a/packages/components/file/src/js/file.controller.js b/packages/components/file/src/js/file.controller.js index 5e312553..2d5a4403 100644 --- a/packages/components/file/src/js/file.controller.js +++ b/packages/components/file/src/js/file.controller.js @@ -21,7 +21,7 @@ export default class { this.units = orderBy(this.$filter('orderBy')(ouiFileConfiguration.units, '-size'), 'size', 'desc'); } - checkFileValidity(_file_) { + checkFileValidity(_file_, errors) { const file = _file_; if (file) { @@ -58,9 +58,19 @@ export default class { if (file.errors.type) { this.form[this.name].$setValidity('type', false); } + if (errors?.notSingle) { + this.form[this.name].$setValidity('not-single', false); + } this.form[this.name].$setDirty(); } + if (!isEmpty(errors)) { + file.errors = { + ...file.errors, + ...errors, + }; + } + // Clean errors if (isEmpty(file.errors)) { delete file.errors; @@ -108,12 +118,22 @@ export default class { this.model = []; } + const errors = {}; + if ((!this.multiple && this.droparea) && (files.length + this.model?.length || 0) > 1) { + errors.notSingle = true; + this.model.forEach((_item_) => { + const item = _item_; + if (!item.errors) item.errors = {}; + item.errors.notSingle = true; + }); + } + if (angular.isArray(files)) { files.forEach((file) => { // Check for duplicate before adding if (!find(this.model, (item) => file.name === item.name)) { this.getFileInfos(file); - this.checkFileValidity(file); + this.checkFileValidity(file, errors); this.loadFilePreview(file); this.model.push(file); } @@ -127,15 +147,35 @@ export default class { removeFile(file) { if (angular.isArray(this.model)) { remove(this.model, (item) => item === file); - if (file.errors && this.form && this.form[this.name]) { + if (file.errors) { let hasMaxsizeErrors = false; let hasTypeErrors = false; - this.model.forEach((item) => { + let hasNotSingleError = false; + + if (!this.multiple && this.droparea) { + hasNotSingleError = (this.model?.length || 0) > 1; + } + + this.model.forEach((_item_) => { + const item = _item_; hasMaxsizeErrors = hasMaxsizeErrors || item.errors?.maxsize; hasTypeErrors = hasTypeErrors || item.errors?.type; + if (hasNotSingleError) { + if (!item.errors) item.errors = {}; + item.errors.notSingle = true; + } else if (item.errors?.notSingle) { + delete item.errors.notSingle; + } + if (isEmpty(item.errors)) { + delete item.errors; + } }); - this.form[this.name].$setValidity('maxsize', !hasMaxsizeErrors); - this.form[this.name].$setValidity('type', !hasTypeErrors); + + if (this.form && this.form[this.name]) { + this.form[this.name].$setValidity('maxsize', !hasMaxsizeErrors); + this.form[this.name].$setValidity('type', !hasTypeErrors); + this.form[this.name].$setValidity('not-single', !hasNotSingleError); + } } this.onRemove({ modelValue: this.model }); } @@ -149,6 +189,7 @@ export default class { if (this.form && this.form[this.name]) { this.form[this.name].$setValidity('maxsize', true); this.form[this.name].$setValidity('type', true); + this.form[this.name].$setValidity('not-single', true); } } diff --git a/packages/components/file/src/js/file.html b/packages/components/file/src/js/file.html index 47795e50..8a1d727a 100644 --- a/packages/components/file/src/js/file.html +++ b/packages/components/file/src/js/file.html @@ -94,7 +94,8 @@
- + +