Feature detection for ability to drop file over HTML file input

Question

Can we detect whether a browser supports dropping a file over an <input type="file" />?

For example, this is possible in Chrome but not in IE8.

Modernizr.draganddrop is a possibility but is it the right choice? I'm not adding any custom drag/drop event handlers.

Update

To verify Joe's answer here's a jQuery example that should stop the file drop. Verified in Chrome and Firefox.

$yourFileInput.on('drop', function() {
    return false; // if Joe's explanation was right, file will not be dropped
});

I'm enhancing an area of the page to accept a file, which will then be uploaded (using iframe strategy by necessity). Transparent input receives file and then gets moved to a form and posted. I don't want to add the input for browsers which don't support the functionality. — Danyal Aytekin, Oct 26 '12 at 11:55
so you are trying to create an IE8-only fix for something that cannot be fixed in the other browsers? :-) — John Dvorak, Oct 26 '12 at 12:02
You could set the title to something that doesn't seem out-of-place. — John Dvorak, Oct 26 '12 at 12:05
Thanks for the suggestion. I may take that route if I can't feature detect, but I'm still interested in knowing if its possible. — Danyal Aytekin, Oct 26 '12 at 12:06

score 2 · Accepted Answer · edited May 23 '17 at 12:06

2

I think the answer to Detecting support for a given JavaScript event? may help you. Adjusting the code to test against Input instead of Div, and testing for the "Drop" event seems to work fine for me.

Reproduced here so you don't have to click through (and adjusted slightly, since it seems you only need to detect this one feature):

function isEventSupported(eventName) {
  var el = document.createElement('input');
  eventName = 'on' + eventName;
  var isSupported = (eventName in el);
  if (!isSupported) {
    el.setAttribute(eventName, 'return;');
    isSupported = typeof el[eventName] == 'function';
  }
  el = null;
  return isSupported;
}
if(isEventSupported('drop')){
  //Browser supports dropping a file onto Input
} else {
  //Fall back, men!
}

edited May 23 '17 at 12:06

Community

1
1

answered Oct 27 '12 at 21:22

joequincy

1,395
10
21

This is a nice approach. Are you convinced that these browsers actually use the standard 'drop' event for files being dropped over the input, rather than something home-baked? – Danyal Aytekin Oct 29 '12 at 10:51
Great, I've confirmed that you're right, by returning 'false' from the drop event and observing that the drop doesn't work. Thanks Joe. – Danyal Aytekin Oct 29 '12 at 10:58
Always welcome! Also suggest upvoting the answer on the other page, because the approach belongs to @kangax and I only found it because of that post :) – joequincy Oct 29 '12 at 15:17

Feature detection for ability to drop file over HTML file input

1 Answers1

Linked