Contrib.social

File upload progress display fails for Claro theme

Open on Drupal.org →
Created on 3 June 2025, 4 days ago

Problem/Motivation

Claro theme fails to update the progress bar and percentage when setting a file upload field to use progress bar.
This occurs because in claro's templates/content-edit/file-managed-file.html.twig renders the input with class file-progress which contains the [UPLOAD_IDENTIFIER] and it's value "last" and "after/outside" of the div with class form-managed-file__main that contains {{ main_items.filename }} {{ main_items|without('filename') }}

For upload progress to work, the hidden input that gets rendered with the UPLOAD_IDENTIFIER for example
<input class="file-progress" data-drupal-selector="edit-field-upload-video-0-inline-entity-form-field-media-video-file-0-upload-identifier" type="hidden" name="field_upload_video[0][inline_entity_form][field_media_video_file][0][UPLOAD_IDENTIFIER]" value="1028750869" data-once="field-group-tabs-validation">
first needs to be rendered in the same div as main_items or the js fails to craft the correct url in the session for the initial PUT when an upload starts causing -1 response for each XHR GET without any kind of error (extremely frustrating) and then - it also needs to be first!

I compared the same field/form using a different core theme olivero which worked perfectly as it uses core templates for file-manage-file and doesn't rewrite them like claro. However being claro is the theme we use for admin and now content editing, upload progress is important for our use case, so it needs to work with claro.

Steps to reproduce

Set claro theme as default or as admin in the appearance settings for drupal, if it is admin also check "Use the administration theme when editing content"
Then add an upload field type to a content type, if just testing use article content type. In the fields display settings make sure progress indicator: bar is set and not throbber.
Go to node/add/article and select a file to upload, the progress bar will not work and the percentage will not update.
**Please note your server must use uploadprogress, on admin/reports/status "Upload progress" near the bottom above "Web server" should have "Enabled (PECL uploadprogress)" - (not sure but APC uploadprogress should work pretty much the same).

A large image file could be used to test, the example field I used was a media upload of a video type (if you use a media field which is unrelated you can't use the media browser widget, use inline entity form simple as the display widget and then to edit the field to use progress bar and not throbber you have to do that through the media entity not the field your adding to say article (as upload progress at least without a patch doesn't work with the media browser widget.

Proposed resolution

Modify claro/templates/content-edit/file-managed-file.html.twig to correct the problem.

Changing:

<div{{ attributes.addClass(classes).removeClass('clearfix') }}>
  <div class="form-managed-file__main">
    {{ main_items.filename }}
    {{ main_items|without('filename') }}
  </div>
// .....
// .....
  {# Every third-party addition will be rendered here. #}
  {{ data|without('preview', 'alt', 'title', 'description', 'display') }}
</div>

To this:

<div{{ attributes.addClass(classes).removeClass('clearfix') }}>
  <div class="form-managed-file__main">
    {{ data.UPLOAD_IDENTIFIER }}
    {{ main_items.filename }}
    {{ main_items|without('filename') }}
  </div>
  // ...
  // ...
  {# Every third-party addition will be rendered here. #}
  {{ data|without('preview', 'alt', 'title', 'description', 'display', 'UPLOAD_IDENTIFIER') }}
</div>

Everything works as expected!

At first I thought perhaps the extra wrapping div with class form-managed-file__main claro theme adds inside the default div with class form-managed-file was the issue but it turned out that extra wrapper doesn't matter, it all comes down to the UPLOAD_IDENTIFIER that has to be before and with main_items no matter what or no go!

Rather than writing a path, for now I just copied and modified the claro's file-managed-file.html.twig to a custom module made the suggested changes and added it in hook_theme in the module to override claro for that template.

Being it works perfect in Olivero and not Claro I would imagine this is absolutely a bug. I do know in the past this wasn't an issue with claro theme, so an update somewhere made these changes in core. When I first started working out getting upload progress to work specifically getting pecl_uploadprogress working I would often switch to claro theme to test upload progress for different fields and it worked fine properly displaying the progress bar and updating the percentage. However now it does not, at least as it currently stands.

Without modification of the template the XHR response for each successful GET {"message":"Starting upload...","percentage":-1}
The upload will complete, you just don't get progress.

With modification the XHR responses look like this {"message":"Uploading... (15.76 MB of 23.21 MB)","percentage":68}

For good measure my current drupal install is:
Drupal: 10.4.7
PHP: 8.3.15
MySQL: 8.4.3
Apache: 2.4.62 (Debian)
Upload progress: PECL uploadprogress

🐛 Bug report
Status

Active

Version

10.4 ✨

Component

Claro theme

Created by

🇺🇸United States sidgrafix

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @sidgrafix
  • Comment 4 days ago →
    🇳🇿New Zealand quietone

    Drupal 10 is in maintenance mode.

    If this problem was discovered on a version of Drupal that is not 11.x, add that information in the issue summary and leave the version at 11.x. In Drupal core changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to the Core change policies → . Also mentioned on the version → section of the list of issue fields documentation.

  • Comment 4 days ago →
    🇮🇳India jeeva r

    jeeva r → made their first commit to this issue’s fork.

  • Comment 4 days ago →
    🇮🇳India jeeva r
  • Merge request !12307File upload progress display fails for Claro theme → (Open) created by Unnamed author
  • Comment 4 days ago →
    🇮🇳India jeeva r
  • Pipeline finished with Success
    4 days ago
    Total: 667s
    #513947
  • Comment 4 days ago →
    🇮🇳India libbna New Delhi, India

    I tried patch #5, but I’m still experiencing the issue.

    Steps I followed to reproduce the issue:

    1. Changed the theme to Claro
    2. Added an upload filed to the content type and in manage form display changed the progress indicator to bar
    3. added a pdf file of 75mb while creating a content

    I've attached a video recording as proof.

    Let me know if I have missed any step. Thanks.

  • Comment 3 days ago →
    🇮🇳India jeeva r

    @libnna, this is worked for me, please refer the screenshot, that i had attached, if your server or system has enabled the "uploadprogress" php extension, then it will render

  • Comment 3 days ago →
    🇮🇳India libbna New Delhi, India

    Hi @jeeva r, yes, "uploadprogress" is enabled and I also checked in the browser inspector — the code is working. However, I was looking at the UI, and the progress bar does not get completed. Please refer to the video I’ve attached for reference. That's why I thought the code is not working.

  • Comment 3 days ago →
    🇺🇸United States sidgrafix

    @libbna.. Hello, the video you provided looks as tho when you upload - the file just about instantly completes uploads (assuming at 75mb, your on a local dev stack and your selecting a file on the hard drive your stack is running on) if that is the case there isn't enough time for upload progress to actually display anything assuming uploadprogress is active on the websites host (APC or PECL)! By default as soon as the upload completes the progress bar and percentage value get removed. Try increasing the max upload size to like 1 or 2 GB and upload a huge file, or connect to the ddev site from another local network device - tablet or phone if you can and test upload that way.

  • Comment 3 days ago →
    🇮🇳India libbna New Delhi, India

    Hi @sidgrafix Thank you for the clear explanation! That actually clarifies a lot — I'll definitely try uploading a larger file (1–2 GB as you suggested) or test from another device on the local network to see the behavior more clearly. Really appreciate you taking the time to share this insight — very helpful!

  • Comment 3 days ago →
    🇮🇳India jeeva r

    @libbna.. the default upload size was 100MB, even if you try to upload more size than 100MB, then it will cause Drupal Ajax Error., Need to check this also... thank u

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024