Web: allow to drop a local file into editor area to open it (fixes microsoft#83650)

Benjamin Pasero · Benjamin Pasero · commit 0181e95bb997 · 2019-12-13T08:59:15.000+01:00
diff --git a/src/vs/workbench/browser/parts/editor/editorDropTarget.ts b/src/vs/workbench/browser/parts/editor/editorDropTarget.ts
@@ -18,6 +18,11 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { RunOnceScheduler } from 'vs/base/common/async';
 import { find } from 'vs/base/common/arrays';
 import { DataTransfers } from 'vs/base/browser/dnd';
+import { IUntitledTextEditorService } from 'vs/workbench/services/untitled/common/untitledTextEditorService';
+import { VSBuffer } from 'vs/base/common/buffer';
+import { IFileDialogService } from 'vs/platform/dialogs/common/dialogs';
+import { URI } from 'vs/base/common/uri';
+import { joinPath } from 'vs/base/common/resources';
 
 interface IDropOperation {
 	splitDirection?: GroupDirection;
@@ -41,8 +46,10 @@ class DropOverlay extends Themable {
 	constructor(
 		private accessor: IEditorGroupsAccessor,
 		private groupView: IEditorGroupView,
-		themeService: IThemeService,
-		private instantiationService: IInstantiationService
+		@IThemeService themeService: IThemeService,
+		@IInstantiationService private instantiationService: IInstantiationService,
+		@IUntitledTextEditorService private untitledTextEditorService: IUntitledTextEditorService,
+		@IFileDialogService private readonly fileDialogService: IFileDialogService
 	) {
 		super(themeService);
 
@@ -100,10 +107,6 @@ class DropOverlay extends Themable {
 		this._register(new DragAndDropObserver(this.container, {
 			onDragEnter: e => undefined,
 			onDragOver: e => {
-				if (isWeb && containsDragType(e, DataTransfers.FILES)) {
-					return; // dropping files into editor is unsupported on web
-				}
-
 				const isDraggingGroup = this.groupTransfer.hasData(DraggedEditorGroupIdentifier.prototype);
 				const isDraggingEditor = this.editorTransfer.hasData(DraggedEditorIdentifier.prototype);
 
@@ -281,6 +284,45 @@ class DropOverlay extends Themable {
 			}
 		}
 
+		// Web: check for file transfer
+		else if (isWeb && containsDragType(event, DataTransfers.FILES)) {
+			let targetGroup: IEditorGroupView | undefined = undefined;
+
+			const files = event.dataTransfer?.files;
+			if (files) {
+				for (let i = 0; i < files.length; i++) {
+					const file = files.item(i);
+					if (file) {
+						const reader = new FileReader();
+						reader.readAsArrayBuffer(file);
+						reader.onload = async event => {
+							const name = file.name;
+							if (typeof name === 'string' && event.target?.result instanceof ArrayBuffer) {
+
+								// Try to come up with a good file path for the untitled
+								// editor by asking the file dialog service for the default
+								let proposedFilePath: URI | undefined = undefined;
+								const defaultFilePath = this.fileDialogService.defaultFilePath();
+								if (defaultFilePath) {
+									proposedFilePath = joinPath(defaultFilePath, name);
+								}
+
+								// Open as untitled file with the provided contents
+								const contents = VSBuffer.wrap(new Uint8Array(event.target.result)).toString();
+								const untitledEditor = this.untitledTextEditorService.createOrGet(proposedFilePath, undefined, contents);
+
+								if (!targetGroup) {
+									targetGroup = ensureTargetGroup();
+								}
+
+								await targetGroup.openEditor(untitledEditor);
+							}
+						};
+					}
+				}
+			}
+		}
+
 		// Check for URI transfer
 		else {
 			const dropHandler = this.instantiationService.createInstance(ResourcesDropHandler, { allowWorkspaceOpen: true /* open workspace instead of file if dropped */ });
@@ -532,7 +574,7 @@ export class EditorDropTarget extends Themable {
 			if (!this.overlay) {
 				const targetGroupView = this.findTargetGroupView(target);
 				if (targetGroupView) {
-					this._overlay = new DropOverlay(this.accessor, targetGroupView, this.themeService, this.instantiationService);
+					this._overlay = this.instantiationService.createInstance(DropOverlay, this.accessor, targetGroupView);
 				}
 			}
 		}
diff --git a/src/vs/workbench/contrib/files/browser/views/explorerViewer.ts b/src/vs/workbench/contrib/files/browser/views/explorerViewer.ts
@@ -860,7 +860,7 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {
 					}
 
 					const resource = joinPath(target.resource, name);
-					await this.fileService.writeFile(resource, VSBuffer.wrap(new Uint8Array(event.target?.result)));
+					await this.fileService.writeFile(resource, VSBuffer.wrap(new Uint8Array(event.target.result)));
 					if (data.files.length === 1) {
 						await this.editorService.openEditor({ resource, options: { pinned: true } });
 					}

Original file line number	Diff line number	Diff line change
`@@ -860,7 +860,7 @@ export class FileDragAndDrop implements ITreeDragAndDrop<ExplorerItem> {`
`860`	`860`	`}`
`861`	`861`
`862`	`862`	`const resource = joinPath(target.resource, name);`
`863`		`- await this.fileService.writeFile(resource, VSBuffer.wrap(new Uint8Array(event.target?.result)));`
	`863`	`+ await this.fileService.writeFile(resource, VSBuffer.wrap(new Uint8Array(event.target.result)));`
`864`	`864`	`if (data.files.length === 1) {`
`865`	`865`	`await this.editorService.openEditor({ resource, options: { pinned: true } });`
`866`	`866`	`}`