(AI demo purposes) - Add file upload field with DnD and preview

packages/uniforms-antd/README.md

@@ -9,3 +9,28 @@ $ npm install uniforms-antd
 ```
 
 For more in depth documentation see [uniforms.tools](https://uniforms.tools).
+
+## FileUploadField
+
+The `FileUploadField` component allows you to upload files with drag-and-drop functionality and preview the uploaded files.
+
+### Usage
+
+```jsx
+import React from 'react';
+import { AutoForm } from 'uniforms-antd';
+import FileUploadField from './FileUploadField';
+
+const schema = {
+  file: { type: Array },
+  'file.$': { type: Object },
+};
+
+const MyForm = () => (
+  <AutoForm schema={schema} onSubmit={console.log}>
+    <FileUploadField name="file" />
+  </AutoForm>
+);
+
+export default MyForm;
+```

packages/uniforms-antd/__suites__/FileUploadField.tsx

@@ -0,0 +1,46 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { FileUploadField } from 'uniforms-antd';
+import { z } from 'zod';
+import { renderWithZod } from 'uniforms/__suites__';
+
+describe('@RTL - FileUploadField tests', () => {
+  test('<FileUploadField> - renders an upload button', () => {
+    renderWithZod({
+      element: <FileUploadField name="x" />,
+      schema: z.object({ x: z.instanceof(File).array() }),
+    });
+
+    expect(screen.getByText('Click to Upload')).toBeInTheDocument();
+  });
+
+  test('<FileUploadField> - uploads a file and displays it in the list', () => {
+    const file = new File(['file content'], 'file.txt', { type: 'text/plain' });
+
+    renderWithZod({
+      element: <FileUploadField name="x" />,
+      schema: z.object({ x: z.instanceof(File).array() }),
+    });
+
+    const input = screen.getByText('Click to Upload').closest('input');
+    fireEvent.change(input!, { target: { files: [file] } });
+
+    expect(screen.getByText('file.txt')).toBeInTheDocument();
+  });
+
+  test('<FileUploadField> - removes a file from the list', () => {
+    const file = new File(['file content'], 'file.txt', { type: 'text/plain' });
+
+    renderWithZod({
+      element: <FileUploadField name="x" value={[file]} />,
+      schema: z.object({ x: z.instanceof(File).array() }),
+    });
+
+    expect(screen.getByText('file.txt')).toBeInTheDocument();
+
+    const removeButton = screen.getByRole('button', { name: /remove/i });
+    fireEvent.click(removeButton);
+
+    expect(screen.queryByText('file.txt')).not.toBeInTheDocument();
+  });
+});

packages/uniforms-antd/__tests__/FileUploadField.tsx

@@ -0,0 +1,46 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { FileUploadField } from 'uniforms-antd';
+import { z } from 'zod';
+import { renderWithZod } from 'uniforms/__suites__';
+
+describe('@RTL - FileUploadField tests', () => {
+  test('<FileUploadField> - renders an upload button', () => {
+    renderWithZod({
+      element: <FileUploadField name="x" />,
+      schema: z.object({ x: z.instanceof(File).array() }),
+    });
+
+    expect(screen.getByText('Click to Upload')).toBeInTheDocument();
+  });
+
+  test('<FileUploadField> - uploads a file and displays it in the list', () => {
+    const file = new File(['file content'], 'file.txt', { type: 'text/plain' });
+
+    renderWithZod({
+      element: <FileUploadField name="x" />,
+      schema: z.object({ x: z.instanceof(File).array() }),
+    });
+
+    const input = screen.getByText('Click to Upload').closest('input');
+    fireEvent.change(input!, { target: { files: [file] } });
+
+    expect(screen.getByText('file.txt')).toBeInTheDocument();
+  });
+
+  test('<FileUploadField> - removes a file from the list', () => {
+    const file = new File(['file content'], 'file.txt', { type: 'text/plain' });
+
+    renderWithZod({
+      element: <FileUploadField name="x" value={[file]} />,
+      schema: z.object({ x: z.instanceof(File).array() }),
+    });
+
+    expect(screen.getByText('file.txt')).toBeInTheDocument();
+
+    const removeButton = screen.getByRole('button', { name: /remove/i });
+    fireEvent.click(removeButton);
+
+    expect(screen.queryByText('file.txt')).not.toBeInTheDocument();
+  });
+});

packages/uniforms-antd/src/FileUploadField.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Upload, List, Button } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { FieldProps, connectField, filterDOMProps } from 'uniforms';
+
+const FileUploadField = (props: FieldProps<File[]>) => {
+  const [fileList, setFileList] = useState<File[]>(props.value || []);
+
+  const handleChange = ({ file, fileList }: any) => {
+    if (file.status === 'done') {
+      setFileList(fileList.map((file: any) => file.originFileObj));
+      props.onChange(fileList.map((file: any) => file.originFileObj));
+    }
+  };
+
+  const handleRemove = (file: any) => {
+    const newFileList = fileList.filter(item => item.uid !== file.uid);
+    setFileList(newFileList);
+    props.onChange(newFileList);
+  };
+
+  return (
+    <div {...filterDOMProps(props)}>
+      <Upload
+        fileList={fileList}
+        onChange={handleChange}
+        onRemove={handleRemove}
+        beforeUpload={() => false}
+        multiple
+      >
+        <Button icon={<UploadOutlined />}>Click to Upload</Button>
+      </Upload>
+      <List
+        itemLayout="horizontal"
+        dataSource={fileList}
+        renderItem={file => (
+          <List.Item>
+            <List.Item.Meta
+              title={file.name}
+              description={`Size: ${file.size} bytes`}
+            />
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+};
+
+export default connectField(FileUploadField);

packages/uniforms-antd/src/index.ts

@@ -22,3 +22,4 @@ export { default as TextField, TextFieldProps } from './TextField';
 export { default as ValidatedForm } from './ValidatedForm';
 export { default as ValidatedQuickForm } from './ValidatedQuickForm';
 export { default as wrapField } from './wrapField';
+export { default as FileUploadField } from './FileUploadField';

packages/uniforms-bootstrap4/README.md

@@ -9,3 +9,28 @@ $ npm install uniforms-bootstrap4
 ```
 
 For more in depth documentation see [uniforms.tools](https://uniforms.tools).
+
+## FileUploadField
+
+The `FileUploadField` component allows you to upload files with drag-and-drop functionality and preview the uploaded files.
+
+### Usage
+
+```jsx
+import React from 'react';
+import { AutoForm } from 'uniforms-bootstrap4';
+import FileUploadField from './FileUploadField';
+
+const schema = {
+  file: { type: Array },
+  'file.$': { type: Object },
+};
+
+const MyForm = () => (
+  <AutoForm schema={schema} onSubmit={console.log}>
+    <FileUploadField name="file" />
+  </AutoForm>
+);
+
+export default MyForm;
+```

packages/uniforms-bootstrap4/__suites__/FileUploadField.tsx

@@ -0,0 +1,46 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { FileUploadField } from 'uniforms-bootstrap4';
+import { z } from 'zod';
+import { renderWithZod } from 'uniforms/__suites__';
+
+describe('@RTL - FileUploadField tests', () => {
+  test('<FileUploadField> - renders an upload button', () => {
+    renderWithZod({
+      element: <FileUploadField name="x" />,
+      schema: z.object({ x: z.instanceof(File).array() }),
+    });
+
+    expect(screen.getByText('Choose files')).toBeInTheDocument();
+  });
+
+  test('<FileUploadField> - uploads a file and displays it in the list', () => {
+    const file = new File(['file content'], 'file.txt', { type: 'text/plain' });
+
+    renderWithZod({
+      element: <FileUploadField name="x" />,
+      schema: z.object({ x: z.instanceof(File).array() }),
+    });
+
+    const input = screen.getByText('Choose files').closest('input');
+    fireEvent.change(input!, { target: { files: [file] } });
+
+    expect(screen.getByText('file.txt')).toBeInTheDocument();
+  });
+
+  test('<FileUploadField> - removes a file from the list', () => {
+    const file = new File(['file content'], 'file.txt', { type: 'text/plain' });
+
+    renderWithZod({
+      element: <FileUploadField name="x" value={[file]} />,
+      schema: z.object({ x: z.instanceof(File).array() }),
+    });
+
+    expect(screen.getByText('file.txt')).toBeInTheDocument();
+
+    const removeButton = screen.getByRole('button', { name: /remove/i });
+    fireEvent.click(removeButton);
+
+    expect(screen.queryByText('file.txt')).not.toBeInTheDocument();
+  });
+});

packages/uniforms-bootstrap4/__tests__/FileUploadField.tsx

@@ -0,0 +1,46 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { FileUploadField } from 'uniforms-bootstrap4';
+import { z } from 'zod';
+import { renderWithZod } from 'uniforms/__suites__';
+
+describe('@RTL - FileUploadField tests', () => {
+  test('<FileUploadField> - renders an upload button', () => {
+    renderWithZod({
+      element: <FileUploadField name="x" />,
+      schema: z.object({ x: z.instanceof(File).array() }),
+    });
+
+    expect(screen.getByText('Choose files')).toBeInTheDocument();
+  });
+
+  test('<FileUploadField> - uploads a file and displays it in the list', () => {
+    const file = new File(['file content'], 'file.txt', { type: 'text/plain' });
+
+    renderWithZod({
+      element: <FileUploadField name="x" />,
+      schema: z.object({ x: z.instanceof(File).array() }),
+    });
+
+    const input = screen.getByText('Choose files').closest('input');
+    fireEvent.change(input!, { target: { files: [file] } });
+
+    expect(screen.getByText('file.txt')).toBeInTheDocument();
+  });
+
+  test('<FileUploadField> - removes a file from the list', () => {
+    const file = new File(['file content'], 'file.txt', { type: 'text/plain' });
+
+    renderWithZod({
+      element: <FileUploadField name="x" value={[file]} />,
+      schema: z.object({ x: z.instanceof(File).array() }),
+    });
+
+    expect(screen.getByText('file.txt')).toBeInTheDocument();
+
+    const removeButton = screen.getByRole('button', { name: /remove/i });
+    fireEvent.click(removeButton);
+
+    expect(screen.queryByText('file.txt')).not.toBeInTheDocument();
+  });
+});

packages/uniforms-bootstrap4/src/FileUploadField.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { connectField, filterDOMProps } from 'uniforms';
+
+const FileUploadField = (props) => {
+  const [fileList, setFileList] = useState(props.value || []);
+
+  const handleChange = (event) => {
+    const newFiles = Array.from(event.target.files);
+    setFileList(newFiles);
+    props.onChange(newFiles);
+  };
+
+  const handleRemove = (file) => {
+    const newFileList = fileList.filter(item => item !== file);
+    setFileList(newFileList);
+    props.onChange(newFileList);
+  };
+
+  return (
+    <div {...filterDOMProps(props)}>
+      <div className="custom-file">
+        <input
+          type="file"
+          className="custom-file-input"
+          id={props.id}
+          multiple
+          onChange={handleChange}
+        />
+        <label className="custom-file-label" htmlFor={props.id}>
+          {fileList.length > 0 ? `${fileList.length} files selected` : 'Choose files'}
+        </label>
+      </div>
+      <ul className="list-group mt-3">
+        {fileList.map((file, index) => (
+          <li key={index} className="list-group-item d-flex justify-content-between align-items-center">
+            {file.name}
+            <button type="button" className="btn btn-danger btn-sm" onClick={() => handleRemove(file)}>
+              Remove
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default connectField(FileUploadField);

packages/uniforms-bootstrap4/src/index.ts

@@ -23,3 +23,4 @@ export { default as TextField, TextFieldProps } from './TextField';
 export { default as ValidatedForm } from './ValidatedForm';
 export { default as ValidatedQuickForm } from './ValidatedQuickForm';
 export { default as wrapField } from './wrapField';
+export { default as FileUploadField } from './FileUploadField';

packages/uniforms-bootstrap5/README.md

@@ -9,3 +9,28 @@ $ npm install uniforms-bootstrap5
 ```
 
 For more in depth documentation see [uniforms.tools](https://uniforms.tools).
+
+## FileUploadField
+
+The `FileUploadField` component allows you to upload files with drag-and-drop functionality and preview the uploaded files.
+
+### Usage
+
+```jsx
+import React from 'react';
+import { AutoForm } from 'uniforms-bootstrap5';
+import FileUploadField from './FileUploadField';
+
+const schema = {
+  file: { type: Array },
+  'file.$': { type: Object },
+};
+
+const MyForm = () => (
+  <AutoForm schema={schema} onSubmit={console.log}>
+    <FileUploadField name="file" />
+  </AutoForm>
+);
+
+export default MyForm;
+```