Problem/Motivation
JavaScript validations applied to file uploads, such as allowed extension restrictions, do not work. The high-level issue is that the validation criteria are represented in a JavaScript object, drupalSettings.file.elements, but it references incorrect element ids for the file inputs.
I thought this was perhaps related to #2179655: JS file validation broken, but AFAICT that's not the case. The symptom is the same though.
Unfortunately, file.js seems to be correct.
Try uploading an image at node/add/article inside CKEditor. file.js causes JS errors. Specifically on
this.value.length > 0Because
this.value, which in turn is because this == the <div>, not the <input>.That, in turn, is because of
$context.find(selector) in file.js receives selector === '#edit-fid-upload', instead of '#edit-fid-upload--2'. Therefor it listens for events at $context (the <div>) rather than at <input>.That, again, in turn, is because
drupalSettings.file.elements does not contain '#edit-file-upload--2'. So either ajaxPageState is broken again/in yet another way, or the HTML ID being generated for the file upload input element is somehow wrong.Proposed resolution
Rather than storing validation information for each file field in a JavaScript object that is not tightly associated to the input fields, store the validation information as data- attributes in the file input markup.
User interface changes
None.
API changes
None.
Beta phase evaluation
| Issue category | Bug because this is a basic input validation that is present in Drupal 7, with broken code present in 8. |
|---|---|
| Issue priority | Major because this affects all file upload fields for all users. |
| Prioritized changes | Prioritized because it is a bug fix and an improvement to basic user experience |
| Disruption | Non-disruptive outside of core. If changed by moving to validations against data- attributes, the contents of the JavaScript settings.file.elements would change, but currently the (only) data it contains is the allowed extensions so it's very unlikely any other code would have been interested in using this structure. |