deposit-ui: uppy uploader ui feature

* addresses the UI part of RFC 0072

* adds feature flag `APP_RDM_DEPOSIT_NG_FILES_UI` to enable the Uppy uploader UI

* inveniosoftware/rfcs#91

Author: mirekys

invenio_app_rdm/config.py

@@ -1476,6 +1476,8 @@ def github_link_render(record):
 APP_RDM_SUBCOMMUNITIES_LABEL = "Subcommunities"
 """Label for the subcommunities in the community browse page."""
 
+APP_RDM_DEPOSIT_NG_FILES_UI = False
+"""Feature toggle to enable the new Uppy uploader for the deposit form."""
 
 RDM_DETAIL_SIDE_BAR_MANAGE_ATTRIBUTES_EXTENSION_TEMPLATE = None
 """Side bar manage attributes extension template."""

invenio_app_rdm/records_ui/templates/semantic-ui/invenio_app_rdm/records/deposit.html

@@ -5,6 +5,9 @@
   {%- block css %}
   {{ super() }}
   <link rel="stylesheet" type="text/css" href="/communities/{{community.slug}}/community-theme-{{ community.revision_id }}.css">
+  {%- if config.APP_RDM_DEPOSIT_NG_FILES_UI %}
+  {{ webpack['uppy-file-uploader.css'] }}
+  {%- endif %}
   {%- endblock %}
 {%- endif %}
 
@@ -49,6 +52,8 @@
           value='{{ config.USERS_RESOURCES_GROUPS_ENABLED | tojson }}'>
   <input type="hidden" name="records-resources-allow-empty-files"
           value='{{ config.RECORDS_RESOURCES_ALLOW_EMPTY_FILES | tojson }}'>
+  <input type="hidden" name="deposits-use-uppy-ui"
+          value='{{ config.APP_RDM_DEPOSIT_NG_FILES_UI | tojson }}'>
 
   {%- if forms_config %}
     <input type="hidden" name="deposits-config"

invenio_app_rdm/records_ui/views/deposits.py

@@ -10,7 +10,6 @@
 # under the terms of the MIT License; see LICENSE file for more details.
 
 """Routes for record-related pages provided by Invenio-App-RDM."""
-
 from copy import deepcopy
 
 from flask import current_app, g, redirect
@@ -25,6 +24,7 @@
 from invenio_rdm_records.resources.serializers import UIJSONSerializer
 from invenio_rdm_records.services.schemas import RDMRecordSchema
 from invenio_rdm_records.services.schemas.utils import dump_empty
+from invenio_records_resources.proxies import current_transfer_registry
 from invenio_records_resources.services.errors import PermissionDeniedError
 from invenio_search.engine import dsl
 from invenio_vocabularies.proxies import current_service as vocabulary_service
@@ -387,6 +387,8 @@ def get_form_config(**kwargs):
         publish_modal_extra=current_app.config.get(
             "APP_RDM_DEPOSIT_FORM_PUBLISH_MODAL_EXTRA"
         ),
+        default_transfer_type=current_transfer_registry.default_transfer_type,
+        transfer_types=list(current_transfer_registry.get_transfer_types()),
         **kwargs,
     )
 

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/deposit/RDMDepositForm.js

@@ -20,6 +20,7 @@ import {
   DeleteButton,
   DepositStatusBox,
   FileUploader,
+  UppyUploader,
   FormFeedback,
   IdentifiersField,
   PIDField,
@@ -114,13 +115,15 @@ export class RDMDepositForm extends Component {
       allowRecordRestriction,
       groupsEnabled,
       allowEmptyFiles,
+      useUppy,
     } = this.props;
 
     // Adding section id to custom fields UI, to be used for accordions
     const customFieldsUI = this.config.custom_fields.ui.map((section) => ({
       ...section,
       id: section.section.toLowerCase().replace(/\s+/g, "-") + "-section",
     }));
+    const UploaderField = useUppy ? UppyUploader : FileUploader;
 
     return (
       <Overridable
@@ -136,13 +139,15 @@ export class RDMDepositForm extends Component {
         groupsEnabled={groupsEnabled}
         allowEmptyFiles={allowEmptyFiles}
         customFieldsUI={customFieldsUI}
+        useUppy={useUppy}
       >
         <DepositFormApp
           config={this.config}
           record={record}
           preselectedCommunity={preselectedCommunity}
           files={files}
           permissions={permissions}
+          useUppy={useUppy}
         >
           <Overridable
             id="InvenioAppRdm.Deposit.FormFeedback.container"
@@ -196,7 +201,7 @@ export class RDMDepositForm extends Component {
                       filesLocked={filesLocked}
                       allowEmptyFiles={allowEmptyFiles}
                     >
-                      <FileUploader
+                      <UploaderField
                         isDraftRecord={!record.is_published}
                         quota={this.config.quota}
                         decimalSizeDisplay={this.config.decimal_size_display}
@@ -765,6 +770,7 @@ RDMDepositForm.propTypes = {
   permissions: PropTypes.object,
   filesLocked: PropTypes.bool,
   allowEmptyFiles: PropTypes.bool,
+  useUppy: PropTypes.bool,
 };
 
 RDMDepositForm.defaultProps = {

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/deposit/index.js

@@ -21,6 +21,7 @@ ReactDOM.render(
       preselectedCommunity={getInputFromDOM("deposits-draft-community")}
       files={getInputFromDOM("deposits-record-files")}
       config={getInputFromDOM("deposits-config")}
+      useUppy={getInputFromDOM("deposits-use-uppy-ui")}
       permissions={getInputFromDOM("deposits-record-permissions")}
       filesLocked={getInputFromDOM("deposits-record-locked-files")}
       recordRestrictionGracePeriod={getInputFromDOM(

invenio_app_rdm/theme/assets/semantic-ui/less/invenio_app_rdm/file_uploader/uppy.less

@@ -0,0 +1,49 @@
+/*
+ *   Copyright (C) 2025 CESNET
+ *
+ * Invenio RDM Records is free software; you can redistribute it and/or modify
+ * it under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+@import "@uppy/core/dist/style.min.css";
+@import "@uppy/dashboard/dist/style.min.css";
+@import "@uppy/image-editor/dist/style.min.css";
+
+.uppy-Dashboard-AddFiles {
+  padding: 1.2rem;
+}
+.uppy-Dashboard-AddFiles-info {
+  display: block;
+}
+
+.uppy-Dashboard-note {
+  padding-top: 3rem;
+}
+
+.uppy-Dashboard-inner {
+  border-radius: 0 0 5px 5px;
+}
+
+.uppy-DashboardTab[data-uppy-acquirer-id="MyDevice"] {
+  // .sr-only
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  word-wrap: normal;
+  border: 0;
+}
+
+.uppy-Dashboard-innerWrap {
+  height: 300px;
+
+  &:has(#uppy-DashboardContent-panel--editor) {
+    height: 500px;
+  }
+}
+
+.uppy-DashboardContent-bar, .uppy-StatusBar {
+  z-index: 10;
+}

invenio_app_rdm/theme/webpack.py

@@ -40,6 +40,7 @@
                 "invenio-domains-administration": "./js/invenio_app_rdm/administration/domains/index.js",
                 "invenio-audit-logs-administration": "./js/invenio_app_rdm/administration/auditLogs/index.js",
                 "invenio-communities-browse": "./js/invenio_app_rdm/subcommunity/browse.js",
+                "uppy-file-uploader": "./less/invenio_app_rdm/file_uploader/uppy.less",
             },
             dependencies={
                 "@babel/runtime": "^7.9.0",