CODEWITHSUNDEEP
jqueryfile-uploaddrag-and-drop
Jamie Treworgy
Jamie Treworgy

Reputation: 24334

Determine if browser is drag-and-drop capable?

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?

Upvotes: 6

Views: 5179

Answers (5)

Gili
Gili

Reputation: 89983

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)

Upvotes: 3

Mark Kasson
Mark Kasson

Reputation: 1710

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.

Upvotes: 0

Doug Domeny
Doug Domeny

Reputation: 4470

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.

Upvotes: 1

Meer
Meer

Reputation: 21

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.

Upvotes: 2

Andy
Andy

Reputation: 17771

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

Upvotes: 6

Related Questions