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 @@
-
+
+