feat: upload source by ctrl+v and dropzone

web/e2e/helpers/page.ts

@@ -76,8 +76,10 @@ export async function renderText(page: Page, value: string): Promise<void> {
 }
 
 export async function uploadImage(page: Page, file: SourceFile): Promise<void> {
-	const input = page.locator('input[type="file"]');
-	await expect(input).toHaveCount(1);
+	// На странице может быть два input[type=file]: дропзона + кнопка Open image;
+	// канонический — первый (кнопка в шапке панели).
+	const input = page.locator('input[type="file"]').first();
+	await expect(input).toBeAttached();
 	await input.setInputFiles({
 		name: file.name,
 		mimeType: file.mimeType,
@@ -85,6 +87,35 @@ export async function uploadImage(page: Page, file: SourceFile): Promise<void> {
 	});
 }
 
+export async function uploadViaDrop(
+	page: Page,
+	file: SourceFile,
+): Promise<void> {
+	const dataTransfer = await page.evaluateHandle(
+		({
+			bytes,
+			name,
+			mimeType,
+		}: {
+			bytes: number[];
+			name: string;
+			mimeType: string;
+		}) => {
+			const dt = new DataTransfer();
+			dt.items.add(new File([new Uint8Array(bytes)], name, { type: mimeType }));
+			return dt;
+		},
+		{
+			bytes: Array.from(file.buffer),
+			name: file.name,
+			mimeType: file.mimeType,
+		},
+	);
+	await page
+		.getByRole("button", { name: /drop a png/i })
+		.dispatchEvent("drop", { dataTransfer });
+}
+
 export async function downloadResultFile(page: Page): Promise<Download> {
 	const button = page.getByRole("button", { name: "Download result" });
 	await expect(button).toBeVisible();

web/e2e/tool-flows.spec.ts

@@ -18,6 +18,7 @@ import {
 	sourceImage,
 	trackErrors,
 	uploadImage,
+	uploadViaDrop,
 	useEnglish,
 } from "./helpers/page";
 
@@ -81,6 +82,15 @@ test("crop-png starts with the full source area", async ({ page }) => {
 	expectNoErrors(sink);
 });
 
+test("flip-png: upload via drag-and-drop on the dropzone", async ({ page }) => {
+	const sink = trackErrors(page);
+	await openTool(page, "flip-png");
+	await uploadViaDrop(page, opaquePng);
+	await expect(resultImage(page)).toBeVisible();
+	await expectNoErrorAlert(page);
+	expectNoErrors(sink);
+});
+
 test("flip-png: full flow - upload, result, download", async ({ page }) => {
 	const sink = trackErrors(page);
 	await openTool(page, "flip-png");

web/e2e/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"types": ["node"]
+	},
+	"include": ["./**/*.ts"]
+}