On Drupal 7 and 8 when selecting a file with an invalid file extension using the managed file field, javascript's onchange event callback Drupal.file.validateExtension() is called. This callback:

  1. removes error messages that were possible inserted into the DOM earlier,
  2. detects a wrong file extension,
  3. inserts a new error message into the DOM,
  4. sets the field's value to an empty string and
  5. stops propagating the event.

On Internet Explorer 11 programmatically resetting the value using this.value = ''; fires the onchange event again. This time:

  1. the previous error message is being removed (the user will never know what went wrong),
  2. the field has no value, so no wrong file extension is being detected and
  3. the event propagating is not being stopped (other onchange callbacks like D8's Drupal.file.triggerUploadButton will get fired).

This can be tested using http://jsfiddle.net/lmeurs/2rEzF/ or with Drupal using http://simplytest.me/project/drupal: set permissions for anonymous users to create articles so you can add articles from different browsers (ie. using http://browserstack.com) and test with the image field.

Sidenote: On < IE11 it seems not possible to programmatically reset the field's value.

Possible solution

The best fix I can think of is to immediately exit Drupal.file.validateExtension() when the field has no value. Use something like:

if (!this.value) return;
Files: 
CommentFileSizeAuthor
#22 core-7-52-js-file-extension-validate-2301527-22.patch648 bytesaaron.ferris
#14 core-js-file-extension-validate-2301527-13.patch1.02 KBlmeurs
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 92,774 pass(es). View
#12 core-js-file-extension-validate-2301527-12-D7.patch945 byteslmeurs
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Unable to apply patch core-js-file-extension-validate-2301527-12-D7.patch. Unable to apply patch. See the log in the details link for more information. View
#10 core-js-file-extension-validate-2301527-10.patch593 bytesnod_
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 90,090 pass(es). View

Comments

MyAudioDNA’s picture

Issue summary: View changes
MyAudioDNA’s picture

Issue summary: View changes
DrColossos’s picture

I can confirm this behavior. I don't know why this has occured, but this is a quite new issue with IE for us. We had a working installation from a customer and suddenly encountered this issue. The described problem does indeed occur as described above. The proposed code does work in IE as well as other browsers. This also goes for the latest 7.x release

DrColossos’s picture

Status: Active » Needs work
DrColossos’s picture

Component: file system » javascript
ori.volfo’s picture

Issue summary: View changes

So, for now there is no solution that does not involves changing Drupal core files?

nod_’s picture

Version: 8.0-alpha13 » 8.0.x-dev
Status: Needs work » Postponed (maintainer needs more info)

Can you post steps to replicate (including if you're using a special format or just the ones by default) and a description of the error (a screenshot possibly?).

Thanks.

nod_’s picture

Issue summary: View changes
Status: Postponed (maintainer needs more info) » Active

Text from issue summary got removed, restored last version.

lmeurs’s picture

@ori.volfo: Opposed to PHP functions Javascript functions can easily be overwritten. You could load a modified version of the function from your theme (this only effects the front end theme) or a custom module.

But be careful, this might break your upload forms when functionality of the original function changes in the future (though for D7 not very likely).

nod_’s picture

Status: Active » Needs review
Issue tags: +Needs manual testing
FileSize
593 bytes
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 90,090 pass(es). View

The issue summary is awesome :)

Got a patch, haven't even run the thing so it really need testing.

DrColossos’s picture

It's quite similar to what the proposed solution is, only a little cleaner (more restrictive?). We have this successfully in production, so I consider this a good fix.

lmeurs’s picture

FileSize
945 bytes
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Unable to apply patch core-js-file-extension-validate-2301527-12-D7.patch. Unable to apply patch. See the log in the details link for more information. View

I just tried the D8 patch from #10 using simplytest.me, but this unfortunately does not work well. Without the patch the throbber only appears and disappears. With the patch the warning message also flashes shortly, so we are getting somewhere! :-) Maybe the event should be canceled before exiting the function? (cannot try this at the moment since I do not have access to a D8 dev installation)

In the meanwhile I attached a patch for D7.

Status: Needs review » Needs work

The last submitted patch, 12: core-js-file-extension-validate-2301527-12-D7.patch, failed testing.

lmeurs’s picture

Status: Needs work » Needs review
FileSize
1.02 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 92,774 pass(es). View

All it needed was an immediate stop of event propagation, patch attached.

BTW: Please do not get distracted by other D7 + D8 bugs with the file field:

  1. Duplicate error messages (I think D8 only),
  2. Server side generated error messages which are not being removed, see #1792032: File validation error message not removed after subsequent upload of valid file and
  3. The client side file validator that "seizes working" after ie. a server side error message, see #2235977: JS Client-side file validation is broken (because ajaxPageState is broken?).
DrColossos’s picture

That looks better than the previous patches. I think this sould be merged into dev since it's a usefull fix no matter what.

swetashahi’s picture

Assigned: Unassigned » swetashahi
swetashahi’s picture

Assigned: swetashahi » Unassigned
Status: Needs review » Needs work

This patch cannot be applied. Moving to needs work.

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

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should 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.

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

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should 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.

kristofferwiklund’s picture

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

I could not reproduce this on 8.3.x or 8.2.x. At least I get an error message saying that the file type is wrong.

But the bug is there for 7.50. As end user I do not get any error message for IE11, (but for Chrome I get one)

aaron.ferris’s picture

The attached patch from #12 does indeed resolve this issue in my instance of Drupal 7, but the patch didn't apply cleanly for me in 7.52. Could just be my implementation but i'm attaching a re-roll in case anyone else comes across the same for this version.