FEATURE: upload dialog with configurable additional property fields

Classes/GraphQL/Resolver/Type/MutationResolver.php

@@ -362,9 +362,13 @@ public function uploadFile($_, array $variables): array
         $file = $variables['file'];
         $tagId = $variables['tagId'] ?? null;
         $assetCollectionId = $variables['assetCollectionId'] ?? null;
+        $copyrightNotice = $variables['uploadProperties']['copyrightNotice'] ?? '';
+        $title = $variables['uploadProperties']['title'] ?? '';
+        $caption = $variables['uploadProperties']['caption'] ?? '';
 
         $success = false;
         $result = 'ERROR';
+        $assetUuid = '';
 
         $filename = $file->getClientFilename();
         try {
@@ -387,6 +391,16 @@ public function uploadFile($_, array $variables): array
                     $asset = new $className($resource);
 
                     if ($this->persistenceManager->isNewObject($asset)) {
+                        if ($copyrightNotice !== '') {
+                            $asset->setCopyrightNotice($copyrightNotice);
+                        }
+                        if ($title !== '') {
+                            $asset->setTitle($title);
+                        }
+                        if ($caption !== '') {
+                            $asset->setCaption($caption);
+                        }
+
                         if ($tagId) {
                             /** @var Tag $tag */
                             $tag = $this->tagRepository->findByIdentifier($tagId);
@@ -408,6 +422,7 @@ public function uploadFile($_, array $variables): array
                     } else {
                         $result = 'EXISTS';
                     }
+                    $assetUuid = $asset->getIdentifier();
                 } catch (IllegalObjectTypeException $e) {
                     $this->systemLogger->error('Type of uploaded file cannot be stored');
                 }
@@ -419,6 +434,7 @@ public function uploadFile($_, array $variables): array
             'filename' => $filename,
             'success' => $success,
             'result' => $result,
+            'assetId' => $assetUuid,
         ];
     }
 
@@ -431,6 +447,15 @@ public function uploadFiles($_, array $variables): array
     {
         /** @var array<FlowUploadedFile> $files */
         $files = $variables['files'];
+        $uploadProperties = $variables['uploadProperties'];
+        $sortedUploadProperties = [];
+        foreach ($uploadProperties as $property) {
+            $sortedUploadProperties[$property['filename']] = [
+                'copyrightNotice' => $property['copyrightNotice'] ?? '',
+                'title' => $property['title'] ?? '',
+                'caption' => $property['caption'] ?? '',
+            ];
+        }
         $tagId = $variables['tagId'] ?? null;
         $assetCollectionId = $variables['assetCollectionId'] ?? null;
 
@@ -440,6 +465,7 @@ public function uploadFiles($_, array $variables): array
                 'file' => $file,
                 'tagId' => $tagId,
                 'assetCollectionId' => $assetCollectionId,
+                'uploadProperties' => $sortedUploadProperties[$file->getClientFilename()] ?? '',
             ]);
         }
         return $results;
@@ -461,7 +487,8 @@ public function replaceAsset($_, array $variables, AssetSourceContext $assetSour
             'options' => [
                 'generateRedirects' => $generateRedirects,
                 'keepOriginalFilename' => $keepOriginalFilename
-            ]
+            ],
+            'uploadProperties' => $uploadProperties
         ] = $variables;
 
         $assetProxy = $assetSourceContext->getAssetProxy($id, $assetSourceId);
@@ -480,6 +507,7 @@ public function replaceAsset($_, array $variables, AssetSourceContext $assetSour
 
         $success = false;
         $result = 'ERROR';
+        $assetUuid = $asset->getIdentifier();
         $sourceMediaType = MediaTypes::parseMediaType($asset->getMediaType());
         $replacementMediaType = MediaTypes::parseMediaType($file->getClientMediaType());
         $filename = $file->getClientFilename();
@@ -491,6 +519,7 @@ public function replaceAsset($_, array $variables, AssetSourceContext $assetSour
                 'filename' => $filename,
                 'success' => false,
                 'result' => $result,
+                'assetId' => $assetUuid,
             ];
         }
 
