Add additional parameters to ContentsUploadModal to be reusable in different scenarios

packages/volto/news/5881.feature

@@ -0,0 +1 @@
+Add 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,22 @@ class ContentsUploadModal extends Component {
  * @returns {string} Markup for the component.
  */
  render() {
+ const {
+ multiple = true,
+ minSize = null,
+ maxSize = null,
+ accept = null,
+ disabled = false,
+ } = this.props;
+
+ const dropzoneOptions = {
+ multiple,
+ minSize,
+ maxSize,
+ accept,
+ disabled,
+ };
+
  return (
  this.props.open && (
  <Modal className="contents-upload-modal" open={this.props.open}>
@@ -224,7 +247,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`;