Add support for file upload when leaving a PR comment (#8724)

* Add basic image uploading

* Move to githubrepository

* Add support for file upload when leaving a PR comment

* Address CCR comments

* Add paste-to-upload (#8725)

* Add paste-to-upload

* Address CCR feedback

* CCR feedback

Author: alexr00

package.json

@@ -1245,6 +1245,12 @@
 				"title": "%command.pr.makeSuggestion.title%",
 				"category": "%command.pull.request.category%"
 			},
+			{
+				"command": "pr.uploadFile",
+				"title": "%command.pr.uploadFile.title%",
+				"category": "%command.pull.request.category%",
+				"icon": "$(cloud-upload)"
+			},
 			{
 				"command": "pr.startReview",
 				"title": "%command.pr.startReview.title%",
@@ -2360,6 +2366,10 @@
 					"command": "pr.makeSuggestion",
 					"when": "false"
 				},
+				{
+					"command": "pr.uploadFile",
+					"when": "false"
+				},
 				{
 					"command": "pr.startReview",
 					"when": "false"
@@ -3296,6 +3306,11 @@
 					"command": "pr.makeSuggestion",
 					"group": "inline@3",
 					"when": "commentController =~ /^github-(browse|review)/ && !github:activeCommentHasSuggestion"
+				},
+				{
+					"command": "pr.uploadFile",
+					"group": "inline@4",
+					"when": "commentController =~ /^github-(browse|review)/"
 				}
 			],
 			"comments/commentThread/additionalActions": [

package.nls.json

@@ -263,6 +263,7 @@
 	"command.pr.createComment.title": "Add Review Comment",
 	"command.pr.createSingleComment.title": "Add Comment",
 	"command.pr.makeSuggestion.title": "Make Code Suggestion",
+	"command.pr.uploadFile.title": "Upload File",
 	"command.pr.startReview.title": "Start Review",
 	"command.pr.editComment.title": "Edit Comment",
 	"command.pr.cancelEditComment.title": "Cancel",

src/commands.ts

@@ -20,6 +20,7 @@ import { formatError } from './common/utils';
 import { EXTENSION_ID } from './constants';
 import { CrossChatSessionWithPR } from './github/copilotApi';
 import { CopilotRemoteAgentManager, SessionIdForPr } from './github/copilotRemoteAgent';
+import { guessExtensionFromMime, pickFilesForUpload, placeholdersForNames, runFileUploads, runPendingUploads } from './github/fileUpload';
 import { FolderRepositoryManager } from './github/folderRepositoryManager';
 import { GitHubRepository } from './github/githubRepository';
 import { Issue } from './github/interface';
@@ -1379,6 +1380,167 @@ ${contents}
 		})
 	);
 
