TASK: adjust asset editor to allow custom upload screen

Author: andrehoffmann30

packages/neos-ui-editors/src/Editors/AssetEditor/index.js

@@ -1,9 +1,13 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {MultiSelectBox, SelectBox} from '@neos-project/react-ui-components';
+import {$get} from 'plow-js';
+import {connect} from 'react-redux';
+import MultiSelectBox from '@neos-project/react-ui-components/src/MultiSelectBox/';
+import SelectBox from '@neos-project/react-ui-components/src/SelectBox/';
 import {dndTypes} from '@neos-project/neos-ui-constants';
 import {neos} from '@neos-project/neos-ui-decorators';
-import {$get} from 'plow-js';
+import {selectors} from '@neos-project/neos-ui-redux-store';
+
 import Controls from './Components/Controls/index';
 import AssetOption from '../../Library/AssetOption';
 import {AssetUpload} from '../../Library/index';
@@ -14,6 +18,10 @@ const DEFAULT_FEATURES = {
     upload: true
 };
 
+@connect(state => ({
+    siteNodePath: state?.cr?.nodes?.siteNode,
+    focusedNodePath: selectors.CR.Nodes.focusedNodePathSelector(state)
+}), null, null, {forwardRef: true})
 @neos(globalRegistry => ({
     assetLookupDataLoader: globalRegistry.get('dataLoaders').get('AssetLookup'),
     i18nRegistry: globalRegistry.get('i18n'),
@@ -44,7 +52,9 @@ export default class AssetEditor extends PureComponent {
         }).isRequired,
         secondaryEditorsRegistry: PropTypes.object.isRequired,
         renderSecondaryInspector: PropTypes.func.isRequired,
-        imagesOnly: PropTypes.bool
+        imagesOnly: PropTypes.bool,
+        siteNodePath: PropTypes.string.isRequired,
+        focusedNodePath: PropTypes.string.isRequired
     };
 
     static defaultProps = {
@@ -179,8 +189,30 @@ export default class AssetEditor extends PureComponent {
         }
     }
 
+    afterUpload = uploadResult => {
+        if (uploadResult?.object) {
+            this.handleValueChange(uploadResult?.object?.__identity);
+        } else {
+            this.handleValuesChange(uploadResult);
+        }
+    }
+
     handleChooseFile = () => {
-        this.assetUpload.chooseFromLocalFileSystem();
+        const {secondaryEditorsRegistry, options} = this.props;
+        if (secondaryEditorsRegistry.get('Neos.Neos/Inspector/Secondary/Editors/AssetUploadScreen')) {
+            // set media type constraint to "image/*" if it is not explicitly specified via options.constraints.mediaTypes
+            const constraints = {...options.constraints, mediaTypes: (options.constraints && options.constraints.mediaTypes) || ['image/*']};
+            const {component: AssetUploadScreen} = secondaryEditorsRegistry.get('Neos.Neos/Inspector/Secondary/Editors/AssetUploadScreen');
+            const additionalData = {
+                propertyName: this.props.identifier,
+                focusedNodePath: this.props.focusedNodePath,
+                siteNodePath: this.props.siteNodePath,
+                metaData: this.props.imagesOnly ? 'Image' : 'Asset'
+            };
+            this.props.renderSecondaryInspector('ASSET_UPLOAD_MEDIA', () => <AssetUploadScreen type={this.props.imagesOnly ? 'images' : 'all'} constraints={constraints} onComplete={this.afterUpload} additionalData={additionalData}/>);
+        } else {
+            this.assetUpload.chooseFromLocalFileSystem();
+        }
     }
 
     renderControls() {

packages/neos-ui-editors/src/Editors/Image/index.js

@@ -1,10 +1,12 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {$set, $drop, $get} from 'plow-js';
+import {connect} from 'react-redux';
 import mergeClassNames from 'classnames';
 
 import backend from '@neos-project/neos-ui-backend-connector';
 import {neos} from '@neos-project/neos-ui-decorators';
+import {selectors} from '@neos-project/neos-ui-redux-store';
 
 import {PreviewScreen, Controls, ResizeControls} from './Components/index';
 import {Image, CROP_IMAGE_ADJUSTMENT, RESIZE_IMAGE_ADJUSTMENT} from './Utils/index';
@@ -18,6 +20,10 @@ const DEFAULT_FEATURES = {
     upload: true
 };
 
+@connect(state => ({
+    siteNodePath: state?.cr?.nodes?.siteNode,
+    focusedNodePath: selectors.CR.Nodes.focusedNodePathSelector(state)
+}), null, null, {forwardRef: true})
 @neos(globalRegistry => ({secondaryEditorsRegistry: globalRegistry.get('inspector').get('secondaryEditors')}))
 export default class ImageEditor extends Component {
     state = {
@@ -48,7 +54,10 @@ export default class ImageEditor extends Component {
         // I18N key
         fileChooserLabel: PropTypes.string,
 
-        accept: PropTypes.string
+        accept: PropTypes.string,
+
+        siteNodePath: PropTypes.string.isRequired,
+        focusedNodePath: PropTypes.string.isRequired,
     };
 
     static defaultProps = {
@@ -220,7 +229,13 @@ export default class ImageEditor extends Component {
             // set media type constraint to "image/*" if it is not explicitly specified via options.constraints.mediaTypes
             const constraints = {...options.constraints, mediaTypes: (options.constraints && options.constraints.mediaTypes) || ['image/*']};
             const {component: AssetUploadScreen} = secondaryEditorsRegistry.get('Neos.Neos/Inspector/Secondary/Editors/AssetUploadScreen');
-            this.props.renderSecondaryInspector('IMAGE_UPLOAD_MEDIA', () => <AssetUploadScreen type="images" constraints={constraints} onComplete={this.afterUpload}/>);
+            const additionalData = {
+                propertyName: this.props.identifier,
+                focusedNodePath: this.props.focusedNodePath,
+                siteNodePath: this.props.siteNodePath,
+                metaData: 'Image'
+            };
+            this.props.renderSecondaryInspector('IMAGE_UPLOAD_MEDIA', () => <AssetUploadScreen type="images" constraints={constraints} onComplete={this.afterUpload} additionalData={additionalData}/>);
         } else {
             this.previewScreen.chooseFromLocalFileSystem();
             this.setState({isAssetLoading: true});