DragAndDropEntries - Revision history

Jami: /* Example Code (Drag and Drop) */

2014-12-11T14:33:10Z

Example Code (Drag and Drop)

← Older revision		Revision as of 14:33, 11 December 2014
Line 84:		Line 84:
	var droptarget = document.getElementById('droptarget');		var droptarget = document.getElementById('droptarget');

	droptarget.addEventListener('~~dop~~', function (e) {		droptarget.addEventListener('drop', function (e) {
	e.stopPropagation();		e.stopPropagation();
	e.preventDefault();		e.preventDefault();

Kinuko: /* Benefits */

2012-06-24T16:54:12Z

Benefits

← Older revision		Revision as of 16:54, 24 June 2012
Line 24:		Line 24:
	* '''Enables folders/files mixtured drag-and-drop''': Similarly, since '''Entry''' interface can represent files and directories, the API naturally enables more advanced mixed cases in drag-and-drop, like multiple folders, multiple folders and files and so on.		* '''Enables folders/files mixtured drag-and-drop''': Similarly, since '''Entry''' interface can represent files and directories, the API naturally enables more advanced mixed cases in drag-and-drop, like multiple folders, multiple folders and files and so on.

	* '''Gives webapps full control of when and what to traverse''': Unlike previous proposals for folder drag-and-drop<ref>http://lists.w3.org/Archives/Public/public-whatwg-archive/2010Apr/0240.html</ref>, this approach does not require full-traversal of the dropped folder(s) by the user agent, but instead simply exposes an interface with which webapps can asynchronously interact with the dropped folder(s). This gives the webapps a greater control of when and what to traverse directories, or when to stop the traversal, or how to show a progress indicator to the users. This also means that users no longer need to worry about sluggish browser behavior when s/he has wrongly dropped a directory which contains a millions of nested files/directories.		* '''Gives webapps full control of when and what to traverse''': Unlike previous proposals for folder drag-and-drop<ref>http://lists.w3.org/Archives/Public/public-whatwg-archive/2010Apr/0240.html</ref>, this approach does not require full-traversal of the dropped folder(s) by the user agent, but instead simply exposes an interface with which webapps can asynchronously interact with the dropped folder(s). This gives the webapps a greater control of when and what to traverse directories, or when to stop the traversal, or how to ''show a neat progress indicator'' to the users. This also means that users no longer need to worry about sluggish browser behavior when s/he has wrongly dropped a directory which contains a millions of nested files/directories.

	* '''Gives webapps direct read-only access to the user's local file ~~system~~''': Since the API exposes a selected user's local folder with its complete tree structure, it opens up various interesting possibilities to webapps which was not possible without accessing directory structures. E.g. importing a user's Photos folders with album-like subfolders to a photo-album app, importing a user's source code tree to a web-based IDE, showing a nice file browser on a dropped media drive etc.		* '''Gives webapps direct read-only access to the user's local file tree''': Since the API exposes a selected user's local folder with its complete tree structure, it opens up various interesting possibilities to webapps which was not possible without accessing directory structures. E.g. importing a user's Photos folders with album-like subfolders to a photo-album app, importing a user's source code tree to a web-based IDE, showing a nice file browser on a dropped media drive in a cover-flow like interface etc.

	=== HTMLInputElement.entries ===		=== HTMLInputElement.entries ===

Kinuko at 16:52, 24 June 2012

2012-06-24T16:52:13Z

← Older revision		Revision as of 16:52, 24 June 2012
Line 10:		Line 10:
	== Proposing API ==		== Proposing API ==

	Add a new field 'entries' to <input type=files> element ~~[1] and a new accessor method 'getAsEntry()' to DataTransferItem object [2]. Populate the field with or return an 'Entry' object defined in FileSystem API upon file selection or drop events.~~		Add a new field 'entries' to <input type=files> element <ref>http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-(type=file)</ref> and a new accessor method 'getAsEntry()' to DataTransferItem object<ref>http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-datatransferitem-interface</ref>. Populate the field with or return an 'Entry' object defined in FileSystem API upon file selection or drop events.

	~~[1]~~ http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-(type=file)

	~~[2]~~ http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-datatransferitem-interface

	Since we didn't use to have a good interface to represent directories/folders, all webapps could access for file drag-and-drop was one or multiple files given as '''File''' objects.		Since we didn't use to have a good interface to represent directories/folders, all webapps could access for file drag-and-drop was one or multiple files given as '''File''' objects.

	On the other hand, this API proposes returning '''Entry''' instances (http://dev.w3.org/2009/dap/file-system/file-dir-sys.html#the-entry-interface), which can represent either file or directory. Via the '''Entry''' interface webapps can easily distinguish if a dropped entity is a file or directory by examining '.isFile' or '.isDirectory' field of the entry. If the entry is a directory, webapps can recursively walk over nested files and directories included in the directory by calling '.readEntries()' method of the directory reader for the entry.		On the other hand, this API proposes returning '''Entry''' instances <ref>http://dev.w3.org/2009/dap/file-system/file-dir-sys.html#the-entry-interface</ref>, which can represent either file or directory. Via the '''Entry''' interface webapps can easily distinguish if a dropped entity is a file or directory by examining '.isFile' or '.isDirectory' field of the entry. If the entry is a directory, webapps can recursively walk over nested files and directories included in the directory by calling '.readEntries()' method of the directory reader for the entry.

	This approach allows webapps to directly interact with the local folder structure, and also allows them to control the enumerating part so that the apps can show nice progress meter if they want.		This approach allows webapps to directly interact with the local folder structure, and also allows them to control the enumerating part so that the apps can show nice progress meter if they want.
Line 28:		Line 24:
	* '''Enables folders/files mixtured drag-and-drop''': Similarly, since '''Entry''' interface can represent files and directories, the API naturally enables more advanced mixed cases in drag-and-drop, like multiple folders, multiple folders and files and so on.		* '''Enables folders/files mixtured drag-and-drop''': Similarly, since '''Entry''' interface can represent files and directories, the API naturally enables more advanced mixed cases in drag-and-drop, like multiple folders, multiple folders and files and so on.

	* '''Gives webapps full control of when and what to traverse''': Unlike previous proposals for folder drag-and-drop ~~[1]~~, this approach does not require full-traversal of the dropped folder(s) by the user agent, but instead simply exposes an interface with which webapps can asynchronously interact with the dropped folder(s). This gives the webapps a greater control of when and what to traverse directories, or when to stop the traversal, or how to show a progress indicator to the users. This also means that users no longer need to worry about sluggish browser behavior when s/he has wrongly dropped a directory which contains a millions of nested files/directories.		* '''Gives webapps full control of when and what to traverse''': Unlike previous proposals for folder drag-and-drop<ref>http://lists.w3.org/Archives/Public/public-whatwg-archive/2010Apr/0240.html</ref>, this approach does not require full-traversal of the dropped folder(s) by the user agent, but instead simply exposes an interface with which webapps can asynchronously interact with the dropped folder(s). This gives the webapps a greater control of when and what to traverse directories, or when to stop the traversal, or how to show a progress indicator to the users. This also means that users no longer need to worry about sluggish browser behavior when s/he has wrongly dropped a directory which contains a millions of nested files/directories.

	* '''Gives webapps direct read-only access to the user's local file system''': Since the API exposes a selected user's local folder with its complete tree structure, it opens up various interesting possibilities to webapps which was not possible without accessing directory structures. E.g. importing a user's Photos folders with album-like subfolders to a photo-album app, importing a user's source code tree to a web-based IDE, showing a nice file browser on a dropped media drive etc.		* '''Gives webapps direct read-only access to the user's local file system''': Since the API exposes a selected user's local folder with its complete tree structure, it opens up various interesting possibilities to webapps which was not possible without accessing directory structures. E.g. importing a user's Photos folders with album-like subfolders to a photo-album app, importing a user's source code tree to a web-based IDE, showing a nice file browser on a dropped media drive etc.

	~~[1] http://lists.w3.org/Archives/Public/public-whatwg-archive/2010Apr/0240.html~~

	=== HTMLInputElement.entries ===		=== HTMLInputElement.entries ===
Line 124:		Line 118:
	}		}
	});		});

			== References ==

			<references />

	[[Category:Proposals]]		[[Category:Proposals]]