@@ -510,8 +539,23 @@ public function replaceAsset($_, array $variables, AssetSourceContext $assetSour
                     'generateRedirects' => $generateRedirects,
                     'keepOriginalFilename' => $keepOriginalFilename
                 ]);
+                $copyrightNotice = $uploadProperties['copyrightNotice'] ?? '';
+                $title = $uploadProperties['title'] ?? '';
+                $caption = $uploadProperties['caption'] ?? '';
+
+                if ($copyrightNotice !== '') {
+                    $asset->setCopyrightNotice($copyrightNotice);
+                }
+                if ($title !== '') {
+                    $asset->setTitle($title);
+                }
+                if ($caption !== '') {
+                    $asset->setCaption($caption);
+                }
+
                 $success = true;
                 $result = 'REPLACED';
+                $assetUuid = $asset->getIdentifier();
             } catch (\Exception $exception) {
                 $this->systemLogger->error(sprintf('Asset %s could not be replaced', $asset->getIdentifier()), [$exception]);
             }
@@ -521,6 +565,7 @@ public function replaceAsset($_, array $variables, AssetSourceContext $assetSour
             'filename' => $filename,
             'success' => $success,
             'result' => $result,
+            'assetId' => $assetUuid,
         ];
     }
 

Classes/GraphQL/Resolver/Type/QueryResolver.php

@@ -182,6 +182,7 @@ public function config($_): array
             'uploadMaxFileSize' => $this->getMaximumFileUploadSize(),
             'uploadMaxFileUploadLimit' => $this->getMaximumFileUploadLimit(),
             'currentServerTime' => (new \DateTime())->format(DATE_W3C),
+            'uploadProperties' => $this->getUploadProperties(),
         ];
     }
 
@@ -208,6 +209,24 @@ protected function getMaximumFileUploadLimit(): int
         return (int)($this->settings['maximumFileUploadLimit'] ?? 10);
     }
 
+    /**
+     * Returns the additionally required fields for the file upload like the copyright notice
+     *
+     * @return string[]
+     */
+    protected function getUploadProperties(): array
+    {
+        $data = [];
+        foreach ($this->settings['upload']['properties'] as $fieldName => $config) {
+            $data[] = [
+                'name' => $fieldName,
+                'show' => $config['show'] ?? false,
+                'required' =>  $config['required'] ?? false,
+            ];
+        }
+        return $data;
+    }
+
     /**
      * Provides a filterable list of asset proxies. These are the main entities for media management.
      */

Configuration/Settings.Features.yaml

@@ -3,6 +3,8 @@ Neos:
     Ui:
       frontendConfiguration:
         Flowpack.Media.Ui:
+          # Use the new upload dialog where the user can add additional information like caption or copy right notice when uploading the asset
+          useNewAssetUpload: true
           # Allow the user to let the system create redirects when assets are replaced or renamed
           createAssetRedirectsOption: true
           # Only allow a single asset collection selection per asset to treat collection like folders

Configuration/Settings.yaml

@@ -2,3 +2,15 @@ Flowpack:
   Media:
     Ui:
       maximumFileUploadLimit: 10
+      # Configure which properties in the new upload dialog are show and which are required
+      upload:
+        properties:
+          copyrightNotice:
+            show: true
+            required: false
+          title:
+            show: true
+            required: false
+          caption:
+            show: true
+            required: false

Readme.md

