Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can HTML 5 drag-and-drop handle folders?

I'm impressed by Gmail's ability to let you drag files into emails for attachments, but when I try to drag a folder onto it, it says the file has 0 bytes. Is this a Gmail limitation, or is this something that's fundamentally not doable with the current HTML 5 spec?

like image 467
Andrew Avatar asked Jul 26 '10 16:07

Andrew


People also ask

How do I drag and drop a folder?

How do I Drag and Drop? By default, if you left-click and HOLD the left mouse or touchpad button while moving your mouse pointer to a different folder location on the same drive, when you release the left mouse button the file will be moved to the new location where you released the mouse button.

How do I drop something into a folder?

Copy using drag and drop Select the item you want to move by holding down the right-mouse button (or the alternate mouse button if you're using the mouse with your left hand). Drag to the destination folder and release the mouse button.

How do I upload files to drag and drop?

Drag and drop file uploads happen when you drag one or more files from an underlying platform's file manager and drop them onto a web page for upload. A preview of the image indicates the upload has begun. Many JavaScript libraries create this type of drag and drop file upload feature with a few lines of code.


1 Answers

Now directory upload available on chrome

you can select directory using input type

<input type='file' webkitdirectory >

and you can drag drop a folder

<div id="dropzone"></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
  var length = e.dataTransfer.items.length;
  for (var i = 0; i < length; i++) {
    var entry = e.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isFile) {
      ... // do whatever you want
    } else if (entry.isDirectory) {
      ... // do whatever you want
    }
  }
};
like image 153
kongaraju Avatar answered Sep 20 '22 11:09

kongaraju