Kinuko at 16:49, 24 June 2012

2012-06-24T16:49:26Z

← Older revision		Revision as of 16:49, 24 June 2012
Line 13:		Line 13:

	[1] http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-(type=file)		[1] http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-(type=file)

	[2] http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-datatransferitem-interface		[2] http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-datatransferitem-interface

	Since ~~FileSystem~~ API ~~naturally supports tree~~-~~structured folder hierarchy~~, Entry ~~object exposes handy fields like~~ 'isFile' ~~and~~ 'isDirectory', ~~and allows~~ webapps to recursively walk over ~~the~~ nested ~~entries~~ in ~~subfolders via ReadDirectory~~() method.		Since we didn't use to have a good interface to represent directories/folders, all webapps could access for file drag-and-drop was one or multiple files given as '''File''' objects.

			On the other hand, this API proposes returning '''Entry''' instances (http://dev.w3.org/2009/dap/file-system/file-dir-sys.html#the-entry-interface), which can represent either file or directory. Via the '''Entry''' interface webapps can easily distinguish if a dropped entity is a file or directory by examining '.isFile' or '.isDirectory' field of the entry. If the entry is a directory, webapps can recursively walk over nested files and directories included in the directory by calling '.readEntries()' method of the directory reader for the entry.

	This approach allows webapps to directly interact with the local folder structure, and also allows them to control the enumerating part so that the apps can show nice progress meter if they want.		This approach allows webapps to directly interact with the local folder structure, and also allows them to control the enumerating part so that the apps can show nice progress meter if they want.

			=== Benefits ===

			* '''Enables folder drag-and-drop''': Most obvious and direct advantage of this API is it enables folder/directories drag-and-drop both in <input type=file> and HTML5 native drag-and-drop, which was purely not possible in the current HTML5 specification.

			* '''Enables folders/files mixtured drag-and-drop''': Similarly, since '''Entry''' interface can represent files and directories, the API naturally enables more advanced mixed cases in drag-and-drop, like multiple folders, multiple folders and files and so on.

			* '''Gives webapps full control of when and what to traverse''': Unlike previous proposals for folder drag-and-drop [1], this approach does not require full-traversal of the dropped folder(s) by the user agent, but instead simply exposes an interface with which webapps can asynchronously interact with the dropped folder(s). This gives the webapps a greater control of when and what to traverse directories, or when to stop the traversal, or how to show a progress indicator to the users. This also means that users no longer need to worry about sluggish browser behavior when s/he has wrongly dropped a directory which contains a millions of nested files/directories.

			* '''Gives webapps direct read-only access to the user's local file system''': Since the API exposes a selected user's local folder with its complete tree structure, it opens up various interesting possibilities to webapps which was not possible without accessing directory structures. E.g. importing a user's Photos folders with album-like subfolders to a photo-album app, importing a user's source code tree to a web-based IDE, showing a nice file browser on a dropped media drive etc.

			[1] http://lists.w3.org/Archives/Public/public-whatwg-archive/2010Apr/0240.html

	=== HTMLInputElement.entries ===		=== HTMLInputElement.entries ===

