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

@@ -1482,6 +1482,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_ENABLED = 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_ENABLED %}
+  {{ 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_ENABLED | tojson }}'>
 
   {%- if forms_config %}
     <input type="hidden" name="deposits-config"

invenio_app_rdm/records_ui/templates/semantic-ui/invenio_app_rdm/records/macros/files.html

@@ -32,6 +32,7 @@
 
 
 {% macro preview_file_box(file, pid, is_preview, record, include_deleted) %}
+  {%- set is_remote_file = file.transfer.type == 'R' %}
   <div class="ui accordion panel mb-10 {{record.ui.access_status.id}}" href="#files-preview-accordion-panel">
     <h3 class="active title panel-heading {{ record.ui.access_status.id }} m-0">
       <div
@@ -53,9 +54,22 @@ <h3 class="active title panel-heading {{ record.ui.access_status.id }} m-0">
       aria-labelledby="files-preview-accordion-trigger"
       class="active content preview-container pt-0 {{record.ui.access_status.id}}"
     >
+      {%- if is_remote_file %}
+      <div class="ui info message">
+        <div class="header">
+          {{ _('This file cannot be previewed') }}
+        </div>
+        <ul class="list">
+          <li>{{ _('This file is an external reference and not stored directly in this repository.
+To access its content, please download it and open it locally.') }}
+          </li>
+        </ul>
+      </div>
+      {%- else %}
       <div>
         {{ preview_file('invenio_app_rdm_records.record_file_preview', pid_value=pid, filename=file.key, is_preview=is_preview, include_deleted=include_deleted) }}
       </div>
+      {%- endif %}
     </div>
   </div>
 {%- endmacro %}
@@ -93,6 +107,7 @@ <h3 class="active title panel-heading {{ record.ui.access_status.id }} m-0">
     {% endif %}
     {% for file in files %}
       {% if not file.access.hidden %}
+        {%- set is_remote_file = file.transfer.type == 'R' %}
         {% if is_preview %}
           {%- set file_url_download = url_for(download_endpoint, pid_value=pid, filename=file.key, download=1, preview=1) %}
           {%- set file_url_preview = url_for(preview_endpoint, pid_value=pid, filename=file.key, preview=1, include_deleted=include_deleted_value) %}
@@ -107,16 +122,18 @@ <h3 class="active title panel-heading {{ record.ui.access_status.id }} m-0">
             <div>
               <a href="{{ file_url_download }}">{{ file.key }}</a>
             </div>
+            {%- if not is_remote_file %}
             <small class="ui text-muted font-tiny">{{ file.checksum }}
             <div class="ui icon inline-block" data-tooltip="{{_('This is the file fingerprint (checksum), which can be used to verify the file integrity.')}}">
               <i class="question circle checksum icon"></i>
             </div>
             </small>
+            {%- endif %}
           </td>
-          <td>{{ file.size|filesizeformat(binary=binary_sizes) }}</td>
+          <td>{%- if is_remote_file %}{{_("N/A (external)")}}{%- else -%}{{ file.size|filesizeformat(binary=binary_sizes) }}{%- endif %}</td>
           <td class="right aligned">
             <span>
-              {% if with_preview and file_type|lower is previewable %}
+              {% if with_preview and file_type|lower is previewable and not is_remote_file %}
                 <a role="button" class="ui compact mini button preview-link" href="{{ file_url_preview }}" target="preview-iframe" data-file-key="{{file.key}}">
                   <i class="eye icon" aria-hidden="true"></i>{{_("Preview")}}
                 </a>
@@ -140,7 +157,7 @@ <h3 class="active title panel-heading {{ record.ui.access_status.id }} m-0">
     <h3 class="active title panel-heading {{ record.ui.access_status.id }} m-0">
       <div role="button" id="files-list-accordion-trigger" aria-controls="files-list-accordion-panel" aria-expanded="true" tabindex="0" class="trigger">
         {{ _("Files") }}
-        <small class="text-muted">{% if files %} ({{files|sum(attribute='size')|filesizeformat(binary=binary_sizes)}}){% endif %}</small>
+        <small class="text-muted">{% if files %} ({{files|map(attribute='size', default=0)|sum()|filesizeformat(binary=binary_sizes)}}){% endif %}</small>
         <i class="angle right icon" aria-hidden="true"></i>
       </div>
     </h3>

invenio_app_rdm/records_ui/views/deposits.py

@@ -25,6 +25,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 +388,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
@@ -196,13 +199,14 @@ 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}
                         showMetadataOnlyToggle={permissions?.can_manage_files}
                         allowEmptyFiles={allowEmptyFiles}
                         filesLocked={filesLocked}
+                        fileUploadConcurrency={config.fileUploadConcurrency}
                       />
                     </Overridable>
                   </AccordionField>
@@ -765,6 +769,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,37 @@
+/*
+ *   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-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",