@@ -148,6 +148,29 @@ Neos:
         Flowpack.Media.Ui:
           createAssetRedirectsOption: false
 ```
+
+### Add additional field to the upload dialog
+
+You can add additional fields to the upload dialog to add property data while uploading a file. Add the moment the fields title, caption and copyright notice can be used. 
+This additional the fields can be configured to be required for the upload. See the following settings example:
+
+
+```yaml
+Flowpack:
+  Media:
+    Ui:
+      upload:
+        properties:
+          copyrightNotice:
+            show: true
+            required: true
+          title:
+            show: true
+            required: false
+          caption:
+            show: true
+            required: false
+```
 
 ## Architecture
 

Resources/Private/GraphQL/schema.root.graphql

@@ -119,6 +119,7 @@ type Mutation {
         assetSourceId: AssetSourceId!
         file: Upload!
         options: AssetReplacementOptionsInput!
+        uploadProperties: UploadProperties
     ): FileUploadResult!
 
     editAsset(
@@ -142,7 +143,7 @@ type Mutation {
 
     uploadFile(file: Upload!, tagId: TagId, assetCollectionId: AssetCollectionId): FileUploadResult!
 
-    uploadFiles(files: [Upload!]!, tagId: TagId, assetCollectionId: AssetCollectionId): [FileUploadResult!]!
+    uploadFiles(files: [Upload!]!, tagId: TagId, assetCollectionId: AssetCollectionId, uploadProperties: [UploadProperties]): [FileUploadResult!]!
 
     importAsset(id: AssetId!, assetSourceId: AssetSourceId!): Asset!
 
@@ -164,6 +165,13 @@ type Config {
     uploadMaxFileSize: FileSize!
     uploadMaxFileUploadLimit: Int!
     currentServerTime: DateTime!
+    uploadProperties: [UploadPropertiesConfig]
+}
+
+type UploadPropertiesConfig {
+    name: String!
+    show: Boolean!
+    required: Boolean!
 }
 
 """
@@ -335,6 +343,7 @@ type FileUploadResult {
     filename: Filename!
     success: Boolean!
     result: String!
+    assetId: AssetId!
 }
 
 """
@@ -517,6 +526,13 @@ Variant Name
 """
 scalar VariantName
 
+input UploadProperties {
+    filename: String!
+    copyrightNotice: String
+    title: String
+    caption: String
+}
+
 schema {
     query: Query
     mutation: Mutation

Resources/Private/JavaScript/asset-collections/typings/AssetCollection.ts

@@ -1,5 +1,6 @@
 type AssetCollectionType = 'AssetCollection';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 interface AssetCollection extends GraphQlEntity {
     __typename: AssetCollectionType;
     readonly id: string;

Resources/Private/JavaScript/asset-collections/typings/TreeNodeProps.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 interface TreeNodeProps {
     title?: string;
     label?: string;

Resources/Private/JavaScript/asset-sources/typings/AssetSource.ts

@@ -2,6 +2,7 @@ type AssetSourceType = 'AssetSource';
 
 type AssetSourceId = string;
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 interface AssetSource extends GraphQlEntity {
     __typename: AssetSourceType;
     readonly id: AssetSourceId;

Resources/Private/JavaScript/asset-tags/typings/Tag.ts

@@ -1,5 +1,6 @@
 type TagType = 'Tag';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 interface Tag extends GraphQlEntity {
     __typename: TagType;
     id: string;

Resources/Private/JavaScript/asset-upload-screen/Readme.md

@@ -0,0 +1 @@
+This subpackage provides the media upload screen / secondary inspector for the Neos content module.

Resources/Private/JavaScript/asset-upload-screen/index.js

@@ -0,0 +1 @@
+export * from './src';

Resources/Private/JavaScript/asset-upload-screen/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@media-ui/asset-upload-screen",
+  "version": "1.0.0",
+  "license": "GNU GPLv3",
+  "private": true,
+  "engines": {
+    "node": ">=12"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.3.13",
+    "@media-ui/core": "workspace:*",
+    "@media-ui/feature-asset-upload": "workspace:*",
+    "@media-ui/media-module": "workspace:*",
+    "apollo-upload-client": "^14.1.3",
+    "react": "^17.0.2",
+    "react-redux": "^5.1.2",
+    "recoil": "^0.7.7"
+  },
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "not dead",
+    "supports async-functions"
+  ]
+}