diff --git a/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx
index 7e1dae8dc23149d63857e5f39b76e45a8d55b816..fffb951611ac5255e250a09bbf039aa8039e0491 100644
--- a/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx
+++ b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx
@@ -1,10 +1,7 @@
import * as React from "react";
import { addClassName, Localization } from "../../../../core";
import { MaterialButton } from "../../../material-button";
-import {
- ActionButtonItem,
- DropzoneActions,
-} from "../dropzone/DropzoneProps";
+import { ActionButtonItem, DropzoneActions } from "../dropzone/DropzoneProps";
import "./DropzoneButtons.scss";
interface DropzoneButtonsProps extends DropzoneActions {
@@ -38,22 +35,38 @@ const DropzoneButtons: React.FC<DropzoneButtonsProps> = (
const actionButtonsList: ActionButtonItem[] = [
cleanButton
- ? { ...cleanButton, label: "Clean", onClick: onClean }
+ ? {
+ ...cleanButton,
+ label: "Clean",
+ onClick: cleanButton.onClick || onClean,
+ }
: undefined,
deleteButton
- ? { ...deleteButton, label: "Delete", onClick: onDelete }
+ ? {
+ ...deleteButton,
+ label: "Delete",
+ onClick: deleteButton.onClick || onDelete,
+ }
: undefined,
uploadButton
- ? { ...uploadButton, label: "Upload", onClick: onUpload }
+ ? {
+ ...uploadButton,
+ label: "Upload",
+ onClick: uploadButton.onClick || onUpload,
+ }
: undefined,
abortButton
- ? { ...abortButton, label: "Abort", onClick: onAbort }
+ ? {
+ ...abortButton,
+ label: "Abort",
+ onClick: abortButton.onClick || onAbort,
+ }
: undefined,
].filter(
(ab: ActionButtonItem | undefined) => ab !== undefined
) as ActionButtonItem[];
- const tailClassName:string = `${top ? " top" : " bottom"}`;
+ const tailClassName: string = `${top ? " top" : " bottom"}`;
const finalClassName = addClassName(
"files-ui-buttons-container" + tailClassName,
containerClassName
@@ -71,7 +84,7 @@ const DropzoneButtons: React.FC<DropzoneButtonsProps> = (
className={className}
style={style}
resetStyles={resetStyles}
- onClick={() => onClick?.()}
+ onClick={(evt) => onClick?.(evt)}
disabled={disabled}
>
{children || label}
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
index e0d4e2d7527be90925dc96bb3d2021d52859a4e3..7ceae5afffd8eb8f12cfc63eae6a4cc897d0fd01 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
@@ -690,7 +690,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
return (
<React.Fragment>
- {actionButtonsPosition === "top" && (
+ {actionButtonsPosition === "before" && (
<DropzoneButtons
disabled={disabled}
abortButton={isUploading ? abortButton : undefined}
@@ -828,7 +828,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
/>
</div>
- {actionButtonsPosition === "bottom" && (
+ {actionButtonsPosition === "after" && (
<DropzoneButtons
disabled={disabled}
abortButton={isUploading ? abortButton : undefined}
diff --git a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
index 5bf2d8311098196dcf8e427dda6611dcb88f2c81..352a2b266cb9f471266fc4e1dfa21969361a4550 100644
--- a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
+++ b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
@@ -249,6 +249,10 @@ export type FooterConfig = {
customMessage?: JSX.Element;
customFooter?: JSX.Element;
+
+ style?: React.CSSProperties;
+ className?: string;
+ resetStyles?: boolean;
}
@@ -263,7 +267,7 @@ export type ActionButtonItem = {
}
export interface DropzoneActions {
- position?: "top" | "bottom";
+ position?: "before" | "after";
style?: React.CSSProperties;
className?: string;
uploadButton?: ActionButtonItem;
diff --git a/src/files-ui/components/file-input-button/FileInputButton.tsx b/src/files-ui/components/file-input-button/FileInputButton.tsx
index b9dd2eabdd0228858b0cb1cee835f3e021633892..41ab7e89715e1bdcb9bb02cec2196bd1481159fd 100644
--- a/src/files-ui/components/file-input-button/FileInputButton.tsx
+++ b/src/files-ui/components/file-input-button/FileInputButton.tsx
@@ -486,9 +486,9 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
return (
<React.Fragment>
- {actionButtonsPosition === "top" && (
+ {actionButtonsPosition === "before" && (
<DropzoneButtons
- disabled={disabled}
+ disabled={disabled}
abortButton={isUploading ? abortButton : undefined}
onAbort={handleAbortUpload}
deleteButton={deleteButton}
@@ -527,9 +527,9 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
onChange={handleChangeInput}
/>
- {actionButtonsPosition === "bottom" && (
+ {actionButtonsPosition === "after" && (
<DropzoneButtons
- disabled={disabled}
+ disabled={disabled}
abortButton={isUploading ? abortButton : undefined}
onAbort={handleAbortUpload}
deleteButton={deleteButton}
diff --git a/src/files-ui/components/material-button/MaterialButton.tsx b/src/files-ui/components/material-button/MaterialButton.tsx
index be11fe2c9f7adf0d13ee515a00c1c5631effa613..222912c7f2203478989fb9ec5d21c4243aa3f05d 100644
--- a/src/files-ui/components/material-button/MaterialButton.tsx
+++ b/src/files-ui/components/material-button/MaterialButton.tsx
@@ -4,22 +4,22 @@ import { MaterialButtonProps } from "./MaterialButtonProps";
import "./MaterialButton.scss";
import { createRippleButton } from "../../core";
-
const MaterialButton: React.FC<MaterialButtonProps> = (
props: MaterialButtonProps
) => {
const {
disabled,
href,
- textTransform:textDecoration,
+ textTransform: textDecoration,
variant = "contained",
color = "#1976d2",
- textColor ="white",
+ textColor = "white",
children,
className,
style,
onClick,
resetStyles,
+ disableRipple,
} = props;
const idClassName = React.useId();
@@ -32,7 +32,7 @@ const MaterialButton: React.FC<MaterialButtonProps> = (
textColor,
textDecoration,
className,
- idClassName.replaceAll(":",""),
+ idClassName.replaceAll(":", ""),
resetStyles
);
@@ -40,15 +40,15 @@ const MaterialButton: React.FC<MaterialButtonProps> = (
e: React.MouseEvent<T, MouseEvent>
): void {
e.preventDefault();
-
//ripple
- createRippleButton(e, variant as string, color as string);
+ if (!disableRipple)
+ createRippleButton(e, variant as string, color as string);
onClick?.(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);
}
- if (materialButtonClassName!==undefined || resetStyles)
+ if (materialButtonClassName !== undefined || resetStyles)
return React.createElement(href ? "a" : "button", {
className: resetStyles && className ? className : materialButtonClassName,
"data-testid": href ? "dui-anchor" : "dui-button",
diff --git a/src/files-ui/components/material-button/MaterialButtonProps.ts b/src/files-ui/components/material-button/MaterialButtonProps.ts
index 4f6dce3f569d04645ad3f876ad8e9579352c7459..72225f121de7b2eb8355b8f8a697843174c31c1b 100644
--- a/src/files-ui/components/material-button/MaterialButtonProps.ts
+++ b/src/files-ui/components/material-button/MaterialButtonProps.ts
@@ -36,6 +36,14 @@ export interface MaterialButtonPropsInterface extends OverridableComponentProps
resetStyles?: boolean;
+
+ /**
+ * If true, will not show a ripple effect everytime
+ * the user drops files or clicks the dropzone for selecting files
+ * @default false
+ */
+ disableRipple?: boolean;
+
}
type DefButtonPropsMap = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
diff --git a/src/files-ui/core/types/uploadTypes.ts b/src/files-ui/core/types/uploadTypes.ts
index 4c5f4b2482d015e187d630e9c62dc572ebcadf49..f2f145ca59f860f0c186b6c1644a0db10e0e9073 100644
--- a/src/files-ui/core/types/uploadTypes.ts
+++ b/src/files-ui/core/types/uploadTypes.ts
@@ -16,9 +16,19 @@ export declare type UploadResponse = {
serverResponse: ServerResponse | {};
uploadedFile: ExtFile;
}
+
export type ServerResponse = {
+ /**
+ * If true, it means that the request was successful.
+ */
success: boolean;
+ /**
+ * A message that describes the result of the request.
+ */
message?: string;
+ /**
+ * The response of the server.
+ */
payload?: any;
}