Problem/Motivation

Drupal's managed_file form #type allows files of any size to be sent to the server. A server-size limit exists, but the user is not informed of the issue until waiting for the possibly large file to be uploaded. Testing a file's size on the client prior to upload is totally doable in the majority of browsers currently in use, and it is possible to gracefully skip this check, falling back to the current behavior, on IE 8 and 9.

Proposed resolution

Make the following changes:

  • Determine the maximum allowed size for a given managed_file form element, including as configured on file field widgets, and include this amount as a data- attribute of the file input.
  • Add javascript to compare the size of files to this attribute, and prevent form submission if appropriate.

User interface changes

This implies a new validation error, originating in JavaScript, may be presented to the user. Its details would need to be worked out.

API changes

None anticipated

Data model changes

None anticipated

Beta phase evaluation

Reference: https://www.drupal.org/core/beta-changes
Issue category Feature request because it is new functionality
Issue priority Normal because it only enhances efficiency and UX
Unfrozen changes Frozen because it is a feature and would require additional JavaScript and php logic
CommentFileSizeAuthor
#33 2533896-33-make-a-of-file-size-a-baked-in-client-side-validation.patch4.3 KBoleksandr.s
#30 2533896-30-make-a-of-file-size-a-baked-in-client-side-validation.patch4.13 KBoleksandr.s
#23 2533896-23.patch10.2 KBacbramley
#19 interdiff.txt9.88 KBtim bozeman
#19 2533896-19.patch10.59 KBtim bozeman
#18 2533896-18.patch7.09 KBdouggreen
#15 2533896-15.patch7.37 KBanas_maw
#14 2533896-14.patch7.38 KBanas_maw
#13 2533896-13.patch7.38 KBanas_maw

Issue fork drupal-2533896

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mbaynton’s picture

mbaynton
he/him
Location Minneapolis, US
commented
Related issues: +#77245: Provide a common API for displaying JavaScript messages
mbaynton’s picture

mbaynton
he/him
Location Minneapolis, US
commented
Version: 8.0.x-dev » 8.1.x-dev
Issue summary: View changes
mbaynton’s picture

mbaynton
he/him
Location Minneapolis, US
commented

http://jsfiddle.net/3jeq6nLL/2/ illustrates a more flexible way to respond when it is determined a file is too large. For example, using this method, it would be possible for a script capable of generating a rescaled version of an image to do that instead of stopping the submission dead.

mbaynton’s picture

mbaynton
he/him
Location Minneapolis, US
commented
Related issues: +#2235977: JS Client-side file validation is broken (because ajaxPageState is broken?)

All js file validation is currently broken by 2235977: the selectors in settings.file.elements match 0 DOM elements, so event listeners are not added to the inputs, It will not be possible to implement this using the same patterns as the file extension validation until this one is resolved.

dave reid’s picture

dave reid
he/him
Primary language English
Location Nebraska USA
commented
Issue tags: +D8Media

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.0-beta1 was released on March 2, 2016, which means new developments and disruptive changes should now be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

kevin.dutra’s picture

kevin.dutra commented
Status: Active » Postponed

Updating status, since this can't be done until #2235977: JS Client-side file validation is broken (because ajaxPageState is broken?) is resolved.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

anas_maw’s picture

anas_maw commented
StatusFileSize
new 2533896-13.patch7.38 KB

Here is a patch to start from, still needs many improvements but it's working fine on 8.6.x.
To get this patch works, first you should apply this patch #2235977-128: JS Client-side file validation is broken (because ajaxPageState is broken?)

anas_maw’s picture

anas_maw commented
StatusFileSize
new 2533896-14.patch7.38 KB

Updated patch

anas_maw’s picture

anas_maw commented
StatusFileSize
new 2533896-15.patch7.37 KB

Updated patch

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

douggreen’s picture

douggreen commented
StatusFileSize
new 2533896-18.patch7.09 KB

Rerolled, this applies to 8.7.x after https://www.drupal.org/project/drupal/issues/2235977#comment-13305251.

