Add additional parameters to ContentsUploadModal to be reusable in different scenarios

packages/volto/news/5881.feature

@@ -0,0 +1 @@
+Add additional parameters to ContentsUploadModal to be reusable in different scenarios @erral

packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx

@@ -65,6 +65,13 @@ class ContentsUploadModal extends Component {
     open: PropTypes.bool.isRequired,
     onOk: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,
+    multiple: PropTypes.bool,
+    minSize: PropTypes.number,
+    maxSize: PropTypes.number,
+    accept: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string),
+    ]),
   };
 
   /**
@@ -205,6 +212,32 @@ class ContentsUploadModal extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const dropzoneOptions = {};
+
+    const {
+      multiple = true,
+      minSize = null,
+      maxSize = null,
+      accept = null,
+      disabled = false,
+    } = this.props;
+
+    if (multiple) {
+      dropzoneOptions['multiple'] = multiple;
+    }
+    if (minSize) {
+      dropzoneOptions['minSize'] = minSize;
+    }
+    if (maxSize) {
+      dropzoneOptions['maxSize'] = maxSize;
+    }
+    if (accept) {
+      dropzoneOptions['accept'] = accept;
+    }
+    if (disabled) {
+      dropzoneOptions['disabled'] = disabled;
+    }
+
     return (
       this.props.open && (
         <Modal className="contents-upload-modal" open={this.props.open}>
@@ -224,7 +257,7 @@ class ContentsUploadModal extends Component {
               onDrop={this.onDrop}
               className="dropzone"
               noDragEventsBubbling={true}
-              multiple={true}
+              {...dropzoneOptions}
             >
               {({ getRootProps, getInputProps }) => (
                 <div {...getRootProps({ className: 'dashed' })}>

packages/volto/src/components/manage/Contents/ContentsUploadModal.test.jsx

@@ -35,4 +35,89 @@ describe('ContentsUploadModal', () => {
     await waitFor(() => {});
     expect(json).toMatchSnapshot();
   });
+
+  it('renders a contents upload modal component that only allows images', async () => {
+    const store = mockStore({
+      content: {
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <ContentsUploadModal
+          pathname="/blog"
+          open={false}
+          onOk={() => {}}
+          onCancel={() => {}}
+          accept={['image/*']}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    await waitFor(() => {});
+    expect(json).toMatchSnapshot();
+  });
+  it('renders a contents upload modal component that only allows 10MB files', async () => {
+    const store = mockStore({
+      content: {
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <ContentsUploadModal
+          pathname="/blog"
+          open={false}
+          onOk={() => {}}
+          onCancel={() => {}}
+          maxSize={1000000}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    await waitFor(() => {});
+    expect(json).toMatchSnapshot();
+  });
+  it('renders a contents upload modal component that only allows 1 file', async () => {
+    const store = mockStore({
+      content: {
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <ContentsUploadModal
+          pathname="/blog"
+          open={false}
+          onOk={() => {}}
+          onCancel={() => {}}
+          multiple={false}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    await waitFor(() => {});
+    expect(json).toMatchSnapshot();
+  });
 });

packages/volto/src/components/manage/Contents/__snapshots__/ContentsUploadModal.test.jsx.snap

@@ -1,3 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ContentsUploadModal renders a contents upload modal component 1`] = `null`;
+
+exports[`ContentsUploadModal renders a contents upload modal component that only allows 1 file 1`] = `null`;
+
+exports[`ContentsUploadModal renders a contents upload modal component that only allows 10MB files 1`] = `null`;
+
+exports[`ContentsUploadModal renders a contents upload modal component that only allows images 1`] = `null`;