Determine if browser is drag-and-drop capable?

Question

I'm implementing jQuery File Upload and trying to figure out the best way to detect whether the client can support drag & drop so I can render something like 'Drag & drop files here to upload' only if they can actually do that.

In the plugin code I can see a function isXHRUploadCapable which almost seems to correlate with drag & drop support, but I think that's more coincidental than anything. (It uses iFrames to post the upload rather than XMLHTTPRequest uploads for IE and Opera). Couldn't see anything that will let me know if drag-drop is supported, so I suspect it's just either an event happens or doesn't.

The docs say "Drag & Drop is not supported on the Windows version of Safari. MSIE and Opera have no support for Drag & Drop, multiple file selection or upload progress indication." So, perhaps, just the Windows version of Safari supports XMLHTTPRequest uploads, but not drag & drop?

Anyway - I am trying to figure out the best way to detect whether or not a browser will support drag & drop uploads using this plugin, and I'm not sure how I would do this. Is drag and drop functionality something I can easily test? How would I do that? Is this functionality something that's going to depend on a browser, or on whether Jquery Upload specifically supports it for that browser?

Duplicate question: http://stackoverflow.com/questions/2311887/how-to-determine-presence-of-html5-dragndrop-file-upload-api-like-the-one-fro — Doug Domeny, Oct 23 '13 at 18:16

score 6 · Accepted Answer · answered Mar 13 '11 at 16:57

6

Modernizr is the de-facto browser support detection plugin and supports drag-and-drop detection.

In Modernizr 1.5, we test for the following drag events:

drag

dragstart

dragenter

dragover

dragleave

dragend

drop

Source

answered Mar 13 '11 at 16:57

Andy

17,423
9
52
69

2

This seems great. However, it is `Modernizer.draganddrop` is reporting `true` on IE8 and it is definitely not supported... at least by jquery file upload. Is there possibly some difference between the existence of these events and the ability to support drag & drop file detection? – Jamie Treworgy Mar 13 '11 at 17:35
8

OK checking for drag & drop events isn't enough, this seems to do it though: `if (window.FileReader && Modernizr.draganddrop)` – Jamie Treworgy Mar 13 '11 at 17:57

score 3 · Answer 2 · answered Aug 07 '19 at 23:18

Modernizr 3.0.0 dropped draganddrop detection because it was unreliable: https://github.com/Modernizr/Modernizr/blob/master/CHANGELOG.md#v300

Per https://github.com/Modernizr/Modernizr/issues/57#issuecomment-35831605 you can use the Wordpress approach as a workaround:

var draganddrop = "draggable" in document.createElement("div") && !/Mobile|Android|Slick\/|Kindle|BlackBerry|Opera Mini|Opera Mobi/i.test(navigator.userAgent)

score 2 · Answer 3 · edited Feb 13 '13 at 16:11

I am in the same issue and tried with checking both window.FileReader && Modernizr.draganddrop as you said. This is my test output:

IE window.FileReader==undefined && Modernizr.draganddrop==true
OPERA window.FileReader==window.FileReader && Modernizr.draganddrop==false
CHROME window.FileReader==window.FileReader && Modernizr.draganddrop==true
FIREFOX window.FileReader==window.FileReader && Modernizr.draganddrop==true
SAFARI window.FileReader==undefined && Modernizr.draganddrop==true

So, your condition takes out the D&D non-supported browsers IE and OPERA. But it additionally drops SAFARI which supports drag and drop.

In this case we can add jQuery.browser checking too to drop IE and OPERA.

score 1 · Answer 4 · answered Oct 23 '13 at 19:59

1

The current version of Modernizr, 2.6.2, includes a test for FileReader.

Modernizr.filereader && Modernizr.draganddrop

The filereader test is under the Non-core detects section. draganddrop is in the HTML5 section. Visit the Modernizr download page.

answered Oct 23 '13 at 19:59

Doug Domeny

4,410
2
33
49

score 0 · Answer 5 · answered Mar 22 '14 at 17:34

Its a bit trickier. iOS7 reports that it supports both FileReader and draganddrop pictures uploading. Since I was looking for a more general file upload that I couldn't do with iOS, I needed another answer.

Modernizr issue 57 at heretalks about the issue. Now with windows 8 allowing both touch and mouse, its tricky. There's code in the middle by chriskeeble that I used successfully. It relies on Modernizr and agent detection.

Determine if browser is drag-and-drop capable?

5 Answers5

Linked