+	context.subscriptions.push(
+		vscode.commands.registerCommand('pr.uploadFile', async (reply: CommentReply | GHPRComment | undefined) => {
+			/* __GDPR__
+			"pr.uploadFile" : {}
+			*/
+			telemetry.sendTelemetryEvent('pr.uploadFile');
+
+			let potentialThread: GHPRCommentThread | undefined;
+			if (reply === undefined) {
+				potentialThread = findActiveHandler()?.commentController.activeCommentThread as vscode.CommentThread2 as GHPRCommentThread | undefined;
+			} else {
+				potentialThread = reply instanceof GHPRComment ? reply.parent : reply?.thread;
+			}
+
+			if (!potentialThread) {
+				return;
+			}
+			const thread = potentialThread;
+
+			const commentEditor = vscode.window.activeTextEditor?.document.uri.scheme === Schemes.Comment ? vscode.window.activeTextEditor
+				: vscode.window.visibleTextEditors.find(visible => (visible.document.uri.scheme === Schemes.Comment) && (visible.document.uri.query === ''));
+			if (!commentEditor) {
+				Logger.error('No comment editor visible for uploading a file.', logId);
+				vscode.window.showErrorMessage(vscode.l10n.t('No available comment editor to upload a file in.'));
+				return;
+			}
+			const commentEditorUri = commentEditor.document.uri.toString();
+
+			const folderManager = reposManager.getManagerForFile(thread.uri);
+			const githubRepository = folderManager?.activePullRequest?.githubRepository
+				?? folderManager?.gitHubRepositories[0];
+			if (!githubRepository) {
+				vscode.window.showErrorMessage(vscode.l10n.t('Cannot upload files: no GitHub repository found for this comment.'));
+				return;
+			}
+
+			const uploads = await pickFilesForUpload();
+			if (!uploads) {
+				return;
+			}
+
+			// Insert placeholders at the current cursor position
+			const placeholdersText = uploads.map(u => u.placeholder).join('\n');
+			const cursor = commentEditor.selection.end;
+			const before = commentEditor.document.getText(new vscode.Range(new vscode.Position(0, 0), cursor));
+			const separator = before.length > 0 && !before.endsWith('\n') ? '\n' : '';
+			await commentEditor.edit(editBuilder => {
+				editBuilder.insert(cursor, `${separator}${placeholdersText}\n`);
+			});
+
+			const replacePlaceholder = async (placeholder: string, replacement: string) => {
+				const editor = vscode.window.visibleTextEditors.find(e => e.document.uri.toString() === commentEditorUri);
+				if (!editor) {
+					return;
+				}
+				const text = editor.document.getText();
+				const idx = text.indexOf(placeholder);
+				if (idx < 0) {
+					return;
+				}
+				const start = editor.document.positionAt(idx);
+				const end = editor.document.positionAt(idx + placeholder.length);
+				await editor.edit(editBuilder => {
+					editBuilder.replace(new vscode.Range(start, end), replacement);
+				});
+			};
+
+			runFileUploads(
+				githubRepository,
+				uploads,
+				logId,
+				(placeholder, _name, markdown) => replacePlaceholder(placeholder, markdown),
+				(placeholder, name, error) => {
+					vscode.window.showErrorMessage(vscode.l10n.t('Failed to upload {0}: {1}', name, error));
+					return replacePlaceholder(placeholder, '');
+				},
+			);
+		})
+	);
+
+	context.subscriptions.push(
+		vscode.languages.registerDocumentPasteEditProvider(
+			{ scheme: Schemes.Comment },
+			{
+				async provideDocumentPasteEdits(document, ranges, dataTransfer, _context, token) {
+					const files: { name: string; getBytes: () => Thenable<Uint8Array> }[] = [];
+					let counter = 0;
+					for (const [mime, item] of dataTransfer) {
+						const file = item.asFile();
+						if (!file) {
+							continue;
+						}
+						const name = file.name || `pasted-file-${++counter}${guessExtensionFromMime(mime)}`;
+						files.push({ name, getBytes: () => file.data() });
+					}
+					if (files.length === 0 || token.isCancellationRequested) {
+						return;
+					}
+
+					const potentialThread = findActiveHandler()?.commentController.activeCommentThread as vscode.CommentThread2 as GHPRCommentThread | undefined;
+					if (!potentialThread) {
+						return;
+					}
+					const folderManager = reposManager.getManagerForFile(potentialThread.uri);
+					const githubRepository = folderManager?.activePullRequest?.githubRepository
+						?? folderManager?.gitHubRepositories[0];
+					if (!githubRepository) {
+						return;
+					}
+
+					const placeholders = placeholdersForNames(files.map(f => f.name));
+					const placeholdersText = placeholders.map(p => p.placeholder).join('\n');
+
+					const documentUri = document.uri.toString();
+					const replacePlaceholder = async (placeholder: string, replacement: string) => {
+						const editor = vscode.window.visibleTextEditors.find(e => e.document.uri.toString() === documentUri);
+						if (!editor) {
+							return;
+						}
+						const text = editor.document.getText();
+						const idx = text.indexOf(placeholder);
+						if (idx < 0) {
+							return;
+						}
+						const start = editor.document.positionAt(idx);
+						const end = editor.document.positionAt(idx + placeholder.length);
+						await editor.edit(editBuilder => {
+							editBuilder.replace(new vscode.Range(start, end), replacement);
+						});
+					};
+
+					runPendingUploads(
+						githubRepository,
+						files.map((f, i) => ({
+							name: placeholders[i].name,
+							placeholder: placeholders[i].placeholder,
+							getBytes: f.getBytes,
+						})),
+						logId,
+						(placeholder, _name, markdown) => replacePlaceholder(placeholder, markdown),
+						(placeholder, name, error) => {
+							vscode.window.showErrorMessage(vscode.l10n.t('Failed to upload {0}: {1}', name, error));
+							return replacePlaceholder(placeholder, '');
+						},
+					);
+
+					const edit = new vscode.DocumentPasteEdit(
+						placeholdersText,
+						vscode.l10n.t('Upload as GitHub attachment'),
+						vscode.DocumentDropOrPasteEditKind.Empty.append('github', 'attachment'),
+					);
+					return [edit];
+				},
+			},
+			{
+				providedPasteEditKinds: [vscode.DocumentDropOrPasteEditKind.Empty.append('github', 'attachment')],
+				pasteMimeTypes: ['files', 'image/*'],
+			},
+		),
+	);
+
 	context.subscriptions.push(
 		vscode.commands.registerCommand('pr.editComment', async (comment: GHPRComment | TemporaryComment) => {
 			/* __GDPR__

src/github/fileUpload.ts

@@ -0,0 +1,157 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as buffer from 'buffer';
+import * as path from 'path';
+import * as vscode from 'vscode';
+import { GitHubRepository } from './githubRepository';
+import Logger from '../common/logger';
+import { formatError } from '../common/utils';
+
+export interface FileUploadPlaceholder {
+	uri: vscode.Uri;
+	name: string;
+	placeholder: string;
+}
+
+export interface PendingFileUpload {
+	name: string;
+	placeholder: string;
+	getBytes(): Thenable<Uint8Array>;
+}
+
+/**
+ * Decode a base64 string to a {@linkcode Uint8Array}.
+ */
+export function decodeBase64(input: string): Uint8Array {
+	return buffer.Buffer.from(input, 'base64');
+}
+
+/**
+ * Guess a file extension (including the dot) for a given MIME type, falling back
+ * to an empty string when no good guess is available.
+ */
+export function guessExtensionFromMime(mimeType: string): string {
+	const lower = mimeType.toLowerCase();
+	switch (lower) {
+		case 'image/png': return '.png';
+		case 'image/jpeg': return '.jpg';
+		case 'image/gif': return '.gif';
+		case 'image/webp': return '.webp';
+		case 'image/svg+xml': return '.svg';
+		case 'image/bmp': return '.bmp';
+		case 'image/heic': return '.heic';
+		case 'video/mp4': return '.mp4';
+		case 'video/quicktime': return '.mov';
+		case 'video/webm': return '.webm';
+		case 'application/pdf': return '.pdf';
+		case 'application/zip': return '.zip';
+		case 'application/json': return '.json';
+		case 'text/plain': return '.txt';
+		case 'text/markdown': return '.md';
+		default: return '';
+	}
+}
+
+/**
+ * Compute placeholder strings for the given file names, deduplicating
+ * by name with `(2)`, `(3)` suffixes.
+ */
+export function placeholdersForNames(names: readonly string[]): { name: string; placeholder: string }[] {
+	const used = new Map<string, number>();
+	return names.map(name => {
+		const count = used.get(name) ?? 0;
+		used.set(name, count + 1);
+		const placeholder = count === 0
+			? `<!-- Uploading ${name} -->`
+			: `<!-- Uploading ${name} (${count + 1}) -->`;
+		return { name, placeholder };
+	});
+}
+
+/**
+ * Prompt the user for files to upload and compute the placeholder text that
+ * should be inserted into a comment textarea while the uploads run.
+ * Returns `undefined` when the user cancels.
+ */
+export async function pickFilesForUpload(): Promise<FileUploadPlaceholder[] | undefined> {
+	const fileUris = await vscode.window.showOpenDialog({
+		canSelectMany: true,
+		canSelectFiles: true,
+		canSelectFolders: false,
+		openLabel: vscode.l10n.t('Upload'),
+		title: vscode.l10n.t('Select files to upload'),
+	});
+	if (!fileUris || fileUris.length === 0) {
+		return undefined;
+	}
+
+	const names = fileUris.map(uri => path.basename(uri.fsPath));
+	const placeholders = placeholdersForNames(names);
+	return fileUris.map((uri, i) => ({ uri, name: placeholders[i].name, placeholder: placeholders[i].placeholder }));
+}
+
+/**
+ * Maximum number of file uploads to run in parallel. Limiting concurrency
+ * avoids memory and network spikes when many files are uploaded at once.
+ */
+const MAX_CONCURRENT_UPLOADS = 3;
+
+/**
+ * Run the actual file uploads with limited concurrency, invoking the supplied
+ * callbacks as each upload finishes (or fails).
+ */
+export function runFileUploads(
+	githubRepository: GitHubRepository,
+	uploads: readonly FileUploadPlaceholder[],
+	logId: string,
+	onComplete: (placeholder: string, name: string, markdown: string) => void | Promise<void>,
+	onError: (placeholder: string, name: string, error: string) => void | Promise<void>,
+): void {
+	runPendingUploads(
+		githubRepository,
+		uploads.map(u => ({
+			name: u.name,
+			placeholder: u.placeholder,
+			getBytes: () => vscode.workspace.fs.readFile(u.uri),
+		})),
+		logId,
+		onComplete,
+		onError,
+	);
+}
+
+/**
+ * Run uploads in parallel, fetching the bytes lazily via {@linkcode PendingFileUpload.getBytes}.
+ */
+export function runPendingUploads(
+	githubRepository: GitHubRepository,
+	uploads: readonly PendingFileUpload[],
+	logId: string,
+	onComplete: (placeholder: string, name: string, markdown: string) => void | Promise<void>,
+	onError: (placeholder: string, name: string, error: string) => void | Promise<void>,
+): void {
+	let next = 0;
+
+	const runOne = async (): Promise<void> => {
+		while (next < uploads.length) {
+			const u = uploads[next++];
+			(async () => {
+				const bytes = await u.getBytes();
+				return githubRepository.uploadFileBytes(bytes, u.name);
+			})().then(markdown => {
+				return onComplete(u.placeholder, u.name, markdown);
+			}).catch(err => {
+				Logger.error(`Failed to upload file ${u.name}: ${formatError(err)}`, logId);
+				return onError(u.placeholder, u.name, formatError(err));
+			});
+		}
+	};
+
+	const workerCount = Math.min(MAX_CONCURRENT_UPLOADS, uploads.length);
+	for (let i = 0; i < workerCount; i++) {
+		void runOne();
+	}
+}

src/github/githubRepository.ts

@@ -2130,6 +2130,14 @@ export class GitHubRepository extends Disposable {
 		}
 
 		const fileBytes = await vscode.workspace.fs.readFile(uri);
+		return this.uploadFileBytes(fileBytes, fileName);
+	}
+
+	/**
+	 * Upload a file's raw bytes to GitHub via the mobile upload policy API.
+	 * Returns a markdown snippet appropriate for embedding in an issue/PR comment.
+	 */
+	public async uploadFileBytes(fileBytes: Uint8Array, fileName: string): Promise<string> {
 		if (fileBytes.byteLength > MAX_UPLOAD_SIZE_BYTES) {
 			throw new Error(`File "${fileName}" is too large to upload (${Math.round(fileBytes.byteLength / (1024 * 1024))} MB). The maximum allowed size is ${MAX_UPLOAD_SIZE_BYTES / (1024 * 1024)} MB.`);
 		}