fix(uploads): serialize status filters and resize oversized covers

apps/web/e2e/upload-review.spec.ts

@@ -38,6 +38,15 @@ async function setup(page: Page, scenario: 'queue' | 'template' | 'mine') {
       const req = new Request(input, init);
       const url = new URL(req.url);
       if (scenario === 'queue' && url.pathname === '/api/v1/admin/uploads') return json({ items: [files[0], missing], next_cursor: null });
+      if (scenario === 'queue' && url.pathname.startsWith('/api/v1/admin/uploads/batches/') && req.method === 'PATCH') {
+        const body = await req.json();
+        const bytes = Uint8Array.from(atob(body.cover_base64), (char) => char.charCodeAt(0));
+        const image = await createImageBitmap(new Blob([bytes], { type: 'image/jpeg' }));
+        document.documentElement.dataset.coverDimensions = `${image.width}x${image.height}`;
+        document.documentElement.dataset.coverBytes = String(bytes.length);
+        image.close();
+        return json({ items: [files[0], missing] });
+      }
       if (scenario === 'queue' && url.pathname === '/api/v1/admin/uploads/files/missing' && req.method === 'PATCH') {
         const body = await req.json();
         Object.assign(missing, { metadata: body.metadata, target_source_id: source.id, target_source_name: source.name, target_rel_path: 'Artist/Album/02 - Fixed.flac', status_reason: null });
@@ -59,11 +68,12 @@ async function setup(page: Page, scenario: 'queue' | 'template' | 'mine') {
         if (url.pathname === `/api/v1/admin/sources/${source.id}`) return json(source);
       }
       if (scenario === 'mine' && url.pathname === '/api/v1/uploads/mine') {
+        if (url.searchParams.getAll('status').length > 1) return json({ code: 'common.bad_request', status: 400 }, 400);
         if (url.searchParams.has('batch')) {
           document.documentElement.dataset.batchPages = String(Number(document.documentElement.dataset.batchPages ?? 0) + 1);
           return json({ items: [url.searchParams.has('cursor') ? files[2] : files[0]], next_cursor: url.searchParams.has('cursor') ? null : 'next' });
         }
-        const statuses = url.searchParams.getAll('status');
+        const statuses = url.searchParams.get('status')?.split(',') ?? [];
         const visible = [files[0], files[1], files[3], files[4]].filter((f) => !statuses.length || statuses.includes(f.status));
         return json({ items: visible, next_cursor: 'more' });
       }
@@ -253,3 +263,21 @@ test('starting another queue preview pauses the previous track', async ({ page }
   await page.getByRole('button', { name: 'Свернуть пачку', exact: true }).click();
   await expect.poll(() => first.evaluate((el: HTMLAudioElement) => el.paused)).toBe(true);
 });
+
+test('oversized album cover is reduced before saving the batch', async ({ page }) => {
+  await setup(page, 'queue');
+  const png = await page.evaluate(() => {
+    const canvas = document.createElement('canvas');
+    canvas.width = 3000; canvas.height = 1800;
+    canvas.getContext('2d')!.fillRect(0, 0, canvas.width, canvas.height);
+    return canvas.toDataURL('image/png').split(',')[1]!;
+  });
+  // A valid image with trailing padding reproduces an oversized input without a large fixture in Git.
+  const largeCover = Buffer.concat([Buffer.from(png, 'base64'), Buffer.alloc(12 * 1024 * 1024)]);
+  await page.getByRole('button', { name: 'На всю пачку', exact: true }).click();
+  const dialog = page.getByRole('dialog');
+  await dialog.locator('input[type=file]').setInputFiles({ name: 'Cover.png', mimeType: 'image/png', buffer: largeCover });
+  await dialog.getByRole('button', { name: 'Сохранить', exact: true }).click();
+  await expect(page.locator('html')).toHaveAttribute('data-cover-dimensions', '2048x1229');
+  expect(Number(await page.locator('html').getAttribute('data-cover-bytes'))).toBeLessThan(8 * 1024 * 1024);
+});

apps/web/src/features/uploads/BatchEditDialog.tsx

@@ -2,6 +2,7 @@ import { useMutation } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useErrorText } from '../../shared/lib/errors';
 import { useUploadsApi } from './queries';
+import { coverBase64 } from './files';
 import { useTranslation } from 'react-i18next';
 import { Button, Dialog, Field, FormError } from '../../shared/ui/ui';
 import s from '../../pages/page.module.css';
@@ -13,6 +14,7 @@ export function BatchEditDialog({ batchId, onClose, onSaved }: { batchId: string
   const [album, setAlbum] = useState('');
   const [year, setYear] = useState('');
   const [cover, setCover] = useState<string | null | undefined>(undefined);
+  const prepare = useMutation({ mutationFn: coverBase64, onSuccess: setCover });
   const save = useMutation({
     mutationFn: () => api.updateBatch(batchId, {
       ...(artist.trim() ? { artist: artist.trim() } : {}),
@@ -23,17 +25,13 @@ export function BatchEditDialog({ batchId, onClose, onSaved }: { batchId: string
     onSuccess: onSaved,
   });
   const pickCover = (file: File | undefined) => {
+    save.reset();
+    prepare.reset();
+    setCover(undefined);
     if (!file) {
-      setCover(undefined);
       return;
     }
-    const reader = new FileReader();
-    reader.onload = () => {
-      const data = String(reader.result ?? '');
-      const comma = data.indexOf(',');
-      setCover(comma >= 0 ? data.slice(comma + 1) : data);
-    };
-    reader.readAsDataURL(file);
+    prepare.mutate(file);
   };
   return (
     <Dialog
@@ -44,7 +42,7 @@ export function BatchEditDialog({ batchId, onClose, onSaved }: { batchId: string
           <Button variant="ghost" onClick={onClose}>
             {t('common:form.cancel')}
           </Button>
-          <Button variant="primary" busy={save.isPending} onClick={() => save.mutate()}>
+          <Button variant="primary" busy={save.isPending || prepare.isPending} disabled={prepare.isError} onClick={() => save.mutate()}>
             {t('uploads.save')}
           </Button>
         </>
@@ -57,12 +55,12 @@ export function BatchEditDialog({ batchId, onClose, onSaved }: { batchId: string
         <Field label={t('uploads.meta_year')} value={year} inputMode="numeric" onChange={setYear} />
         <label className={s.sessions}>
           <span>{t('uploads.batch_cover')}</span>
-          <input type="file" accept="image/jpeg,image/png,image/webp" onChange={(e) => pickCover(e.target.files?.[0])} />
+          <input type="file" accept="image/jpeg,image/png,image/webp" disabled={prepare.isPending || save.isPending} onChange={(e) => pickCover(e.target.files?.[0])} />
         </label>
-        <Button variant="ghost" onClick={() => setCover(null)}>
+        <Button variant="ghost" disabled={prepare.isPending || save.isPending} onClick={() => { prepare.reset(); setCover(null); }}>
           {t('uploads.batch_cover_clear')}
         </Button>
-        <FormError>{save.error ? errorText(save.error) : null}</FormError>
+        <FormError>{(save.error ?? prepare.error) ? errorText(save.error ?? prepare.error) : null}</FormError>
       </div>
     </Dialog>
   );

apps/web/src/features/uploads/api.test.ts

@@ -0,0 +1,20 @@
+import { createApiClient } from '@pipu/api-client';
+import { describe, expect, it } from 'vitest';
+
+describe('upload status query serialization', () => {
+  it('sends comma-separated statuses for own and admin queues, including batch selection', async () => {
+    const urls: URL[] = [];
+    const client = createApiClient({ baseUrl: 'https://pipu.test', fetch: async (input) => {
+      urls.push(new URL((input as Request).url));
+      return new Response(JSON.stringify({ items: [], next_cursor: null }), { headers: { 'Content-Type': 'application/json' } });
+    } });
+    await client.GET('/api/v1/uploads/mine', { params: { query: { status: ['pending_review', 'imported', 'expired'], limit: 50 } } });
+    await client.GET('/api/v1/admin/uploads', { params: { query: { status: ['uploading', 'processing'], limit: 100 } } });
+    await client.GET('/api/v1/uploads/mine', { params: { query: { batch: '00000000-0000-4000-8000-000000000001', status: ['uploading', 'processing', 'pending_review'] } } });
+    expect(urls.map((url) => url.searchParams.getAll('status'))).toEqual([
+      ['pending_review,imported,expired'], ['uploading,processing'], ['uploading,processing,pending_review'],
+    ]);
+    expect(urls[0]!.searchParams.get('limit')).toBe('50');
+    expect(urls[2]!.searchParams.get('batch')).toBe('00000000-0000-4000-8000-000000000001');
+  });
+});

apps/web/src/features/uploads/files.ts

@@ -1,4 +1,31 @@
 // Сбор файлов из drag-and-drop и выбора папки с относительными путями (они подсказывают альбом, docs/uploads.md#5).
+import { ApiError } from '@pipu/core';
+
+const MAX_COVER_BYTES = 8 * 1024 * 1024;
+
+/** Reduce oversized artwork before base64 expansion; small covers keep their original bytes. */
+async function prepareCover(file: File): Promise<Blob> {
+  if (file.size <= MAX_COVER_BYTES) return file;
+  let image: ImageBitmap;
+  try { image = await createImageBitmap(file); }
+  catch { throw new ApiError(422, 'validation.cover_type'); }
+  try {
+    const scale = Math.min(1, 2048 / Math.max(image.width, image.height));
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, Math.round(image.width * scale));
+    canvas.height = Math.max(1, Math.round(image.height * scale));
+    const context = canvas.getContext('2d');
+    if (!context) throw new ApiError(422, 'validation.cover_type');
+    context.fillStyle = '#fff';
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    for (const quality of [0.9, 0.75]) {
+      const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/jpeg', quality));
+      if (blob && blob.size <= MAX_COVER_BYTES) return blob;
+    }
+    throw new ApiError(422, 'validation.cover_too_large');
+  } finally { image.close(); }
+}
 
 export interface PickedFile {
   file: File;
@@ -40,12 +67,13 @@ export function albumFolder(relPath: string): string {
   return at < 0 ? '' : path.slice(0, at);
 }
 
-export function coverBase64(file: File): Promise<string> {
+export async function coverBase64(file: File): Promise<string> {
+  const prepared = await prepareCover(file);
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.onload = () => resolve(String(reader.result).split(',')[1]!);
     reader.onerror = () => reject(reader.error);
-    reader.readAsDataURL(file);
+    reader.readAsDataURL(prepared);
   });
 }