• Html Drag Drop File Upload
• Drag And Drop Javascript

In a previous post, we showed you how to upload several files using the input element. In Firefox 3.6, you can let your users drag and drop files directly into your web page, without going through the file picker. To use drag and drop, you first need to tell the browser that a given element can. Drag and Drop File Uploads with Javascript by Sean McGary on Sep 30, 2012 The other day I was working on building a file upload interface in Javascript where a user could drag and drop files to upload to a server. Now our drop event will work in Chrome, Firefox, and Safari. A lightweight yet powerful jQuery plugin to create an HTML5 file uploader that features drag'n'drop, ajax uploading, multi-file upload, progress bar, useful options & event handlers and much more. The plugin provide the basic file upload functionality, while leaving the styling up to you. How to use it: 1. Create a standard file input for the.

I have a drop zone where I want to detect whether the dragged item is a folder or file. In chrome I achieved this by using

In firefox it is not possible to use the above solution(webkit) and after spending many hours trying to solve this I came up with the following solutions (and failed)

1. I check whether the dragged item has no type and no size as below and in most cases it is working as expected. From what I've read this is not efficient and not successful all the times as some files may not have file extension so I try to read file as binary string(readAsBinaryString) or readAsArrayBuffer with FileReader API and catch the exception in case the item is not readable but the exception is never thrown.

2. In the following solution i am trying to use mozGetDataAt which is the corresponding webkitGetAsEntry (??? Not 100% about this please correct me if i am wrong) but i am getting a security exception.

And the exception is :

Permission denied for http://localhost:8080 to create wrapper for object of class UnnamedClass

Is there actually a way to do this in firefox? I do not want to rely on third party libraries or server side processing if possible. Any suggestions-comments would be much appreciated.

3 Answers

It IS possible in Firefox 42 and upwards (https://developer.mozilla.org/en-US/Firefox/Releases/42, https://nightly.mozilla.org/):

e.g. by using Drang'n'Drop events: e.dataTransfer.getFilesAndDirectories();

or by using a new input dialog, letting the user select between files or folder upload:

Related Bugzillas:

https://bugzilla.mozilla.org/show_bug.cgi?id=1164310 (Implement MS's proposal for a reduced subset of the new FileSystem API)

https://bugzilla.mozilla.org/show_bug.cgi?id=1188880 (Ship directory picking and directory drag and drop)

https://bugzilla.mozilla.org/show_bug.cgi?id=1209924 (Support filtering of Directory::GetFilesAndDirectories)

https://bugzilla.mozilla.org/show_bug.cgi?id=876480#c21 (Released in Firefox 50, november 2016)

Code partially from:https://jwatt.org/blog/2015/09/14/directory-picking-and-drag-and-drop (https://archive.is/ZBEdF)

Unfortunatelly not in MS Edge so far:https://dev.modern.ie/platform/status/draganddropdirectories/

The simple answer to your question is 'No' there is no way to read a folder using drag-and-drop in Firefox.

There does not seem to be an HTML5 standard for handling folders (yet). Chrome's ability to handle folders is something custom (outside of standards) they built into their browser.

Currently there is no way to do folder drag and drop in Firefox (or IE I believe) using HTML5/Javascript. There is a 'bug' on this feature on Mozilla's bugzilla and it mentions that W3C has currently discontinued creating a standard spec for the File System API that covers directories (although there is this editor's draft). That Mozilla bug is still in the NEW status and does not appear assigned/taken.

Html Drag Drop File Upload

Microsoft has this unofficial edge document on the feature which might be interesting if you also have questions about trying this in IE.

Here's what I did to solve this problem:

Basically:

• If the drag-and-drop entry has a mime type, then it is a file
• Otherwise, try to read the entry contents
  • Only read the first 5 bytes (to avoid loading large files into memory by accident): ent.slice( 0, 5 )
  • If the read succeeds, then it is a file
  • If the read fails, then this is a directory

Enjoy!

Not the answer you're looking for? Browse other questions tagged javascriptjqueryhtml5firefox or ask your own question.

I'm trying to implement html5's drag and drop in my app but Firefox is always redirected to dropped image's source. I'm using e.stopPropagation(). In Chromium everything works as expected. Strange...Here's the code:

Thanks for your help, m93a.

Drag And Drop Javascript

1 Answer

Not the answer you're looking for? Browse other questions tagged javascripthtml5firefoxdrag-and-drop or ask your own question.