Kinuko: /* Isolated FileSystem */

2012-06-20T15:39:24Z

Isolated FileSystem

← Older revision		Revision as of 15:39, 20 June 2012
Line 41:		Line 41:
	== Isolated FileSystem ==		== Isolated FileSystem ==

	The Entry exposed by this feature is created in an '''Isolated''' filesystem, which is read-only, isolated and transient. The filesystem only contains the dropped items and can only be accessed by the site where the drag-and-drop event has happened. Webapps cannot access any other files or folders outside the filesystem.		The Entry exposed by this feature is created in an '''Isolated''' filesystem, which is '''read-only''', isolated and transient. The filesystem only contains the dropped items and can only be accessed by the site where the drag-and-drop event has happened. Webapps cannot access any other files or folders outside the filesystem.

	=== Restrictions ===		=== Restrictions ===

Kinuko: /* Example Code (Input) */

2012-06-20T12:52:37Z

Example Code (Input)

← Older revision		Revision as of 12:52, 20 June 2012
Line 95:		Line 95:

	var input = document.querySelector("input[type='file']");		var input = document.querySelector("input[type='file']");

	input.addEventListener('change', function (e) {		input.addEventListener('change', function (e) {
	e.stopPropagation();		e.stopPropagation();
	e.preventDefault();		e.preventDefault();

	var entries = e.target.webkitEntries; // WebKit/chromium needs 'webkit' prefix (since Chrome 22)		var entries = e.target.webkitEntries; // WebKit/chromium needs 'webkit' prefix (since Chrome 22)

	for (var i = 0; i < entries.length; ++i) {		for (var i = 0; i < entries.length; ++i) {
	if (entries[i].isDirectory) {		if (entries[i].isDirectory) {

Kinuko: /* Example Code (Drag and Drop) */

2012-06-20T12:52:20Z

Example Code (Drag and Drop)

← Older revision		Revision as of 12:52, 20 June 2012
Line 83:		Line 83:
	if (items[i].kind != "file")		if (items[i].kind != "file")
	continue;		continue;

	var entry = items[i].webkitGetAsEntry(); // WebKit/chromium needs 'webkit' prefix (since Chrome 21)		var entry = items[i].webkitGetAsEntry(); // WebKit/chromium needs 'webkit' prefix (since Chrome 21)
	entry.copyTo(temporaryFs.root, entry.name, successCallback, errorCallback); ~~// import the dropped files/folders into temporary filesystem~~
			// import the dropped files/folders into temporary filesystem
			entry.copyTo(temporaryFs.root, entry.name, successCallback, errorCallback);
	});		});

Kinuko: /* Example Code (Drag and Drop) */

2012-06-20T12:51:47Z

Example Code (Drag and Drop)

← Older revision		Revision as of 12:51, 20 June 2012
Line 74:		Line 74:

	var droptarget = document.getElementById('droptarget');		var droptarget = document.getElementById('droptarget');

	droptarget.addEventListener('dop', function (e) {		droptarget.addEventListener('dop', function (e) {
	e.stopPropagation();		e.stopPropagation();
	e.preventDefault();		e.preventDefault();

	var items = e.dataTransfer.items;		var items = e.dataTransfer.items;
	for (var i = 0; i < items.length; ++i) {		for (var i = 0; i < items.length; ++i) {
	if (items[i].kind != "file")		if (items[i].kind != "file")
	continue;		continue;

	var entry = items[i].webkitGetAsEntry(); // WebKit/chromium needs 'webkit' prefix (since Chrome 21)		var entry = items[i].webkitGetAsEntry(); // WebKit/chromium needs 'webkit' prefix (since Chrome 21)
	~~if (~~entry.~~isDirectory) {~~		entry.copyTo(temporaryFs.root, entry.name, successCallback, errorCallback); // import the dropped files/folders into temporary filesystem
	~~traverseDirectoryTree(entry);~~
	~~} else {~~
	~~showFileEntry~~(entry);
	}
	});		});

Kinuko at 12:17, 20 June 2012

2012-06-20T12:17:41Z

← Older revision		Revision as of 12:17, 20 June 2012
Line 81:		Line 81:
	if (items[i].kind != "file")		if (items[i].kind != "file")
	continue;		continue;
	var entry = items[i].~~getAsEntry~~();		var entry = items[i].webkitGetAsEntry(); // WebKit/chromium needs 'webkit' prefix (since Chrome 21)
	if (entry.isDirectory) {		if (entry.isDirectory) {
	traverseDirectoryTree(entry);		traverseDirectoryTree(entry);
Line 97:		Line 97:
	e.stopPropagation();		e.stopPropagation();
	e.preventDefault();		e.preventDefault();
	var entries = e.target.~~entries~~;		var entries = e.target.webkitEntries; // WebKit/chromium needs 'webkit' prefix (since Chrome 22)
	for (var i = 0; i < entries.length; ++i) {		for (var i = 0; i < entries.length; ++i) {
	if (entries[i].isDirectory) {		if (entries[i].isDirectory) {

Kinuko: /* Proposing API */

2012-06-20T12:06:17Z

Proposing API

@@ Line 11: / Line 11: @@
 Add a new field 'entries' to <input type=files> element [1] and a new accessor method 'getAsEntry()' to DataTransferItem object [2].  Populate the field with or return an 'Entry' object defined in FileSystem API upon file selection or drop events.
    interface HTMLInputElement : HTMLElement {
@@ Line 19: / Line 28: @@
       readonly attribute Entry[] entries;
+   }
    interface DataTransferItem {
@@ Line 27: / Line 38: @@
      Entry getAsEntry();
    };
 == Isolated FileSystem ==