feat: allow-custom-validation-and-controlled-behaviour-in-file-uploader

Author: tractorss

src/lib/form/file-uploader.tsx

@@ -25,6 +25,10 @@ interface FileUploaderProps {
  /** Whether the drop target is disabled. If true, the drop target will not accept any drops. */
  isDisabled?: boolean;
  className?: string;
+ /** Provide a custom validation function, returning false invalidates the file */
+ validationFunction?: (file?: File) => boolean;
+ /** Provide File for controlled behaviour */
+ selectedFile?: File;
 }
 
 /** Allows to upload a file by either dropping it on the dropzone or
@@ -37,8 +41,12 @@ function FileUploader({
  acceptedFileTypes,
  fileTriggerProps,
  isDisabled = false,
+ validationFunction,
+ selectedFile,
 }: Readonly<FileUploaderProps>) {
- const [fileSelected, setFileSelected] = useState<File>();
+ const [fileSelected, setFileSelected] = useState<File | undefined>(
+ selectedFile,
+ );
 
  return (
  <div className={cn("box-border h-fit w-50", className)}>
@@ -71,6 +79,8 @@ function FileUploader({
 
  if (item) {
  const file = await item.getFile();
+ const validated = validationFunction?.(file) ?? true;
+ if (!validated) return;
  setFileSelected(file);
  callback(file);
  }
@@ -82,6 +92,8 @@ function FileUploader({
  onSelect={(e) => {
  if (e) {
  const file = e[0];
+ const validated = validationFunction?.(file) ?? true;
+ if (!validated) return;
  setFileSelected(file);
  callback(file);
  }
@@ -109,7 +121,7 @@ function FileUploader({
  </FileTrigger>
  </DropZone>
  {msg && (
- <div className="mt-4 flex items-start">
+ <div className="mt-4 flex items-center">
  {variant === "success" && (
  <SuccessIcon className="fill-klerosUIComponentsSuccess mr-2 max-w-4 min-w-4" />
  )}

src/stories/fileuploader.stories.tsx

@@ -64,3 +64,35 @@ export const FileUploaderWithAcceptedTypes: Story = {
  variant: "info",
  },
 };
+
+export const FileUploaderWithCustomValidation: Story = {
+ args: {
+ themeUI: "dark",
+ backgroundUI: "light",
+ className: "w-[500px]",
+ callback: () => {},
+ acceptedFileTypes: ["image/png"],
+ msg: "This will not accept any file and invalidate",
+ variant: "info",
+ validationFunction: () => {
+ return false;
+ },
+ },
+};
+
+export const FileUploaderWithControlledBehaviour: Story = {
+ args: {
+ themeUI: "dark",
+ backgroundUI: "light",
+ className: "w-[500px]",
+ callback: () => {},
+ acceptedFileTypes: ["image/png"],
+ msg: "This will show test.txt selected by default",
+ variant: "info",
+ selectedFile: new File(
+ ["hello world"], // file contents
+ "test.txt", // file name
+ { type: "text/plain" }, // MIME type
+ ),
+ },
+};