tim bozeman’s picture

tim bozeman commented
Issue tags: -JavaScript +JavaScript
StatusFileSize
new 2533896-19.patch10.59 KB
new interdiff.txt9.88 KB

I like it!

I think some of these testFile variables need to plural so that listing multiple files works. Also, can we conditionally show each message please?

douggreen’s picture

douggreen commented

nit: @returns should be @return

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

acbramley’s picture

acbramley commented
StatusFileSize
new 2533896-23.patch10.2 KB

Here's a reroll of #19 against Patch 139 on #2235977: JS Client-side file validation is broken (because ajaxPageState is broken?)

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

diaodiallo’s picture

diaodiallo commented

Hi all,

I am having this same issue with Drupal 10.2.0, when I upload a file which too large (150mb) than the maximum (10mb) nothing happen but was supposed to have error message that the file is larger than allowed. However a size like 15mb trigger the error message.

Thanks for any helping idea.

oleksandr.s’s picture

oleksandr.s commented
Status: Postponed » Needs review
Issue tags: +D10, +file upload
StatusFileSize
new 2533896-30-make-a-of-file-size-a-baked-in-client-side-validation.patch4.13 KB

Hi, here is patch for Drupal version 10.3.1. Should work with 10x versions.
Probably also works with 11x versions.

Patch provides client side validation to check file size.

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Fixes should be in MRs against 11.x

Thanks

Did not review.

oleksandr.s opened merge request !10914

oleksandr.s’s picture

oleksandr.s commented
StatusFileSize
new 2533896-33-make-a-of-file-size-a-baked-in-client-side-validation.patch4.3 KB

Thank you for advice, I've created issue fork and created MR.

Also, updated a patch for version 10.3.1

oleksandr.s’s picture

oleksandr.s commented
Status: Needs work » Needs review
smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs tests

Left comments on MR but tagging for test coverage

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

liam morland made their first commit to this issue’s fork.

shriaas’s picture

shriaas
Location Pune
commented

I am facing this issue with my webfrom, the patch worked for me with a minor change.
My version of webfrom is use the old syntax: $element['#upload_validators']['file_validate_size'] instead of $element['#upload_validators']['FileSizeLimit']['fileLimit'].
I am not sure if it would be a good idea to add this as a check in the MR, since this is deprecated and will be removed in 11.0.0 (https://www.drupal.org/node/3363700), but in case someone wants to fix this for their Drupal 10 or older site, replace these lines in /core/modules/file/src/Element/ManagedFile.php: 

if (isset($element['#upload_validators']['FileSizeLimit']['fileLimit'])) {
      $element['upload']['#attached']['drupalSettings']['file']['max_size'] = $element['#upload_validators']['FileSizeLimit']['fileLimit'];
      $element['upload']['#attached']['drupalSettings']['file']['human_max_size'] = ByteSizeMarkup::create($element['#upload_validators']['FileSizeLimit']['fileLimit']);

With these: 

    if (isset($element['#upload_validators']['FileSizeLimit']['fileLimit']) || isset($element['#upload_validators']['file_validate_size'][0])) {
      $max_size = $element['#upload_validators']['FileSizeLimit']['fileLimit'] ?? $element['#upload_validators']['file_validate_size'][0];
      $element['upload']['#attached']['drupalSettings']['file']['max_size'] = $max_size;
      $element['upload']['#attached']['drupalSettings']['file']['human_max_size'] = ByteSizeMarkup::create($max_size);
    }

And the rest of the patch should work

neptune-dc’s picture

neptune-dc commented

I will look into building some tests.

neptune-dc’s picture

neptune-dc commented
Status: Needs work » Needs review

I added some tests and fixed the broken test!

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs subsystem maintainer review

So as a feature request think it's meant to be additive. If it broke existing tests then this could break contrib/custom work I'd imagine so we may need to do some work around BC.

Tagging for sub-maintainer to make sure they weigh in too