feat(transfers): add PicTransfer — cross-event file transfers (#998)

Closes #997.

Send original files from any event as a token-protected download link, with an
optional client-upload channel. Strictly opt-in behind a new `transfers`
feature flag, default OFF.

Migrations 170-172 (transfers, transfer_files, transfer_extra_files,
transfer_uploads, transfer_recipients, transfer_downloads, default settings and
two email templates) — all hasTable/hasColumn-guarded and idempotent, with
destructive statements confined to down().

Backend: transferService (CRUD, 256-bit download token, 6-char upload token,
cross-event ZIP streaming of originals), admin CRUD routes, and two public
token routes. transferCleanupService runs an hourly retention sweep; source-event
photos are never touched. All three routers fail closed via
requireFeatureFlag('transfers').

Review closed two ownership blockers, both the same root cause — permissions
used where ownership was needed:

- photoIds arrived from the request body and were validated only for existence,
  so a scoped admin could bundle any event's originals and hand them out through
  the public download token. filterOwnedPhotoIds now resolves ids to their events
  and gates them through filterOwnedEventIds, on both the create and add-files
  paths.
- The transfer list was unscoped and carried each row's download token, so any
  admin with events.view could read another's token and fetch their originals.
  The list is now scoped by created_by, the token/url fields are stripped from
  the list payload, and a single router.use('/:id', requireTransferOwnership)
  covers all twelve /:id routes, 404ing foreign and missing alike.

The admin photo picker filters its event list to the same rule, so the UI stops
offering picks the API would discard.

Fork-PR workflows had not been approved since the fix commits, so the PR's green
checks were stale against the pre-fix head. Verified by dispatching tests.yml
against the actual head: backend and frontend both green.

Follow-up: neither ownership guard has a regression test yet.

Co-authored-by: Luca-Timo <[email protected]>
This commit is contained in:
Luca
2026-08-09 13:40:03 +02:00
committed by GitHub
co-authored by Luca-Timo
parent e2d8ec86bd
commit 2e495d7c48
23 changed files with 4180 additions and 0 deletions
@@ -0,0 +1,78 @@
/**
* Unit tests for the pure gating logic in transferService (PicTransfer, #997).
* These exercise the download/upload eligibility rules without touching the DB.
*/
const transferService = require('../../src/services/transferService');
const HOUR = 60 * 60 * 1000;
function make(overrides = {}) {
return {
id: 1,
title: 'T',
is_active: true,
deleted_at: null,
expires_at: new Date(Date.now() + 24 * HOUR),
max_downloads: null,
download_count: 0,
allow_uploads: false,
upload_expires_at: null,
...overrides,
};
}
describe('transferService.downloadsRemaining', () => {
it('returns null (unlimited) when no cap or zero cap', () => {
expect(transferService.downloadsRemaining(make({ max_downloads: null }))).toBeNull();
expect(transferService.downloadsRemaining(make({ max_downloads: 0 }))).toBeNull();
});
it('returns the remaining count and never goes negative', () => {
expect(transferService.downloadsRemaining(make({ max_downloads: 5, download_count: 2 }))).toBe(3);
expect(transferService.downloadsRemaining(make({ max_downloads: 5, download_count: 9 }))).toBe(0);
});
});
describe('transferService.computeStatus', () => {
it('is deleted when deleted_at set, regardless of activity', () => {
expect(transferService.computeStatus(make({ deleted_at: new Date(), is_active: true }))).toBe('deleted');
});
it('is expired when inactive or past expiry', () => {
expect(transferService.computeStatus(make({ is_active: false }))).toBe('expired');
expect(transferService.computeStatus(make({ expires_at: new Date(Date.now() - HOUR) }))).toBe('expired');
});
it('is active within the window', () => {
expect(transferService.computeStatus(make())).toBe('active');
});
});
describe('transferService.assertDownloadable', () => {
it('allows a live, in-window, uncapped transfer', () => {
expect(transferService.assertDownloadable(make()).ok).toBe(true);
});
it('404s a missing/deleted transfer', () => {
expect(transferService.assertDownloadable(null)).toMatchObject({ ok: false, status: 404 });
expect(transferService.assertDownloadable(make({ deleted_at: new Date() }))).toMatchObject({ ok: false, status: 404 });
});
it('410s when disabled or expired', () => {
expect(transferService.assertDownloadable(make({ is_active: false }))).toMatchObject({ ok: false, code: 'TRANSFER_DISABLED', status: 410 });
expect(transferService.assertDownloadable(make({ expires_at: new Date(Date.now() - HOUR) }))).toMatchObject({ ok: false, code: 'TRANSFER_EXPIRED', status: 410 });
});
it('410s when the download cap is reached', () => {
expect(transferService.assertDownloadable(make({ max_downloads: 2, download_count: 2 })))
.toMatchObject({ ok: false, code: 'DOWNLOAD_LIMIT_REACHED', status: 410 });
});
});
describe('transferService.assertUploadable', () => {
it('403s when uploads are disabled', () => {
expect(transferService.assertUploadable(make({ allow_uploads: false }))).toMatchObject({ ok: false, code: 'UPLOADS_DISABLED', status: 403 });
});
it('allows when uploads enabled and not expired', () => {
expect(transferService.assertUploadable(make({ allow_uploads: true })).ok).toBe(true);
});
it('410s when the upload window has passed', () => {
expect(transferService.assertUploadable(make({ allow_uploads: true, upload_expires_at: new Date(Date.now() - HOUR) })))
.toMatchObject({ ok: false, code: 'UPLOAD_EXPIRED', status: 410 });
});
});
@@ -0,0 +1,244 @@
/**
* Migration 170: PicTransfer — cross-event file transfers (#997).
*
* Adds the tables that back the "send these files to someone" feature:
*
* transfers One share link. Bundles photos picked from ANY event,
* protected by a 64-hex recipient token. Optionally opens
* a 6-char upload token so the client can send files back
* (logos etc.). Disabled after `expires_at`; files are
* kept `grace_days` days past disable, then hard-deleted.
* transfer_files Join rows: which photos are in a transfer (cross-event).
* photo_id → photos CASCADE, so removing the underlying
* photo just drops it from the transfer; the reverse
* (deleting a transfer) never touches the source photos.
* transfer_uploads Files the client uploaded through the upload token.
* These have their own bytes on disk (uploads/transfers/…)
* and are what the retention sweep deletes.
* transfer_downloads Lightweight audit of recipient downloads (count + IP).
*
* Downloads always serve ORIGINAL files (never watermarked) — a transfer is a
* deliberate "here are your files" hand-off. Reuses the same original-file
* resolution + archiver streaming as the gallery download-all path.
*/
exports.up = async function (knex) {
if (!(await knex.schema.hasTable('transfers'))) {
await knex.schema.createTable('transfers', (table) => {
table.increments('id').primary();
// Recipient download token — 64 hex chars = 32 bytes = 256 bits.
table.string('token', 64).notNullable().unique();
table.string('title', 255).notNullable().defaultTo('');
table.text('message');
table.integer('created_by').unsigned()
.references('id').inTable('admin_users').onDelete('SET NULL');
// Link is disabled once this passes (the "set time period" cap).
table.timestamp('expires_at').notNullable();
// Optional download cap. NULL or 0 = unlimited within the window.
table.integer('max_downloads');
table.integer('download_count').notNullable().defaultTo(0);
table.boolean('is_active').notNullable().defaultTo(true);
// When the link flipped inactive — starts the retention clock.
table.timestamp('disabled_at');
// Keep files this many days after disable, then hard-delete.
table.integer('grace_days').notNullable().defaultTo(7);
table.timestamp('admin_notified_at');
table.timestamp('deleted_at');
// Optional client-upload channel (6-char token).
table.boolean('allow_uploads').notNullable().defaultTo(false);
table.string('upload_token', 16).unique();
table.timestamp('upload_expires_at');
table.timestamp('created_at').defaultTo(knex.fn.now());
table.timestamp('updated_at').defaultTo(knex.fn.now());
table.index(['is_active', 'expires_at'], 'transfers_active_expiry_idx');
table.index(['deleted_at'], 'transfers_deleted_idx');
});
}
if (!(await knex.schema.hasTable('transfer_files'))) {
await knex.schema.createTable('transfer_files', (table) => {
table.increments('id').primary();
table.integer('transfer_id').unsigned().notNullable()
.references('id').inTable('transfers').onDelete('CASCADE');
table.integer('photo_id').unsigned().notNullable()
.references('id').inTable('photos').onDelete('CASCADE');
table.integer('sort_order').notNullable().defaultTo(0);
table.timestamp('created_at').defaultTo(knex.fn.now());
table.index(['transfer_id'], 'transfer_files_transfer_idx');
// A photo can only appear once per transfer.
table.unique(['transfer_id', 'photo_id'], 'transfer_files_unique');
});
}
if (!(await knex.schema.hasTable('transfer_uploads'))) {
await knex.schema.createTable('transfer_uploads', (table) => {
table.increments('id').primary();
table.integer('transfer_id').unsigned().notNullable()
.references('id').inTable('transfers').onDelete('CASCADE');
table.string('original_filename', 512).notNullable();
// Storage-relative key, e.g. uploads/transfers/{id}/{stored-name}.
table.string('stored_path', 1024).notNullable();
table.integer('size_bytes');
table.string('mime_type', 100);
table.string('uploader_ip', 45);
table.timestamp('uploaded_at').defaultTo(knex.fn.now());
table.index(['transfer_id'], 'transfer_uploads_transfer_idx');
});
}
if (!(await knex.schema.hasTable('transfer_downloads'))) {
await knex.schema.createTable('transfer_downloads', (table) => {
table.increments('id').primary();
table.integer('transfer_id').unsigned().notNullable()
.references('id').inTable('transfers').onDelete('CASCADE');
table.string('kind', 20).notNullable().defaultTo('all'); // 'all' | 'single'
table.integer('photo_id').unsigned();
table.string('ip', 45);
table.timestamp('downloaded_at').defaultTo(knex.fn.now());
table.index(['transfer_id'], 'transfer_downloads_transfer_idx');
});
}
// Defaults for the create-transfer form + retention/upload behaviour.
const settings = [
{ setting_key: 'transfer_default_expiry_days', setting_value: JSON.stringify(14), setting_type: 'number' },
{ setting_key: 'transfer_default_grace_days', setting_value: JSON.stringify(7), setting_type: 'number' },
{ setting_key: 'transfer_default_max_downloads', setting_value: JSON.stringify(0), setting_type: 'number' },
{ setting_key: 'transfer_max_upload_size_mb', setting_value: JSON.stringify(50), setting_type: 'number' },
{
setting_key: 'transfer_upload_allowed_mime',
setting_value: JSON.stringify([
'image/jpeg', 'image/png', 'image/webp', 'image/gif',
'image/tiff', 'application/pdf', 'application/zip',
]),
setting_type: 'general',
},
];
for (const s of settings) {
const exists = await knex('app_settings').where('setting_key', s.setting_key).first();
if (!exists) {
await knex('app_settings').insert({ ...s, updated_at: knex.fn.now() });
}
}
// Feature flag — PicTransfer is a strictly opt-in module like slideshow /
// workflows: the sidebar entry, the /admin/transfers area and every
// transfer route (admin + public) stay dark until an admin turns it on
// under Settings → Features. Default OFF; idempotent seed.
if (await knex.schema.hasTable('feature_flags')) {
const existingFlag = await knex('feature_flags').where({ key: 'transfers' }).first();
if (!existingFlag) {
await knex('feature_flags').insert({ key: 'transfers', value: false });
}
}
// Admin notification when a transfer link expires (EN + DE, matching the
// convention of the other admin-notification templates — see migration 087).
const existingTemplate = await knex('email_templates')
.where('template_key', 'transfer_link_expired')
.first();
if (!existingTemplate) {
await knex('email_templates').insert({
template_key: 'transfer_link_expired',
subject_en: 'A transfer link has expired — {{transfer_title}}',
subject_de: 'Ein Transfer-Link ist abgelaufen — {{transfer_title}}',
body_html_en: `
<h2>A transfer link has expired</h2>
<p>The following file transfer is no longer downloadable by its recipient:</p>
<div style="background-color: #f0f8ff; border-left: 4px solid #5C8762; padding: 20px; margin: 20px 0; border-radius: 4px;">
<p style="margin: 0;"><strong>Transfer:</strong> {{transfer_title}}</p>
<p style="margin: 10px 0 0 0;"><strong>Expired at:</strong> {{expiry_date}}</p>
<p style="margin: 10px 0 0 0;"><strong>Files included:</strong> {{file_count}}</p>
<p style="margin: 10px 0 0 0;"><strong>Client uploads received:</strong> {{upload_count}}</p>
</div>
<p>The files will be kept for {{grace_days}} more days (until {{delete_date}})
so you can re-share or retrieve anything you still need, then they are
automatically deleted.</p>
<p><a href="{{admin_url}}">Open PicTransfer in the admin area</a></p>
<p>Best regards,<br>
Your PicPeak Installation</p>`,
body_text_en: `A transfer link has expired
The following file transfer is no longer downloadable by its recipient:
Transfer: {{transfer_title}}
Expired at: {{expiry_date}}
Files included: {{file_count}}
Client uploads received: {{upload_count}}
The files will be kept for {{grace_days}} more days (until {{delete_date}}) so
you can re-share or retrieve anything you still need, then they are
automatically deleted.
Open PicTransfer in the admin area: {{admin_url}}
Best regards,
Your PicPeak Installation`,
body_html_de: `
<h2>Ein Transfer-Link ist abgelaufen</h2>
<p>Der folgende Datei-Transfer kann vom Empfänger nicht mehr heruntergeladen werden:</p>
<div style="background-color: #f0f8ff; border-left: 4px solid #5C8762; padding: 20px; margin: 20px 0; border-radius: 4px;">
<p style="margin: 0;"><strong>Transfer:</strong> {{transfer_title}}</p>
<p style="margin: 10px 0 0 0;"><strong>Abgelaufen am:</strong> {{expiry_date}}</p>
<p style="margin: 10px 0 0 0;"><strong>Enthaltene Dateien:</strong> {{file_count}}</p>
<p style="margin: 10px 0 0 0;"><strong>Empfangene Kunden-Uploads:</strong> {{upload_count}}</p>
</div>
<p>Die Dateien werden noch {{grace_days}} Tage aufbewahrt (bis {{delete_date}}),
damit Sie alles Benötigte erneut teilen oder abrufen können; danach werden sie
automatisch gelöscht.</p>
<p><a href="{{admin_url}}">PicTransfer im Admin-Bereich öffnen</a></p>
<p>Mit freundlichen Grüßen,<br>
Ihre PicPeak-Installation</p>`,
body_text_de: `Ein Transfer-Link ist abgelaufen
Der folgende Datei-Transfer kann vom Empfänger nicht mehr heruntergeladen werden:
Transfer: {{transfer_title}}
Abgelaufen am: {{expiry_date}}
Enthaltene Dateien: {{file_count}}
Empfangene Kunden-Uploads: {{upload_count}}
Die Dateien werden noch {{grace_days}} Tage aufbewahrt (bis {{delete_date}}),
danach werden sie automatisch gelöscht.
PicTransfer im Admin-Bereich öffnen: {{admin_url}}
Mit freundlichen Grüßen,
Ihre PicPeak-Installation`,
variables: JSON.stringify([
'transfer_title', 'expiry_date', 'file_count', 'upload_count',
'grace_days', 'delete_date', 'admin_url',
]),
});
}
};
exports.down = async function (knex) {
if (await knex.schema.hasTable('feature_flags')) {
await knex('feature_flags').where({ key: 'transfers' }).del();
}
await knex('email_templates').where('template_key', 'transfer_link_expired').del();
await knex('app_settings')
.whereIn('setting_key', [
'transfer_default_expiry_days',
'transfer_default_grace_days',
'transfer_default_max_downloads',
'transfer_max_upload_size_mb',
'transfer_upload_allowed_mime',
])
.del();
await knex.schema.dropTableIfExists('transfer_downloads');
await knex.schema.dropTableIfExists('transfer_uploads');
await knex.schema.dropTableIfExists('transfer_files');
await knex.schema.dropTableIfExists('transfers');
};
@@ -0,0 +1,157 @@
/**
* Migration 171: PicTransfer — admin-uploaded deliverable files + email delivery
* (follow-up to #997).
*
* 170 shipped the base feature; this adds two things the create flow now needs:
*
* transfer_extra_files Files the ADMIN uploads straight into a transfer at
* creation (or later), stored as the transfer's own
* bytes under `transfers/{id}/files/…`. Unlike
* transfer_files (which reference gallery `photos`),
* these have no event/photo — they are the operator's
* own attachments and are part of the recipient's
* download alongside the picked event photos. Deleted
* with the transfer (retention sweep / hard delete).
* transfer_recipients When a transfer is delivered by email, the recipient
* address(es) it was sent to (audit + "sent to …" in the
* detail panel). CASCADE with the transfer.
*
* Plus `transfers.delivery_method` ('link' | 'email', default 'link') and a
* recipient-facing `transfer_ready` email template (EN/DE).
*
* 170 is already applied on existing installs, so this is a separate, additive
* migration (Knex won't re-run 170). Fully guarded + idempotent.
*/
exports.up = async function (knex) {
if (!(await knex.schema.hasTable('transfer_extra_files'))) {
await knex.schema.createTable('transfer_extra_files', (table) => {
table.increments('id').primary();
table.integer('transfer_id').unsigned().notNullable()
.references('id').inTable('transfers').onDelete('CASCADE');
table.string('original_filename', 512).notNullable();
// Storage-relative key, e.g. transfers/{id}/files/{stored-name}.
table.string('stored_path', 1024).notNullable();
table.integer('size_bytes');
table.string('mime_type', 100);
table.integer('sort_order').notNullable().defaultTo(0);
table.timestamp('created_at').defaultTo(knex.fn.now());
table.index(['transfer_id'], 'transfer_extra_files_transfer_idx');
});
}
if (!(await knex.schema.hasTable('transfer_recipients'))) {
await knex.schema.createTable('transfer_recipients', (table) => {
table.increments('id').primary();
table.integer('transfer_id').unsigned().notNullable()
.references('id').inTable('transfers').onDelete('CASCADE');
table.string('email', 320).notNullable();
table.timestamp('created_at').defaultTo(knex.fn.now());
table.timestamp('last_sent_at');
table.index(['transfer_id'], 'transfer_recipients_transfer_idx');
});
}
const hasDeliveryMethod = await knex.schema.hasColumn('transfers', 'delivery_method');
if (!hasDeliveryMethod) {
await knex.schema.alterTable('transfers', (table) => {
// 'link' (default — the operator copies/shares the link themselves) or
// 'email' (PicPeak emailed the download link to transfer_recipients).
table.string('delivery_method', 10).notNullable().defaultTo('link');
});
}
// Recipient-facing "your files are ready" email (EN + DE), sent when a
// transfer is created with delivery_method='email'. Mirrors the convention
// of the existing transfer_link_expired admin template (migration 170).
const existingTemplate = await knex('email_templates')
.where('template_key', 'transfer_ready')
.first();
if (!existingTemplate) {
await knex('email_templates').insert({
template_key: 'transfer_ready',
subject_en: 'Your files are ready — {{transfer_title}}',
subject_de: 'Ihre Dateien sind bereit — {{transfer_title}}',
body_html_en: `
<h2>Your files are ready</h2>
<p>{{transfer_title}} has been shared with you.</p>
<div style="background-color: #f0f8ff; border-left: 4px solid #5C8762; padding: 20px; margin: 20px 0; border-radius: 4px;">
<p style="margin: 0;">{{message}}</p>
</div>
<p style="margin: 24px 0;">
<a href="{{download_url}}" class="button">Download your files</a>
</p>
<p><strong>Files:</strong> {{file_count}}<br>
<strong>Available until:</strong> {{expiry_date}}</p>
<p style="color: #888; font-size: 13px;">If the button doesn't work, copy this link into your browser:<br>{{download_url}}</p>
<p>Best regards,<br>
Your PicPeak Installation</p>`,
body_text_en: `Your files are ready
{{transfer_title}} has been shared with you.
{{message}}
Download your files: {{download_url}}
Files: {{file_count}}
Available until: {{expiry_date}}
Best regards,
Your PicPeak Installation`,
body_html_de: `
<h2>Ihre Dateien sind bereit</h2>
<p>{{transfer_title}} wurde mit Ihnen geteilt.</p>
<div style="background-color: #f0f8ff; border-left: 4px solid #5C8762; padding: 20px; margin: 20px 0; border-radius: 4px;">
<p style="margin: 0;">{{message}}</p>
</div>
<p style="margin: 24px 0;">
<a href="{{download_url}}" class="button">Dateien herunterladen</a>
</p>
<p><strong>Dateien:</strong> {{file_count}}<br>
<strong>Verfügbar bis:</strong> {{expiry_date}}</p>
<p style="color: #888; font-size: 13px;">Falls die Schaltfläche nicht funktioniert, kopieren Sie diesen Link in Ihren Browser:<br>{{download_url}}</p>
<p>Mit freundlichen Grüßen,<br>
Ihre PicPeak-Installation</p>`,
body_text_de: `Ihre Dateien sind bereit
{{transfer_title}} wurde mit Ihnen geteilt.
{{message}}
Dateien herunterladen: {{download_url}}
Dateien: {{file_count}}
Verfügbar bis: {{expiry_date}}
Mit freundlichen Grüßen,
Ihre PicPeak-Installation`,
variables: JSON.stringify([
'transfer_title', 'message', 'download_url', 'file_count', 'expiry_date',
]),
});
}
};
exports.down = async function (knex) {
await knex('email_templates').where('template_key', 'transfer_ready').del();
if (await knex.schema.hasColumn('transfers', 'delivery_method')) {
await knex.schema.alterTable('transfers', (table) => {
table.dropColumn('delivery_method');
});
}
await knex.schema.dropTableIfExists('transfer_recipients');
await knex.schema.dropTableIfExists('transfer_extra_files');
};
@@ -0,0 +1,109 @@
/**
* Migration 172: reword the recipient `transfer_ready` email (follow-up to 171).
*
* Two fixes to the copy seeded in 171:
* 1. Warmer, less robotic wording (greeting + natural phrasing + friendly
* sign-off) instead of the terse "has been shared with you" notice.
* 2. The message block is wrapped in `{{#if message}}` so a transfer sent
* WITHOUT a personal note no longer renders an empty coloured box (the
* "grey bar" some clients showed for the always-present empty <div>).
*
* This is a content UPDATE rather than an edit to 171 because 171 has already
* been applied on existing installs — Knex won't re-run it, so the seeded row
* would otherwise keep the old copy. UPDATE reaches both existing rows and
* fresh installs (which run 171's insert first, then this).
*/
const HTML_EN = `
<h2>Your files are ready</h2>
<p>Hi,</p>
<p>{{transfer_title}} is ready for you — you can grab everything with a single click below.</p>
{{#if message}}
<div style="background-color: #f6f6f4; border-left: 4px solid #5C8762; padding: 16px 20px; margin: 20px 0; border-radius: 4px; white-space: pre-line;">{{message}}</div>
{{/if}}
<p style="margin: 28px 0;">
<a href="{{download_url}}" class="button">Download your files</a>
</p>
<p style="color: #555555;">The link stays active until {{expiry_date}} and includes {{file_count}} file(s).</p>
<p style="color: #999999; font-size: 13px;">Button not working? Just copy this link into your browser:<br>{{download_url}}</p>
<p>Enjoy your photos!</p>`;
const TEXT_EN = `Your files are ready
Hi,
{{transfer_title}} is ready for you — grab everything with the link below.
{{#if message}}
{{message}}
{{/if}}
Download your files:
{{download_url}}
The link stays active until {{expiry_date}} and includes {{file_count}} file(s).
Enjoy your photos!`;
const HTML_DE = `
<h2>Ihre Dateien sind bereit</h2>
<p>Hallo,</p>
<p>{{transfer_title}} ist für Sie bereit — mit einem Klick unten können Sie alles herunterladen.</p>
{{#if message}}
<div style="background-color: #f6f6f4; border-left: 4px solid #5C8762; padding: 16px 20px; margin: 20px 0; border-radius: 4px; white-space: pre-line;">{{message}}</div>
{{/if}}
<p style="margin: 28px 0;">
<a href="{{download_url}}" class="button">Dateien herunterladen</a>
</p>
<p style="color: #555555;">Der Link ist bis zum {{expiry_date}} gültig und enthält {{file_count}} Datei(en).</p>
<p style="color: #999999; font-size: 13px;">Funktioniert die Schaltfläche nicht? Kopieren Sie einfach diesen Link in Ihren Browser:<br>{{download_url}}</p>
<p>Viel Freude mit Ihren Fotos!</p>`;
const TEXT_DE = `Ihre Dateien sind bereit
Hallo,
{{transfer_title}} ist für Sie bereit — laden Sie alles über den Link unten herunter.
{{#if message}}
{{message}}
{{/if}}
Dateien herunterladen:
{{download_url}}
Der Link ist bis zum {{expiry_date}} gültig und enthält {{file_count}} Datei(en).
Viel Freude mit Ihren Fotos!`;
exports.up = async function (knex) {
if (!(await knex.schema.hasTable('email_templates'))) return;
await knex('email_templates')
.where('template_key', 'transfer_ready')
.update({
subject_en: '{{transfer_title}} — your files are ready to download',
subject_de: '{{transfer_title}} — Ihre Dateien stehen bereit',
body_html_en: HTML_EN,
body_text_en: TEXT_EN,
body_html_de: HTML_DE,
body_text_de: TEXT_DE,
});
};
// Content-only refresh — nothing structural to reverse. The previous copy is
// preserved in migration 171's insert for reference.
exports.down = async function () {};
+8
View File
@@ -20,6 +20,7 @@ const path = require('path');
const { initializeDatabase, db } = require('./src/database/db');
const { startFileWatcher } = require('./src/services/fileWatcher');
const { startExpirationChecker } = require('./src/services/expirationChecker');
const { startTransferCleanup } = require('./src/services/transferCleanupService');
const { startRevealScheduler } = require('./src/services/revealScheduler');
const { startInvoiceScheduler } = require('./src/services/invoiceSchedulerService');
const { initializeTransporter, startEmailQueueProcessor } = require('./src/services/emailProcessor');
@@ -785,8 +786,12 @@ app.use('/api/admin/ledger', require('./src/routes/adminLedger'));
app.use('/api/admin/vat-codes', require('./src/routes/adminVatCodes'));
app.use('/api/admin/system-health', require('./src/routes/adminSystemHealth'));
app.use('/api/admin/dev', require('./src/routes/adminDev'));
app.use('/api/admin/transfers', require('./src/routes/adminTransfers'));
app.use('/api/public/quotes', require('./src/routes/publicQuotes'));
app.use('/api/public/contracts', require('./src/routes/publicContracts'));
// PicTransfer (#997): recipient download + client upload, token-authenticated.
app.use('/api/public/transfer', require('./src/routes/publicTransfer'));
app.use('/api/public/transfer-upload', require('./src/routes/publicTransferUpload'));
app.use('/api/public/payment-check', require('./src/routes/publicPaymentCheck'));
app.use('/api/public/workflow-approvals', require('./src/routes/publicWorkflowApprovals'));
app.use('/api/admin/event-types', require('./src/routes/adminEventTypes'));
@@ -904,6 +909,9 @@ async function startServer() {
// Start expiration checker
startExpirationChecker();
// PicTransfer retention sweep (#997): expire links, notify admins, and
// hard-delete client uploads once the grace window elapses.
startTransferCleanup();
// Reveal-mode scheduler (#838): minutely stamp for scheduled reveals.
startRevealScheduler();
// CRM invoice scheduler: hourly tick to flush scheduled-send invoices
+6
View File
@@ -88,6 +88,11 @@ const KNOWN_FLAGS = [
// per-event-type presets and global watermark defaults tab. Strictly opt-in;
// gates all slideshow admin UI (per-event card, type preset, settings tab).
'slideshow',
// PicTransfer (migration 170) — cross-event file transfers
// (recipient download link + optional client-upload channel). Strictly
// opt-in; gates the sidebar entry, the /admin/transfers area AND every
// transfer route (admin + public token routes).
'transfers',
// Workflow / automation engine — admin-configurable visual flows (triggers,
// conditions, branches, loops, approval gates). Strictly opt-in; master
// kill-switch for the Workflows admin area AND the engine's runtime side
@@ -122,6 +127,7 @@ const DEFAULT_FLAGS = {
projects: false,
whatsapp: false,
slideshow: false,
transfers: false,
workflows: false,
};
+394
View File
@@ -0,0 +1,394 @@
/**
* Admin → Transfers routes (PicTransfer, #997).
*
* Mounted at /api/admin/transfers. A transfer bundles ORIGINAL photos picked
* from any event into a token-protected download link, and can optionally open
* a short upload token so the client can send files back.
*
* Read = `events.view`; write = `events.edit` (transfers are an
* events/photos-adjacent admin tool, so they ride the same permissions as the
* projects cockpit rather than inventing a new permission).
*/
const express = require('express');
const { body, param } = require('express-validator');
const multer = require('multer');
const path = require('path');
const { adminAuth } = require('../middleware/auth');
const { requirePermission } = require('../middleware/permissions');
const { requireFeatureFlag } = require('../middleware/requireFeatureFlag');
const { handleAsync, validateRequest, successResponse } = require('../utils/routeHelpers');
const { validateFileType } = require('../utils/fileSecurityUtils');
const { sanitizeFilename } = require('../utils/filenameSanitizer');
const { getAppSetting } = require('../utils/appSettings');
const { getStorage } = require('../services/storage');
const transferService = require('../services/transferService');
const logger = require('../utils/logger');
const fs = require('fs');
const router = express.Router();
// --- Admin deliverable-file upload (the files dropped into a transfer) --------
// Bytes are written to a temp dir, handed to the storage backend (so S3 works),
// then the temp copy is removed — same shape as the public client-upload route.
const ADMIN_MAX_FILES = 50;
const DEFAULT_ALLOWED = ['image/jpeg', 'image/png', 'image/webp', 'image/gif', 'image/tiff', 'application/pdf', 'application/zip'];
const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
const tempStorage = multer.diskStorage({
destination: (req, file, cb) => {
const dir = path.join(getStoragePath(), 'temp', 'transfer-admin-uploads');
fs.mkdirSync(dir, { recursive: true });
cb(null, dir);
},
filename: (req, file, cb) => {
const safe = sanitizeFilename(path.basename(file.originalname), 80) || 'file';
cb(null, `${Date.now()}-${Math.round(Math.random() * 1e6)}-${safe}`);
},
});
function buildAdminUploader(maxSizeBytes, allowed) {
return multer({
storage: tempStorage,
limits: { fileSize: maxSizeBytes, files: ADMIN_MAX_FILES },
fileFilter: (req, file, cb) => {
if (validateFileType(file.originalname, file.mimetype, allowed)) return cb(null, true);
return cb(new Error('This file type is not allowed'));
},
}).array('files', ADMIN_MAX_FILES);
}
/**
* Run multer for a transfer request, reading the size/type limits from settings.
* Resolves { ok:true } or sends a 4xx and resolves { ok:false }.
*/
async function runAdminUpload(req, res) {
const maxSizeMb = Number(await getAppSetting('transfer_max_upload_size_mb', 50)) || 50;
const allowedSetting = await getAppSetting('transfer_upload_allowed_mime', DEFAULT_ALLOWED);
const allowed = Array.isArray(allowedSetting) ? allowedSetting : DEFAULT_ALLOWED;
const uploader = buildAdminUploader(maxSizeMb * 1024 * 1024, allowed);
try {
await new Promise((resolve, reject) => uploader(req, res, (err) => (err ? reject(err) : resolve())));
return { ok: true };
} catch (err) {
const msg = err && err.code === 'LIMIT_FILE_SIZE'
? `Each file must be ${maxSizeMb} MB or smaller`
: (err && err.message) || 'Upload failed';
if (!res.headersSent) res.status(400).json({ error: msg, code: 'UPLOAD_REJECTED' });
return { ok: false };
}
}
/** Persist the uploaded temp files as the transfer's deliverable extra files. */
async function storeExtraFiles(transferId, files) {
if (!files || !files.length) return;
const storage = getStorage();
let i = 0;
for (const file of files) {
i += 1;
const safeName = sanitizeFilename(path.basename(file.originalname), 120) || 'file';
const key = path.posix.join(transferService.extraFilesDirKey(transferId), `${Date.now()}-${i}-${safeName}`);
try {
await storage.putFromFile(key, file.path);
await transferService.addExtraFile(transferId, {
originalFilename: file.originalname,
storedPath: key,
sizeBytes: file.size,
mimeType: file.mimetype,
});
} catch (err) {
logger.error('adminTransfers: failed to store deliverable file', { transferId, error: err.message });
} finally {
try { if (fs.existsSync(file.path)) fs.unlinkSync(file.path); } catch (_) { /* noop */ }
}
}
}
/** Parse a multipart field that carries a JSON array (photoIds, recipientEmails). */
function parseJsonArrayField(value) {
if (Array.isArray(value)) return value;
if (typeof value !== 'string' || !value.trim()) return [];
try {
const parsed = JSON.parse(value);
return Array.isArray(parsed) ? parsed : [];
} catch (_) {
// Fallback: comma-separated (e.g. a raw "[email protected], [email protected]" email field).
return value.split(',').map((s) => s.trim()).filter(Boolean);
}
}
router.use(adminAuth);
// PicTransfer is a strictly opt-in module — refuse every admin transfer route
// when the `transfers` feature flag is off, so a disabled feature is never
// actable even by a direct API hit (the sidebar already hides the surface).
router.use(requireFeatureFlag('transfers'));
/**
* Ownership guard for every `/:id` route. A non-super_admin may only touch a
* transfer they created (or an ownerless legacy row). Foreign AND missing ids
* both 404 so the endpoint isn't an existence oracle — the same posture
* filterOwnedEventIds takes. super_admin is unrestricted.
*/
async function requireTransferOwnership(req, res, next) {
try {
if (req.admin.roleName === 'super_admin') return next();
const id = parseInt(req.params.id, 10);
if (!Number.isInteger(id) || id < 1) return res.status(400).json({ error: 'Invalid id' });
const owner = await transferService.getTransferOwner(id);
if (!owner) return res.status(404).json({ error: 'Transfer not found' });
if (owner.created_by != null && owner.created_by !== req.admin.id) {
return res.status(404).json({ error: 'Transfer not found' });
}
return next();
} catch (err) {
return next(err);
}
}
// List
router.get('/', requirePermission('events.view'), handleAsync(async (req, res) => {
const transfers = await transferService.listTransfers({ search: req.query.q || '', admin: req.admin });
return successResponse(res, { transfers });
}));
// Create. multipart/form-data: text fields + optional `files` (the operator's
// own deliverable files) + `photoIds`/`recipientEmails` as JSON-array fields.
// Uploaded files land as transfer_extra_files; delivery_method='email' emails
// the recipients the download link.
router.post('/',
requirePermission('events.edit'),
handleAsync(async (req, res) => {
const up = await runAdminUpload(req, res);
if (!up.ok) return; // 4xx already sent
const b = req.body || {};
const photoIds = parseJsonArrayField(b.photoIds)
.map(Number).filter((n) => Number.isInteger(n) && n > 0).slice(0, 5000);
const recipientEmails = parseJsonArrayField(b.recipientEmails)
.map((e) => String(e || '').trim()).filter(Boolean).slice(0, 100);
const deliveryMethod = b.deliveryMethod === 'email' ? 'email' : 'link';
const transfer = await transferService.createTransfer({
title: b.title,
message: b.message,
expiresInDays: b.expiresInDays,
maxDownloads: b.maxDownloads,
graceDays: b.graceDays,
allowUploads: b.allowUploads === 'true' || b.allowUploads === true,
uploadExpiresInDays: b.uploadExpiresInDays,
photoIds,
deliveryMethod,
}, req.admin);
await storeExtraFiles(transfer.id, req.files);
if (deliveryMethod === 'email' && recipientEmails.length) {
await transferService.sendTransferEmails(transfer.id, recipientEmails);
}
const fresh = await transferService.getTransfer(transfer.id);
return successResponse(res, { transfer: fresh }, 201, 'Transfer created');
}),
);
// Ownership guard for every `/:id`, `/:id/files`, `/:id/download`, … route.
// One mount covers them all — the POST `/` create + GET `/` list above are not
// matched (no :id), and each route keeps its own requirePermission.
router.use('/:id', requireTransferOwnership);
// Detail
router.get('/:id',
requirePermission('events.view'),
[param('id').isInt({ min: 1 })],
handleAsync(async (req, res) => {
validateRequest(req);
const transfer = await transferService.getTransfer(parseInt(req.params.id, 10));
if (!transfer) return res.status(404).json({ error: 'Transfer not found' });
return successResponse(res, { transfer });
}),
);
// Update
router.patch('/:id',
requirePermission('events.edit'),
[
param('id').isInt({ min: 1 }),
body('title').optional({ nullable: true }).isString().isLength({ max: 255 }),
body('message').optional({ nullable: true }).isString().isLength({ max: 5000 }),
body('maxDownloads').optional({ nullable: true }).isInt({ min: 0, max: 1000000 }),
body('graceDays').optional({ nullable: true }).isInt({ min: 0, max: 365 }),
body('expiresInDays').optional({ nullable: true }).isInt({ min: 1, max: 3650 }),
body('expiresAt').optional({ nullable: true }).isISO8601(),
body('isActive').optional().isBoolean(),
],
handleAsync(async (req, res) => {
validateRequest(req);
const transfer = await transferService.updateTransfer(parseInt(req.params.id, 10), {
title: req.body.title,
message: req.body.message,
maxDownloads: req.body.maxDownloads,
graceDays: req.body.graceDays,
expiresInDays: req.body.expiresInDays,
expiresAt: req.body.expiresAt,
isActive: req.body.isActive,
});
if (!transfer) return res.status(404).json({ error: 'Transfer not found' });
return successResponse(res, { transfer }, 200, 'Transfer updated');
}),
);
// Delete
router.delete('/:id',
requirePermission('events.edit'),
[param('id').isInt({ min: 1 })],
handleAsync(async (req, res) => {
validateRequest(req);
const ok = await transferService.deleteTransfer(parseInt(req.params.id, 10));
if (!ok) return res.status(404).json({ error: 'Transfer not found' });
return successResponse(res, { deleted: true }, 200, 'Transfer deleted');
}),
);
// Add photos (cross-event) to a transfer
router.post('/:id/files',
requirePermission('events.edit'),
[
param('id').isInt({ min: 1 }),
body('photoIds').isArray({ min: 1, max: 5000 }),
body('photoIds.*').isInt({ min: 1 }),
],
handleAsync(async (req, res) => {
validateRequest(req);
const existing = await transferService.getTransfer(parseInt(req.params.id, 10));
if (!existing) return res.status(404).json({ error: 'Transfer not found' });
const transfer = await transferService.addFiles(parseInt(req.params.id, 10), req.body.photoIds, req.admin);
return successResponse(res, { transfer }, 200, 'Files added');
}),
);
// Remove one file from a transfer
router.delete('/:id/files/:fileId',
requirePermission('events.edit'),
[param('id').isInt({ min: 1 }), param('fileId').isInt({ min: 1 })],
handleAsync(async (req, res) => {
validateRequest(req);
const transfer = await transferService.removeFile(
parseInt(req.params.id, 10), parseInt(req.params.fileId, 10),
);
if (!transfer) return res.status(404).json({ error: 'Transfer not found' });
return successResponse(res, { transfer }, 200, 'File removed');
}),
);
// Upload deliverable files into an existing transfer (multipart `files`).
router.post('/:id/upload-files',
requirePermission('events.edit'),
handleAsync(async (req, res) => {
const id = parseInt(req.params.id, 10);
if (!Number.isInteger(id) || id < 1) return res.status(400).json({ error: 'Invalid id' });
const existing = await transferService.getTransfer(id);
if (!existing) return res.status(404).json({ error: 'Transfer not found' });
const up = await runAdminUpload(req, res);
if (!up.ok) return;
if (!req.files || !req.files.length) {
return res.status(400).json({ error: 'No files uploaded', code: 'NO_FILES' });
}
await storeExtraFiles(id, req.files);
const transfer = await transferService.getTransfer(id);
return successResponse(res, { transfer }, 200, 'Files added');
}),
);
// Remove one admin-uploaded deliverable file from a transfer
router.delete('/:id/extra-files/:extraId',
requirePermission('events.edit'),
[param('id').isInt({ min: 1 }), param('extraId').isInt({ min: 1 })],
handleAsync(async (req, res) => {
validateRequest(req);
const transfer = await transferService.removeExtraFile(
parseInt(req.params.id, 10), parseInt(req.params.extraId, 10),
);
if (!transfer) return res.status(404).json({ error: 'Transfer not found' });
return successResponse(res, { transfer }, 200, 'File removed');
}),
);
// Admin download of a single admin-uploaded deliverable file
router.get('/:id/extra-files/:extraId/download',
requirePermission('events.view'),
[param('id').isInt({ min: 1 }), param('extraId').isInt({ min: 1 })],
handleAsync(async (req, res) => {
validateRequest(req);
const transfer = await transferService.getTransfer(parseInt(req.params.id, 10));
if (!transfer) return res.status(404).json({ error: 'Transfer not found' });
const ok = await transferService.streamTransferExtraFile(
{ id: transfer.id }, parseInt(req.params.extraId, 10), res,
);
if (!ok && !res.headersSent) return res.status(404).json({ error: 'File not found' });
}),
);
// Enable / regenerate the client-upload link
router.post('/:id/upload-link',
requirePermission('events.edit'),
[param('id').isInt({ min: 1 }), body('uploadExpiresInDays').optional({ nullable: true }).isInt({ min: 1, max: 3650 })],
handleAsync(async (req, res) => {
validateRequest(req);
const transfer = await transferService.enableUploads(
parseInt(req.params.id, 10), { uploadExpiresInDays: req.body.uploadExpiresInDays },
);
if (!transfer) return res.status(404).json({ error: 'Transfer not found' });
return successResponse(res, { transfer }, 200, 'Upload link enabled');
}),
);
// Disable the client-upload link
router.delete('/:id/upload-link',
requirePermission('events.edit'),
[param('id').isInt({ min: 1 })],
handleAsync(async (req, res) => {
validateRequest(req);
const transfer = await transferService.disableUploads(parseInt(req.params.id, 10));
if (!transfer) return res.status(404).json({ error: 'Transfer not found' });
return successResponse(res, { transfer }, 200, 'Upload link disabled');
}),
);
// Admin download of the whole transfer (ZIP of originals). No expiry/limit
// gate — this is the operator retrieving their own bundle.
router.get('/:id/download',
requirePermission('photos.download'),
[param('id').isInt({ min: 1 })],
handleAsync(async (req, res) => {
validateRequest(req);
const transfer = await transferService.getTransfer(parseInt(req.params.id, 10));
if (!transfer) return res.status(404).json({ error: 'Transfer not found' });
// getTransfer returns the serialized view; streamTransferArchive only needs
// { id, title }, both present on it.
await transferService.streamTransferArchive(transfer, res);
}),
);
// Admin download of a single client-uploaded file
router.get('/:id/uploads/:uploadId/download',
requirePermission('events.view'),
[param('id').isInt({ min: 1 }), param('uploadId').isInt({ min: 1 })],
handleAsync(async (req, res) => {
validateRequest(req);
const upload = await transferService.getUpload(
parseInt(req.params.id, 10), parseInt(req.params.uploadId, 10),
);
if (!upload) return res.status(404).json({ error: 'Upload not found' });
res.setHeader('Content-Type', upload.mime_type || 'application/octet-stream');
res.setHeader('Content-Disposition', `attachment; filename="${encodeURIComponent(upload.original_filename)}"`);
if (upload.localPath && fs.existsSync(upload.localPath)) {
return fs.createReadStream(upload.localPath).pipe(res);
}
// S3 / non-local backend: stream via the storage abstraction.
const { getStorage } = require('../services/storage');
const stream = await getStorage().get(upload.stored_path);
return stream.pipe(res);
}),
);
module.exports = router;
+97
View File
@@ -0,0 +1,97 @@
/**
* Public → Transfer download routes (PicTransfer, #997).
*
* Mounted at /api/public/transfer. NO authentication — the 64-hex token in the
* recipient's link is the only secret. The recipient page has NO thumbnails by
* design; this API exposes filenames + sizes only, never image URLs.
*
* Surface:
* GET /:token metadata view (title, message, file list, expiry)
* GET /:token/download ZIP of all ORIGINAL files
* GET /:token/download/:fileId single ORIGINAL file
*/
const express = require('express');
const rateLimit = require('express-rate-limit');
const { param } = require('express-validator');
const { handleAsync, validateRequest, successResponse } = require('../utils/routeHelpers');
const { requireFeatureFlag } = require('../middleware/requireFeatureFlag');
const { clientIpForAudit } = require('../utils/clientIp');
const transferService = require('../services/transferService');
const router = express.Router();
// Belt-and-braces: a recipient link must stop resolving the moment an admin
// turns PicTransfer off under Settings → Features, same as every other gated
// module. The token is still the only secret; this just fails closed.
router.use(requireFeatureFlag('transfers'));
const viewLimiter = rateLimit({ windowMs: 60 * 1000, max: 60, standardHeaders: true, legacyHeaders: false });
const downloadLimiter = rateLimit({ windowMs: 60 * 1000, max: 20, standardHeaders: true, legacyHeaders: false });
const tokenValidator = [param('token').isString().isLength({ min: 64, max: 64 }).matches(/^[a-f0-9]+$/i)];
// Recipient view. Always resolves for a live (non-deleted) transfer so the page
// can render an "expired" state; file list is only included while downloadable.
router.get('/:token', viewLimiter, tokenValidator, handleAsync(async (req, res) => {
validateRequest(req);
const transfer = await transferService.getTransferByToken(req.params.token);
if (!transfer) return res.status(404).json({ error: 'Not found', code: 'NOT_FOUND' });
const gate = transferService.assertDownloadable(transfer);
if (!gate.ok) {
return successResponse(res, {
transfer: {
title: transfer.title || 'Transfer',
status: gate.code === 'DOWNLOAD_LIMIT_REACHED' ? 'limit_reached' : 'expired',
expires_at: transfer.expires_at,
downloadable: false,
},
});
}
const view = await transferService.getPublicView(transfer);
return successResponse(res, { transfer: { ...view, status: 'active', downloadable: true } });
}));
// Download all as a ZIP of originals.
router.get('/:token/download', downloadLimiter, tokenValidator, handleAsync(async (req, res) => {
validateRequest(req);
const transfer = await transferService.getTransferByToken(req.params.token);
const gate = transferService.assertDownloadable(transfer);
if (!gate.ok) {
return res.status(gate.status).json({ error: 'This link is no longer available', code: gate.code });
}
// Count the download BEFORE streaming so a mid-stream disconnect still
// counts against the cap (matches the "disable after N downloads" intent).
await transferService.recordDownload(transfer, { kind: 'all', ip: clientIpForAudit(req) });
await transferService.streamTransferArchive(transfer, res);
}));
// Download a single original file. The file id is prefixed — `p<id>` for a
// referenced gallery photo, `x<id>` for an admin-uploaded deliverable file (a
// bare number is tolerated as a photo id) — so the service reads the right table.
router.get('/:token/download/:fileId', downloadLimiter,
[...tokenValidator, param('fileId').matches(/^[px]?[0-9]{1,15}$/i)],
handleAsync(async (req, res) => {
validateRequest(req);
const transfer = await transferService.getTransferByToken(req.params.token);
const gate = transferService.assertDownloadable(transfer);
if (!gate.ok) {
return res.status(gate.status).json({ error: 'This link is no longer available', code: gate.code });
}
const ok = await transferService.streamTransferFile(
transfer, req.params.fileId, res,
);
if (!ok && !res.headersSent) {
return res.status(404).json({ error: 'File not found', code: 'FILE_NOT_FOUND' });
}
if (ok) {
await transferService.recordDownload(transfer, {
kind: 'single', photoId: null, ip: clientIpForAudit(req),
});
}
}),
);
module.exports = router;
+187
View File
@@ -0,0 +1,187 @@
/**
* Public → Transfer upload routes (PicTransfer client uploads, #997).
*
* Mounted at /api/public/transfer-upload. NO authentication — a short (6-char)
* upload token in the link is the only secret. This lets a photographer send a
* client "here's a code, upload your logo / files here". Because the token is
* low-entropy, brute force is mitigated by a tight per-route rate limiter plus
* the shared per-IP bad-attempt lockout, and the guard runs BEFORE multer so a
* bad token never costs a disk write.
*
* Surface:
* GET /:token metadata (transfer title, allowed types, size limit)
* POST /:token multipart upload (field name: files)
*/
const express = require('express');
const fs = require('fs');
const path = require('path');
const multer = require('multer');
const rateLimit = require('express-rate-limit');
const { param } = require('express-validator');
const { handleAsync, validateRequest, successResponse } = require('../utils/routeHelpers');
const { requireFeatureFlag } = require('../middleware/requireFeatureFlag');
const { clientIpForAudit } = require('../utils/clientIp');
const { validateFileType } = require('../utils/fileSecurityUtils');
const { sanitizeFilename } = require('../utils/filenameSanitizer');
const { getAppSetting } = require('../utils/appSettings');
const { getStorage } = require('../services/storage');
const transferService = require('../services/transferService');
const { _internal: tokenLock } = require('../utils/publicTokenGuards');
const logger = require('../utils/logger');
const router = express.Router();
// Fail closed when PicTransfer is off — no client upload accepted (or even
// probed) once an admin disables the feature under Settings → Features.
router.use(requireFeatureFlag('transfers'));
const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
const MAX_FILES_PER_UPLOAD = 25;
const DEFAULT_ALLOWED = ['image/jpeg', 'image/png', 'image/webp', 'image/gif', 'image/tiff', 'application/pdf', 'application/zip'];
const infoLimiter = rateLimit({ windowMs: 60 * 1000, max: 30, standardHeaders: true, legacyHeaders: false });
const uploadLimiter = rateLimit({ windowMs: 60 * 1000, max: 10, standardHeaders: true, legacyHeaders: false });
// Upload tokens are drawn from an unambiguous alphabet (see transferService).
// Accept a small range of lengths so a future longer token still validates.
const TOKEN_RE = /^[A-Za-z0-9]{4,16}$/;
async function loadUploadTransfer(req, res) {
const ip = clientIpForAudit(req);
if (tokenLock.isIpLocked(ip)) {
res.status(429).json({ error: 'Too many invalid attempts. Try again later.', code: 'TOKEN_LOOKUP_LOCKED' });
return null;
}
const token = req.params.token;
if (!token || !TOKEN_RE.test(token)) {
res.status(400).json({ error: 'Invalid token format', code: 'BAD_TOKEN' });
return null;
}
const transfer = await transferService.getTransferByUploadToken(token);
if (!transfer) {
tokenLock.recordBadAttempt(ip);
res.status(404).json({ error: 'Not found', code: 'NOT_FOUND' });
return null;
}
const gate = transferService.assertUploadable(transfer);
if (!gate.ok) {
res.status(gate.status).json({ error: 'This upload link is no longer available', code: gate.code });
return null;
}
return transfer;
}
// Metadata for the upload page.
router.get('/:token', infoLimiter, [param('token').matches(TOKEN_RE)], handleAsync(async (req, res) => {
validateRequest(req);
const transfer = await loadUploadTransfer(req, res);
if (!transfer) return;
const maxSizeMb = Number(await getAppSetting('transfer_max_upload_size_mb', 50)) || 50;
const allowed = await getAppSetting('transfer_upload_allowed_mime', DEFAULT_ALLOWED);
return successResponse(res, {
transfer: {
title: transfer.title || 'Upload',
message: transfer.message || null,
expires_at: transfer.upload_expires_at || transfer.expires_at,
max_size_mb: maxSizeMb,
max_files: MAX_FILES_PER_UPLOAD,
allowed_mime: Array.isArray(allowed) ? allowed : DEFAULT_ALLOWED,
},
});
}));
// Pre-multer guard: validates the token + upload eligibility BEFORE any bytes
// touch disk, and stashes the transfer for the destination/handler.
async function preUploadGuard(req, res, next) {
try {
const transfer = await loadUploadTransfer(req, res);
if (!transfer) return; // response already sent
req.transferRow = transfer;
next();
} catch (err) {
logger.error('preUploadGuard error', { error: err.message });
if (!res.headersSent) res.status(500).json({ error: 'Internal error' });
}
}
// Multer writes to a per-transfer temp dir; we then hand files to the storage
// backend (so S3 works too) and delete the temp copy.
const tempStorage = multer.diskStorage({
destination: (req, file, cb) => {
const dir = path.join(getStoragePath(), 'temp', 'transfer-uploads');
fs.mkdirSync(dir, { recursive: true });
cb(null, dir);
},
filename: (req, file, cb) => {
const safe = sanitizeFilename(path.basename(file.originalname), 60) || 'file';
cb(null, `${Date.now()}-${Math.round(Math.random() * 1e6)}-${safe}`);
},
});
function buildUploader(maxSizeBytes, allowed) {
return multer({
storage: tempStorage,
limits: { fileSize: maxSizeBytes, files: MAX_FILES_PER_UPLOAD },
fileFilter: (req, file, cb) => {
if (validateFileType(file.originalname, file.mimetype, allowed)) return cb(null, true);
return cb(new Error('This file type is not allowed'));
},
}).array('files', MAX_FILES_PER_UPLOAD);
}
router.post('/:token', uploadLimiter, [param('token').matches(TOKEN_RE)], preUploadGuard, handleAsync(async (req, res) => {
const transfer = req.transferRow;
const maxSizeMb = Number(await getAppSetting('transfer_max_upload_size_mb', 50)) || 50;
const allowedSetting = await getAppSetting('transfer_upload_allowed_mime', DEFAULT_ALLOWED);
const allowed = Array.isArray(allowedSetting) ? allowedSetting : DEFAULT_ALLOWED;
const uploader = buildUploader(maxSizeMb * 1024 * 1024, allowed);
try {
await new Promise((resolve, reject) => {
uploader(req, res, (err) => (err ? reject(err) : resolve()));
});
} catch (err) {
// Translate multer errors to a clean 4xx.
const msg = err && err.code === 'LIMIT_FILE_SIZE'
? `Each file must be ${maxSizeMb} MB or smaller`
: (err && err.message) || 'Upload failed';
if (!res.headersSent) res.status(400).json({ error: msg, code: 'UPLOAD_REJECTED' });
return;
}
if (!req.files || !req.files.length) {
return res.status(400).json({ error: 'No files uploaded', code: 'NO_FILES' });
}
const storage = getStorage();
const ip = clientIpForAudit(req);
const saved = [];
for (const file of req.files) {
const safeName = sanitizeFilename(path.basename(file.originalname), 120) || 'file';
const key = path.posix.join(transferService.uploadDirKey(transfer.id), `${Date.now()}-${saved.length}-${safeName}`);
try {
await storage.putFromFile(key, file.path);
await transferService.addUpload(transfer.id, {
originalFilename: file.originalname,
storedPath: key,
sizeBytes: file.size,
mimeType: file.mimetype,
ip,
});
saved.push({ filename: file.originalname, size_bytes: file.size });
} catch (err) {
logger.error('transfer upload: failed to store file', { transferId: transfer.id, error: err.message });
} finally {
// Remove the temp copy regardless of outcome.
try { if (fs.existsSync(file.path)) fs.unlinkSync(file.path); } catch (_) { /* noop */ }
}
}
if (!saved.length) {
return res.status(500).json({ error: 'Could not store the uploaded files', code: 'STORE_FAILED' });
}
return successResponse(res, { uploaded: saved.length, files: saved }, 201, 'Files uploaded');
}));
module.exports = router;
@@ -0,0 +1,147 @@
/**
* transferCleanupService — retention lifecycle for PicTransfer (#997).
*
* Runs hourly (offset from the gallery expiration checker so the two don't
* collide) and drives three transitions:
*
* 1. Expire — an active transfer past `expires_at` is disabled
* (is_active=false, disabled_at=now). This is the "disable the
* link after the set time period" behaviour. A transfer
* disabled early by its download cap is already in this state.
* 2. Notify — the admin is emailed once when a transfer becomes inactive
* (admin_notified_at stamped so it never repeats).
* 3. Delete — `grace_days` after disable, the client-uploaded files are
* removed and the transfer record is dropped. (The gallery
* originals a transfer pointed at are owned by their events and
* are never touched — only the transfer's own ad-hoc uploads
* are deleted, which is what the retention cap is about.)
*/
const cron = require('node-cron');
const { db } = require('../database/db');
const logger = require('../utils/logger');
const { formatBoolean } = require('../utils/dbCompat');
const { sendTemplateEmail } = require('./emailProcessor');
const transferService = require('./transferService');
const DAY_MS = 24 * 60 * 60 * 1000;
function startTransferCleanup() {
// Hourly at :15 — staggered from the gallery expiration checker (:00).
cron.schedule('15 * * * *', async () => {
await runTransferCleanup();
});
logger.info('Transfer cleanup scheduler started');
}
async function runTransferCleanup() {
try {
await expireTransfers();
await notifyExpiredTransfers();
await deleteRetiredTransfers();
} catch (err) {
logger.error('Transfer cleanup error', { error: err.message });
}
}
/** Disable links whose time window has passed. */
async function expireTransfers() {
const now = new Date();
const due = await db('transfers')
.where('is_active', formatBoolean(true))
.whereNull('deleted_at')
.whereNotNull('expires_at')
.where('expires_at', '<=', now);
for (const t of due) {
await db('transfers').where({ id: t.id }).update({
is_active: formatBoolean(false),
disabled_at: t.disabled_at || now,
updated_at: now,
});
logger.info(`Transfer ${t.id} expired`);
}
}
/** Email the admin(s) once per transfer that has become inactive. */
async function notifyExpiredTransfers() {
const pending = await db('transfers')
.where('is_active', formatBoolean(false))
.whereNull('deleted_at')
.whereNull('admin_notified_at')
.whereNotNull('disabled_at');
if (!pending.length) return;
const admins = await db('admin_users')
.where('is_active', formatBoolean(true))
.whereNotNull('email')
.select('email');
const adminUrl = `${transferService.getFrontendUrl()}/admin/transfers`;
for (const t of pending) {
const fileCount = await db('transfer_files').where('transfer_id', t.id).count('* as c').first();
const uploadCount = await db('transfer_uploads').where('transfer_id', t.id).count('* as c').first();
const grace = Number(t.grace_days) || 0;
const deleteDate = new Date(new Date(t.disabled_at).getTime() + grace * DAY_MS);
const vars = {
transfer_title: t.title || `Transfer #${t.id}`,
expiry_date: new Date(t.disabled_at).toISOString().slice(0, 10),
file_count: String(Number(fileCount?.c) || 0),
upload_count: String(Number(uploadCount?.c) || 0),
grace_days: String(grace),
delete_date: deleteDate.toISOString().slice(0, 10),
admin_url: adminUrl,
};
let sent = false;
for (const { email } of admins) {
try {
await sendTemplateEmail(email, 'transfer_link_expired', vars);
sent = true;
} catch (err) {
// Email not configured / SMTP down — don't spin forever retrying; just
// stamp so the sweep moves on. The transfer still expires + deletes.
logger.warn('Failed to send transfer_link_expired notification', {
transferId: t.id, email, error: err.message,
});
}
}
// Stamp regardless so we notify at most once even if delivery failed
// (avoids an unbounded retry loop every hour).
await db('transfers').where({ id: t.id }).update({ admin_notified_at: new Date() });
if (sent) logger.info(`Notified admins that transfer ${t.id} expired`);
}
}
/** Hard-delete transfers whose retention window has fully elapsed. */
async function deleteRetiredTransfers() {
const candidates = await db('transfers')
.where('is_active', formatBoolean(false))
.whereNull('deleted_at')
.whereNotNull('disabled_at');
const now = Date.now();
for (const t of candidates) {
const grace = Number(t.grace_days) || 0;
const deleteAt = new Date(t.disabled_at).getTime() + grace * DAY_MS;
if (deleteAt > now) continue;
try {
await transferService.deleteTransfer(t.id);
logger.info(`Transfer ${t.id} deleted after ${grace}-day retention`);
} catch (err) {
logger.error('Failed to delete retired transfer', { transferId: t.id, error: err.message });
}
}
}
module.exports = {
startTransferCleanup,
// exported for tests / manual invocation
runTransferCleanup,
expireTransfers,
notifyExpiredTransfers,
deleteRetiredTransfers,
};
File diff suppressed because it is too large Load Diff
+13
View File
@@ -56,6 +56,9 @@ import { ContractDetailPage } from './pages/admin/contracts/ContractDetailPage';
import { BlockLibraryPage } from './pages/admin/contracts/BlockLibraryPage';
import { PaymentCheckPage } from './pages/public/PaymentCheckPage';
import { AcceptInvitePage } from './pages/public/AcceptInvitePage';
import { TransfersPage } from './pages/admin/transfers/TransfersPage';
import { TransferDownloadPage } from './pages/public/TransferDownloadPage';
import { TransferUploadPage } from './pages/public/TransferUploadPage';
import {
CustomerLoginPage,
CustomerDashboardPage,
@@ -239,6 +242,11 @@ function App() {
<Route path="events/:id" element={<EventDetailsPage />} />
<Route path="events/:id/feedback" element={<EventFeedbackPage />} />
<Route path="archives" element={<ArchivesPage />} />
{/* PicTransfer (#997) — cross-event file transfers.
Gated by the `transfers` flag (strictly opt-in). */}
<Route element={<RequireFeature flag="transfers" />}>
<Route path="transfers" element={<TransfersPage />} />
</Route>
{/* Feature-gated surfaces — redirect to /admin/dashboard when flag is off. */}
<Route element={<RequireFeature flag="analytics" />}>
@@ -412,6 +420,11 @@ function App() {
check email. */}
<Route path="/payment-check/:token" element={<PaymentCheckPage />} />
{/* PicTransfer (#997) — recipient download + client upload,
token-only, no auth. */}
<Route path="/transfer/:token" element={<TransferDownloadPage />} />
<Route path="/transfer-upload/:token" element={<TransferUploadPage />} />
{/* Customer surface (#354). Strictly separate provider /
cookie / API surface from /admin/*. The customerPortal
feature flag hides the *admin-side* surfaces (sidebar
@@ -16,6 +16,7 @@ import {
PanelLeftClose,
PanelLeftOpen,
Github,
Send,
} from 'lucide-react';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
@@ -67,6 +68,7 @@ const navigation: NavItem[] = [
{ nameKey: 'navigation.dashboard', href: '/admin/dashboard', icon: LayoutDashboard, permission: false },
{ nameKey: 'navigation.events', href: '/admin/events', icon: Calendar, permission: 'events.view' },
{ nameKey: 'navigation.archives', href: '/admin/archives', icon: Archive, permission: 'archives.view' },
{ nameKey: 'navigation.transfers', href: '/admin/transfers', icon: Send, permission: 'events.view', featureFlag: 'transfers' },
{ nameKey: 'navigation.messages', href: '/admin/messages', icon: Mail, permission: 'email.view', featureFlag: 'messaging' },
{ nameKey: 'admin.analytics', href: '/admin/analytics', icon: BarChart3, permission: 'analytics.view', featureFlag: 'analytics' },
{ nameKey: 'navigation.settings', href: '/admin/settings', icon: Settings, permission: 'settings.view' },
@@ -0,0 +1,254 @@
/**
* TransferPhotoPicker — cross-event image picker for PicTransfer (#997).
*
* A modal that lets the admin browse ANY event's photos and pick images to add
* to a transfer. Thumbnails are previewed (recipient page has none); a lightbox
* toggle switches image clicks between "select" and "preview". Selection
* persists as the admin hops between events.
*/
import React, { useMemo, useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { X, Check, Image as ImageIcon, Maximize2, Search } from 'lucide-react';
import { Button, Input, Loading } from '../common';
import { AdminAuthenticatedImage } from './AdminAuthenticatedImage';
import { eventsService } from '../../services/events.service';
import { photosService, type AdminPhoto } from '../../services/photos.service';
import { useAdminAuth } from '../../contexts/AdminAuthContext';
export interface PickedPhoto {
id: number;
filename: string;
event_id: number;
event_name: string;
thumbnail_url: string;
}
interface TransferPhotoPickerProps {
onClose: () => void;
onConfirm: (photos: PickedPhoto[]) => void;
excludePhotoIds?: number[];
isSaving?: boolean;
}
export const TransferPhotoPicker: React.FC<TransferPhotoPickerProps> = ({
onClose,
onConfirm,
excludePhotoIds = [],
isSaving = false,
}) => {
const { t } = useTranslation();
const { user } = useAdminAuth();
const [eventSearch, setEventSearch] = useState('');
const [selectedEventId, setSelectedEventId] = useState<number | null>(null);
const [selectedEventName, setSelectedEventName] = useState<string>('');
const [lightboxEnabled, setLightboxEnabled] = useState(false);
const [previewPhoto, setPreviewPhoto] = useState<AdminPhoto | null>(null);
// Persist selection (with metadata) across events.
const [selected, setSelected] = useState<Map<number, PickedPhoto>>(new Map());
const excluded = useMemo(() => new Set(excludePhotoIds), [excludePhotoIds]);
const { data: eventsData, isLoading: eventsLoading } = useQuery({
queryKey: ['transfer-picker-events', eventSearch],
queryFn: () => eventsService.getEvents(1, 100, undefined, eventSearch || undefined),
});
// Only offer events the caller may bundle — mirrors the backend's
// filterOwnedEventIds gate (super_admin unrestricted; others get their own
// events plus ownerless legacy ones). Without this the picker would show
// events whose photos the API silently drops on create — a dead control.
// The backend is still the enforcer; this just keeps the UI honest.
const roleName = user?.roleName || user?.role?.name;
const isSuperAdmin = roleName === 'super_admin';
const events = (eventsData?.events || []).filter((ev) => {
if (isSuperAdmin) return true;
const owner = (ev as { created_by?: number | null }).created_by;
return owner == null || owner === user?.id;
});
const { data: photos, isLoading: photosLoading } = useQuery({
queryKey: ['transfer-picker-photos', selectedEventId],
queryFn: () => photosService.getEventPhotos(selectedEventId as number),
enabled: !!selectedEventId,
});
const togglePhoto = (photo: AdminPhoto) => {
if (excluded.has(photo.id)) return;
setSelected((prev) => {
const next = new Map(prev);
if (next.has(photo.id)) {
next.delete(photo.id);
} else {
next.set(photo.id, {
id: photo.id,
filename: photo.original_filename || photo.filename,
event_id: selectedEventId as number,
event_name: selectedEventName,
thumbnail_url: photo.thumbnail_url || '',
});
}
return next;
});
};
const handlePhotoClick = (photo: AdminPhoto) => {
if (lightboxEnabled) setPreviewPhoto(photo);
else togglePhoto(photo);
};
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div className="flex h-[90vh] w-full max-w-6xl flex-col overflow-hidden rounded-lg bg-white shadow-xl dark:bg-neutral-900">
{/* Header */}
<div className="flex items-center justify-between border-b border-neutral-200 px-5 py-3 dark:border-neutral-700">
<h2 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
{t('transfers.picker.title', 'Select images from other events')}
</h2>
<div className="flex items-center gap-2">
<Button
variant={lightboxEnabled ? 'primary' : 'outline'}
size="sm"
leftIcon={<Maximize2 className="h-4 w-4" />}
onClick={() => setLightboxEnabled((v) => !v)}
>
{t('transfers.picker.lightbox', 'Lightbox')}
</Button>
<button onClick={onClose} className="rounded p-1 text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800">
<X className="h-5 w-5" />
</button>
</div>
</div>
<div className="flex min-h-0 flex-1">
{/* Event list */}
<div className="flex w-64 flex-col border-r border-neutral-200 dark:border-neutral-700">
<div className="p-3">
<Input
leftIcon={<Search className="h-4 w-4" />}
placeholder={t('transfers.picker.searchEvents', 'Search events…')}
value={eventSearch}
onChange={(e) => setEventSearch(e.target.value)}
/>
</div>
<div className="min-h-0 flex-1 overflow-y-auto">
{eventsLoading ? (
<div className="p-4"><Loading /></div>
) : (
events.map((ev) => (
<button
key={ev.id}
onClick={() => { setSelectedEventId(ev.id); setSelectedEventName(ev.event_name); }}
className={`block w-full truncate px-4 py-2 text-left text-sm hover:bg-neutral-100 dark:hover:bg-neutral-800 ${
selectedEventId === ev.id ? 'bg-primary-50 font-medium text-primary-700 dark:bg-neutral-800' : 'text-neutral-700 dark:text-neutral-300'
}`}
>
{ev.event_name}
</button>
))
)}
</div>
</div>
{/* Photo grid */}
<div className="min-h-0 flex-1 overflow-y-auto p-4">
{!selectedEventId ? (
<div className="flex h-full items-center justify-center text-neutral-400">
<div className="text-center">
<ImageIcon className="mx-auto mb-2 h-10 w-10" />
<p>{t('transfers.picker.pickEvent', 'Pick an event to browse its photos')}</p>
</div>
</div>
) : photosLoading ? (
<Loading />
) : !photos || photos.length === 0 ? (
<div className="flex h-full items-center justify-center text-neutral-400">
{t('transfers.picker.noPhotos', 'No photos in this event')}
</div>
) : (
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
{photos.map((photo) => {
const isSelected = selected.has(photo.id);
const isExcluded = excluded.has(photo.id);
return (
<div
key={photo.id}
className={`group relative aspect-square cursor-pointer overflow-hidden rounded-md border-2 ${
isSelected ? 'border-primary-500' : 'border-transparent'
} ${isExcluded ? 'opacity-40' : ''}`}
onClick={() => handlePhotoClick(photo)}
>
{photo.thumbnail_url ? (
<AdminAuthenticatedImage src={photo.thumbnail_url} alt={photo.filename} className="h-full w-full object-cover" />
) : (
<div className="flex h-full w-full items-center justify-center bg-neutral-100 dark:bg-neutral-800">
<ImageIcon className="h-6 w-6 text-neutral-400" />
</div>
)}
{isExcluded && (
<span className="absolute inset-x-0 bottom-0 bg-black/60 py-0.5 text-center text-[10px] text-white">
{t('transfers.picker.alreadyAdded', 'Added')}
</span>
)}
{isSelected && (
<span className="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary-500 text-white">
<Check className="h-3 w-3" />
</span>
)}
</div>
);
})}
</div>
)}
</div>
</div>
{/* Footer */}
<div className="flex items-center justify-between border-t border-neutral-200 px-5 py-3 dark:border-neutral-700">
<span className="text-sm text-neutral-600 dark:text-neutral-400">
{t('transfers.picker.selectedCount', '{{count}} selected', { count: selected.size })}
</span>
<div className="flex gap-2">
<Button variant="outline" onClick={onClose}>{t('common.cancel', 'Cancel')}</Button>
<Button
onClick={() => onConfirm(Array.from(selected.values()))}
disabled={selected.size === 0}
isLoading={isSaving}
>
{t('transfers.picker.addSelected', 'Add selected')}
</Button>
</div>
</div>
</div>
{/* Simple lightbox preview */}
{previewPhoto && (
<div
className="fixed inset-0 z-[60] flex items-center justify-center bg-black/80 p-6"
onClick={() => setPreviewPhoto(null)}
>
<button className="absolute right-4 top-4 rounded p-2 text-white hover:bg-white/10">
<X className="h-6 w-6" />
</button>
<div className="max-h-full max-w-full" onClick={(e) => e.stopPropagation()}>
<AdminAuthenticatedImage
src={`/admin/photos/${selectedEventId}/photo/${previewPhoto.id}`}
alt={previewPhoto.filename}
className="max-h-[80vh] max-w-full rounded object-contain"
/>
<div className="mt-3 flex items-center justify-center gap-3">
<span className="text-sm text-white/80">{previewPhoto.original_filename || previewPhoto.filename}</span>
<Button
size="sm"
variant={selected.has(previewPhoto.id) ? 'outline' : 'primary'}
onClick={() => togglePhoto(previewPhoto)}
>
{selected.has(previewPhoto.id) ? t('transfers.picker.deselect', 'Deselect') : t('transfers.picker.select', 'Select')}
</Button>
</div>
</div>
</div>
)}
</div>
);
};
@@ -64,6 +64,9 @@ export const DEFAULT_FLAGS: FeatureFlags = {
whatsapp: false,
// Live Slideshow ("Diashow") — opt-in; gates all slideshow admin UI.
slideshow: false,
// PicTransfer — opt-in; gates the Transfers sidebar entry, the
// /admin/transfers area and the public recipient/upload pages.
transfers: false,
// Workflow / automation engine — opt-in; gates the Workflows admin area
// and the engine runtime (triggers/actions/gates).
workflows: false,
@@ -23,6 +23,7 @@ import {
Wallet,
FolderKanban,
MonitorPlay,
Send,
Workflow,
} from 'lucide-react';
import { useTranslation } from 'react-i18next';
@@ -133,6 +134,20 @@ export const FeaturesTab: React.FC = () => {
enabled={staged.slideshow}
onToggle={(next) => setFlag('slideshow', next)}
/>
<FeatureCard
icon={Send}
title={t('settings.features.transfers.title', 'PicTransfer')}
description={t(
'settings.features.transfers.description',
'Send original files from any event(s) as a secure, token-protected download link, with an optional client-upload code so clients can send you logos and files back. Strictly opt-in.',
)}
status="new"
statusLabel={statusLabel('new')}
sidebarLabel={t('settings.features.transfers.sidebar', 'PicTransfer')}
enabled={staged.transfers}
onToggle={(next) => setFlag('transfers', next)}
/>
</Section>
{/* Automation — the visual workflow engine. Master kill-switch for the
+112
View File
@@ -203,6 +203,7 @@
"settings": "Einstellungen",
"systemHealth": "Systemzustand",
"archives": "Archive",
"transfers": "PicTransfer",
"emailSettings": "E-Mail-Einstellungen",
"branding": "Markenidentität",
"eventTypes": "Veranstaltungstypen",
@@ -215,6 +216,112 @@
"workflows": "Workflows",
"betaTag": "Beta"
},
"transfers": {
"title": "PicTransfer",
"subtitle": "Originaldateien aus beliebigen Events als Download-Link versenden.",
"new": "Neuer Transfer",
"create": "Transfer erstellen",
"created": "Transfer erstellt",
"createFailed": "Transfer konnte nicht erstellt werden",
"empty": "Noch keine Transfers. Erstellen Sie einen, um Dateien zu teilen.",
"untitled": "Unbenannter Transfer",
"linkCopied": "Link in die Zwischenablage kopiert",
"copyFailed": "Link konnte nicht kopiert werden",
"copyLink": "Link kopieren",
"downloadAll": "Alle herunterladen",
"expiresOn": "Läuft ab",
"disableLink": "Link deaktivieren",
"reactivate": "Reaktivieren (14 Tage)",
"reactivated": "Link reaktiviert",
"disabled": "Link deaktiviert",
"filesAdded": "Dateien hinzugefügt",
"deleted": "Transfer gelöscht",
"deleteConfirmTitle": "Transfer löschen?",
"deleteConfirmBody": "Dies entfernt den Link und alle Kunden-Uploads. Die Fotos der Quell-Events sind nicht betroffen.",
"addImages": "Bilder hinzufügen",
"clientUpload": "Kunden-Upload",
"disableUploads": "Deaktivieren",
"enableUploads": "Upload-Link aktivieren",
"uploadEnabled": "Upload-Link aktiviert",
"noUploads": "Der Kunde hat noch keine Dateien hochgeladen.",
"uploadHint": "Aktivieren Sie dies, um dem Kunden einen 6-stelligen Code zu geben, mit dem er Ihnen Dateien (Logos etc.) senden kann.",
"createAndSend": "Erstellen & senden",
"uploadedFiles": "Hochgeladene Dateien",
"addFiles": "Dateien hinzufügen",
"noUploadedFiles": "Keine hochgeladenen Dateien. Fügen Sie Dateien von Ihrem Computer hinzu, um sie in den Download aufzunehmen.",
"sentTo": "Per E-Mail an",
"delivery": {
"link": "Link teilen",
"email": "Per E-Mail senden"
},
"col": {
"title": "Titel",
"files": "Dateien",
"status": "Status",
"downloads": "Downloads",
"expires": "Läuft ab",
"uploads": "Uploads"
},
"status": {
"active": "Aktiv",
"expired": "Abgelaufen",
"deleted": "Gelöscht"
},
"field": {
"title": "Titel",
"titlePlaceholder": "z. B. Hochzeitsfinals für Familie Schmidt",
"message": "Nachricht (optional)",
"messagePlaceholder": "Wird dem Empfänger auf der Download-Seite angezeigt",
"expiresInDays": "Link aktiv für (Tage)",
"maxDownloads": "Max. Downloads (0 = unbegrenzt)",
"allowUploads": "Dem Kunden zusätzlich einen Upload-Link geben (für Logos etc.)",
"files": "Dateien",
"noFiles": "Noch keine Bilder ausgewählt.",
"uploadFiles": "Eigene Dateien hochladen",
"chooseFiles": "Dateien auswählen",
"noUploadFiles": "Optional Dateien von Ihrem Computer hinzufügen, die mitgesendet werden.",
"delivery": "Zustellung",
"recipients": "E-Mail-Adressen der Empfänger",
"recipientsPlaceholder": "[email protected], [email protected]",
"recipientsCount": "{{count}} Empfänger — jeder erhält den Download-Link",
"recipientsHint": "Mehrere Adressen durch Kommas trennen. Jeder Empfänger erhält den Download-Link."
},
"picker": {
"title": "Bilder aus anderen Events auswählen",
"searchEvents": "Events suchen…",
"pickEvent": "Wählen Sie ein Event, um dessen Fotos zu durchsuchen",
"noPhotos": "Keine Fotos in diesem Event",
"select": "Auswählen",
"deselect": "Abwählen",
"alreadyAdded": "Hinzugefügt",
"selectedCount": "{{count}} ausgewählt",
"addSelected": "Auswahl hinzufügen",
"lightbox": "Lightbox"
},
"public": {
"notFoundTitle": "Link nicht gefunden",
"notFoundBody": "Dieser Transfer-Link ist ungültig oder wurde entfernt.",
"expiredTitle": "Dieser Link ist abgelaufen",
"expiredBody": "Bitte fordern Sie beim Absender einen neuen Link an.",
"limitTitle": "Download-Limit erreicht",
"limitBody": "Dieser Transfer hat die maximale Anzahl an Downloads erreicht.",
"availableUntil": "Verfügbar bis {{date}}",
"fileSummary": "{{count}} Dateien",
"downloadFile": "Herunterladen"
},
"upload": {
"unavailableTitle": "Upload-Link nicht verfügbar",
"unavailableBody": "Dieser Upload-Link ist ungültig oder abgelaufen.",
"doneTitle": "Vielen Dank!",
"doneBody": "Ihre Dateien wurden erfolgreich hochgeladen.",
"uploadMore": "Weitere hochladen",
"dropzone": "Zum Auswählen klicken oder Dateien hierher ziehen",
"limits": "Bis zu {{files}} Dateien, je {{mb}} MB",
"tooBig": "Jede Datei darf höchstens {{mb}} MB groß sein",
"send": "{{count}} Dateien hochladen",
"failed": "Upload fehlgeschlagen. Bitte erneut versuchen."
}
},
"workflows": {
"title": "Workflows",
"subtitle": "Visuelle Automatisierungen Auslöser, Bedingungen, Freigaben und Aktionen.",
@@ -1993,6 +2100,11 @@
"title": "Live-Diashow",
"description": "Ein separater Vollbild-„Diashow“-Link pro Event für Beamer bei Live-Events übernimmt neue Uploads automatisch, mit Voreinstellungen je Event-Typ und globalen Wasserzeichen-Vorgaben unter Einstellungen → Diashow."
},
"transfers": {
"title": "PicTransfer",
"description": "Originaldateien aus beliebigen Events als sicheren, Token-geschützten Download-Link versenden mit optionalem Kunden-Upload-Code, über den Kunden Ihnen Logos und Dateien zurücksenden können. Strikt optional.",
"sidebar": "PicTransfer"
},
"workflows": {
"title": "Workflows",
"description": "Visuelle Automatisierungen auf einer Canvas erstellen Auslöser, Bedingungen, Verzweigungen, Schleifen und Freigabe-Gates für Admins. Deine Mahnstufen und Buchungsschritte werden zu bearbeitbaren Abläufen. Strikt optional.",
+112
View File
@@ -200,6 +200,7 @@
"dashboard": "Dashboard",
"events": "Events",
"archives": "Archives",
"transfers": "PicTransfer",
"messages": "Messages",
"settings": "Settings",
"systemHealth": "System health",
@@ -215,6 +216,112 @@
"workflows": "Workflows",
"betaTag": "Beta"
},
"transfers": {
"title": "PicTransfer",
"subtitle": "Send original files from any event as a download link.",
"new": "New transfer",
"create": "Create transfer",
"created": "Transfer created",
"createFailed": "Could not create transfer",
"empty": "No transfers yet. Create one to share files.",
"untitled": "Untitled transfer",
"linkCopied": "Link copied to clipboard",
"copyFailed": "Could not copy link",
"copyLink": "Copy link",
"downloadAll": "Download all",
"expiresOn": "Expires",
"disableLink": "Disable link",
"reactivate": "Re-activate (14 days)",
"reactivated": "Link re-activated",
"disabled": "Link disabled",
"filesAdded": "Files added",
"deleted": "Transfer deleted",
"deleteConfirmTitle": "Delete transfer?",
"deleteConfirmBody": "This removes the link and any client uploads. Source event photos are not affected.",
"addImages": "Add images",
"clientUpload": "Client upload",
"disableUploads": "Disable",
"enableUploads": "Enable upload link",
"uploadEnabled": "Upload link enabled",
"noUploads": "No files uploaded by the client yet.",
"uploadHint": "Enable this to give the client a 6-character code to send you files (logos etc.).",
"createAndSend": "Create & send",
"uploadedFiles": "Uploaded files",
"addFiles": "Add files",
"noUploadedFiles": "No uploaded files. Add files from your computer to include them in the download.",
"sentTo": "Emailed to",
"delivery": {
"link": "Share a link",
"email": "Send by email"
},
"col": {
"title": "Title",
"files": "Files",
"status": "Status",
"downloads": "Downloads",
"expires": "Expires",
"uploads": "Uploads"
},
"status": {
"active": "Active",
"expired": "Expired",
"deleted": "Deleted"
},
"field": {
"title": "Title",
"titlePlaceholder": "e.g. Wedding finals for the Smiths",
"message": "Message (optional)",
"messagePlaceholder": "Shown to the recipient on the download page",
"expiresInDays": "Link active for (days)",
"maxDownloads": "Max downloads (0 = unlimited)",
"allowUploads": "Also give the client an upload link (to send logos etc.)",
"files": "Files",
"noFiles": "No images selected yet.",
"uploadFiles": "Upload your own files",
"chooseFiles": "Choose files",
"noUploadFiles": "Optionally add files from your computer to send along.",
"delivery": "Delivery",
"recipients": "Recipient email addresses",
"recipientsPlaceholder": "[email protected], [email protected]",
"recipientsCount": "{{count}} recipient(s) — each gets the download link",
"recipientsHint": "Separate multiple addresses with commas. Each recipient gets the download link."
},
"picker": {
"title": "Select images from other events",
"searchEvents": "Search events…",
"pickEvent": "Pick an event to browse its photos",
"noPhotos": "No photos in this event",
"select": "Select",
"deselect": "Deselect",
"alreadyAdded": "Added",
"selectedCount": "{{count}} selected",
"addSelected": "Add selected",
"lightbox": "Lightbox"
},
"public": {
"notFoundTitle": "Link not found",
"notFoundBody": "This transfer link is invalid or has been removed.",
"expiredTitle": "This link has expired",
"expiredBody": "Please ask the sender for a new link.",
"limitTitle": "Download limit reached",
"limitBody": "This transfer has reached its maximum number of downloads.",
"availableUntil": "Available until {{date}}",
"fileSummary": "{{count}} files",
"downloadFile": "Download"
},
"upload": {
"unavailableTitle": "Upload link unavailable",
"unavailableBody": "This upload link is invalid or has expired.",
"doneTitle": "Thank you!",
"doneBody": "Your files were uploaded successfully.",
"uploadMore": "Upload more",
"dropzone": "Click to choose files or drag them here",
"limits": "Up to {{files}} files, {{mb}} MB each",
"tooBig": "Each file must be {{mb}} MB or smaller",
"send": "Upload {{count}} files",
"failed": "Upload failed. Please try again."
}
},
"workflows": {
"title": "Workflows",
"subtitle": "Visual automations — triggers, conditions, gates and actions.",
@@ -1538,6 +1645,11 @@
"title": "Live Slideshow",
"description": "A separate fullscreen \"Diashow\" link per event for projectors at live events — auto-picks-up new uploads, with per-event-type presets and global watermark defaults under Settings → Slideshow."
},
"transfers": {
"title": "PicTransfer",
"description": "Send original files from any event(s) as a secure, token-protected download link, with an optional client-upload code so clients can send you logos and files back. Strictly opt-in.",
"sidebar": "PicTransfer"
},
"workflows": {
"title": "Workflows",
"description": "Build visual automations on a canvas — triggers, conditions, branches, loops and admin approval gates. Your reminder ladder and booking steps become editable flows. Strictly opt-in.",
@@ -0,0 +1,655 @@
/**
* Admin PicTransfer page (#997).
*
* List of transfers + a create flow (with the cross-event image picker) + a
* detail panel to manage files, the recipient link, the client-upload link and
* retention. Recipient downloads always contain ORIGINAL files.
*/
import React, { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { toast } from 'react-toastify';
import {
Plus, Send, Link2, Download, Trash2, Upload, X, Copy, Image as ImageIcon,
Clock, Ban, RefreshCw, Mail, Paperclip, FileText,
} from 'lucide-react';
import { Button, Input, Card, CardContent, Loading, useConfirm } from '../../../components/common';
import { AdminAuthenticatedImage } from '../../../components/admin/AdminAuthenticatedImage';
import { TransferPhotoPicker, type PickedPhoto } from '../../../components/admin/TransferPhotoPicker';
import { useMutationWithToast } from '../../../hooks/useMutationWithToast';
import { useLocalizedDate } from '../../../hooks/useLocalizedDate';
import { transfersService } from '../../../services/transfers.service';
function formatBytes(bytes: number | null | undefined): string {
if (!bytes) return '0 B';
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(1024));
return `${(bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
}
function recipientUrl(token: string): string {
return `${window.location.origin}/transfer/${token}`;
}
function uploadUrl(uploadToken: string): string {
return `${window.location.origin}/transfer-upload/${uploadToken}`;
}
const STATUS_STYLES: Record<string, string> = {
active: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
expired: 'bg-neutral-200 text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300',
deleted: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
};
export const TransfersPage: React.FC = () => {
const { t } = useTranslation();
const confirm = useConfirm();
const { formatDateTime } = useLocalizedDate();
const fmtDate = (d: string | null) => (d ? formatDateTime(d) : '—');
const [showCreate, setShowCreate] = useState(false);
const [detailId, setDetailId] = useState<number | null>(null);
const { data: transfers, isLoading, refetch } = useQuery({
queryKey: ['admin-transfers'],
queryFn: () => transfersService.list(),
});
const copyLink = async (text: string) => {
try {
await navigator.clipboard.writeText(text);
toast.success(t('transfers.linkCopied', 'Link copied to clipboard'));
} catch {
toast.error(t('transfers.copyFailed', 'Could not copy link'));
}
};
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="flex items-center gap-2 text-2xl font-bold text-neutral-900 dark:text-neutral-100">
<Send className="h-6 w-6" /> {t('transfers.title', 'PicTransfer')}
</h1>
<p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
{t('transfers.subtitle', 'Send original files from any event as a download link.')}
</p>
</div>
<Button leftIcon={<Plus className="h-4 w-4" />} onClick={() => setShowCreate(true)}>
{t('transfers.new', 'New transfer')}
</Button>
</div>
{isLoading ? (
<Loading />
) : !transfers || transfers.length === 0 ? (
<Card>
<CardContent className="py-12 text-center text-neutral-500">
<Send className="mx-auto mb-3 h-10 w-10 text-neutral-300" />
<p>{t('transfers.empty', 'No transfers yet. Create one to share files.')}</p>
</CardContent>
</Card>
) : (
<Card>
<div className="overflow-x-auto">
<table className="min-w-full text-sm">
<thead>
<tr className="border-b border-neutral-200 text-left text-neutral-500 dark:border-neutral-700">
<th className="px-4 py-3 font-medium">{t('transfers.col.title', 'Title')}</th>
<th className="px-4 py-3 font-medium">{t('transfers.col.files', 'Files')}</th>
<th className="px-4 py-3 font-medium">{t('transfers.col.status', 'Status')}</th>
<th className="px-4 py-3 font-medium">{t('transfers.col.downloads', 'Downloads')}</th>
<th className="px-4 py-3 font-medium">{t('transfers.col.expires', 'Expires')}</th>
<th className="px-4 py-3 font-medium">{t('transfers.col.uploads', 'Uploads')}</th>
</tr>
</thead>
<tbody>
{transfers.map((tr) => (
<tr
key={tr.id}
className="cursor-pointer border-b border-neutral-100 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-800/50"
onClick={() => setDetailId(tr.id)}
>
<td className="px-4 py-3 font-medium text-neutral-900 dark:text-neutral-100">
{tr.title || t('transfers.untitled', 'Untitled transfer')}
</td>
<td className="px-4 py-3">{tr.file_count}</td>
<td className="px-4 py-3">
<span className={`rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_STYLES[tr.status] || ''}`}>
{t(`transfers.status.${tr.status}`, tr.status)}
</span>
</td>
<td className="px-4 py-3">
{tr.download_count}{tr.max_downloads ? ` / ${tr.max_downloads}` : ''}
</td>
<td className="px-4 py-3 text-neutral-500 dark:text-neutral-400">{fmtDate(tr.expires_at)}</td>
<td className="px-4 py-3">{tr.allow_uploads ? tr.upload_count : '—'}</td>
</tr>
))}
</tbody>
</table>
</div>
</Card>
)}
{showCreate && (
<CreateTransferModal
onClose={() => setShowCreate(false)}
onCreated={() => { setShowCreate(false); refetch(); }}
/>
)}
{detailId !== null && (
<TransferDetailModal
transferId={detailId}
onClose={() => { setDetailId(null); refetch(); }}
onCopy={copyLink}
confirm={confirm}
/>
)}
</div>
);
};
// ---------------------------------------------------------------------------
// Create modal
// ---------------------------------------------------------------------------
const CreateTransferModal: React.FC<{ onClose: () => void; onCreated: () => void }> = ({ onClose, onCreated }) => {
const { t } = useTranslation();
const [title, setTitle] = useState('');
const [message, setMessage] = useState('');
const [expiresInDays, setExpiresInDays] = useState('14');
const [maxDownloads, setMaxDownloads] = useState('');
const [allowUploads, setAllowUploads] = useState(false);
const [picked, setPicked] = useState<PickedPhoto[]>([]);
const [showPicker, setShowPicker] = useState(false);
const [files, setFiles] = useState<File[]>([]);
const [deliveryMethod, setDeliveryMethod] = useState<'link' | 'email'>('link');
const [emails, setEmails] = useState('');
// Split the free-text recipient field on comma / semicolon / whitespace and
// keep only well-formed addresses. Used both to send and to gate the button.
const parsedEmails = emails
.split(/[,;\s]+/)
.map((e) => e.trim())
.filter((e) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e));
const createMutation = useMutationWithToast({
mutationFn: () => transfersService.create({
title: title.trim(),
message: message.trim() || null,
expiresInDays: parseInt(expiresInDays, 10) || 14,
maxDownloads: maxDownloads ? parseInt(maxDownloads, 10) : null,
allowUploads,
photoIds: picked.map((p) => p.id),
files,
deliveryMethod,
recipientEmails: deliveryMethod === 'email' ? parsedEmails : [],
}),
successMessage: t('transfers.created', 'Transfer created'),
errorMessage: t('transfers.createFailed', 'Could not create transfer'),
onSuccess: onCreated,
});
const addFilesToList = (list: FileList | null) => {
if (!list || !list.length) return;
setFiles((prev) => [...prev, ...Array.from(list)]);
};
const addPicked = (photos: PickedPhoto[]) => {
setPicked((prev) => {
const map = new Map(prev.map((p) => [p.id, p]));
photos.forEach((p) => map.set(p.id, p));
return Array.from(map.values());
});
setShowPicker(false);
};
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div className="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-lg bg-white shadow-xl dark:bg-neutral-900">
<div className="flex items-center justify-between border-b border-neutral-200 px-5 py-3 dark:border-neutral-700">
<h2 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">{t('transfers.new', 'New transfer')}</h2>
<button onClick={onClose} className="rounded p-1 text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800"><X className="h-5 w-5" /></button>
</div>
<div className="min-h-0 flex-1 space-y-4 overflow-y-auto p-5">
<Input label={t('transfers.field.title', 'Title')} value={title} onChange={(e) => setTitle(e.target.value)} placeholder={t('transfers.field.titlePlaceholder', 'e.g. Wedding finals for the Smiths')} />
<div>
<label className="mb-1 block text-sm font-medium text-neutral-700 dark:text-neutral-300">{t('transfers.field.message', 'Message (optional)')}</label>
<textarea
value={message}
onChange={(e) => setMessage(e.target.value)}
rows={2}
className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm dark:border-neutral-600 dark:bg-neutral-800"
placeholder={t('transfers.field.messagePlaceholder', 'Shown to the recipient on the download page')}
/>
</div>
<div className="grid grid-cols-2 gap-4">
<Input type="number" min={1} label={t('transfers.field.expiresInDays', 'Link active for (days)')} value={expiresInDays} onChange={(e) => setExpiresInDays(e.target.value)} />
<Input type="number" min={0} label={t('transfers.field.maxDownloads', 'Max downloads (0 = unlimited)')} value={maxDownloads} onChange={(e) => setMaxDownloads(e.target.value)} placeholder="0" />
</div>
<label className="flex items-center gap-2 text-sm text-neutral-700 dark:text-neutral-300">
<input type="checkbox" checked={allowUploads} onChange={(e) => setAllowUploads(e.target.checked)} className="rounded" />
{t('transfers.field.allowUploads', 'Also give the client an upload link (to send logos etc.)')}
</label>
{/* Picker entry + selection preview */}
<div className="rounded-md border border-neutral-200 p-3 dark:border-neutral-700">
<div className="mb-2 flex items-center justify-between">
<span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
{t('transfers.field.files', 'Files')} · {picked.length}
</span>
<Button size="sm" variant="outline" leftIcon={<ImageIcon className="h-4 w-4" />} onClick={() => setShowPicker(true)}>
{t('transfers.picker.title', 'Select images from other events')}
</Button>
</div>
{picked.length === 0 ? (
<p className="text-sm text-neutral-400">{t('transfers.field.noFiles', 'No images selected yet.')}</p>
) : (
<div className="grid grid-cols-6 gap-2">
{picked.slice(0, 18).map((p) => (
<div key={p.id} className="relative aspect-square overflow-hidden rounded">
{p.thumbnail_url ? (
<AdminAuthenticatedImage src={p.thumbnail_url} alt={p.filename} className="h-full w-full object-cover" />
) : <div className="h-full w-full bg-neutral-100 dark:bg-neutral-800" />}
<button
onClick={() => setPicked((prev) => prev.filter((x) => x.id !== p.id))}
className="absolute right-0.5 top-0.5 rounded-full bg-black/60 p-0.5 text-white"
><X className="h-3 w-3" /></button>
</div>
))}
{picked.length > 18 && (
<div className="flex aspect-square items-center justify-center rounded bg-neutral-100 text-xs text-neutral-500 dark:bg-neutral-800">
+{picked.length - 18}
</div>
)}
</div>
)}
</div>
{/* Upload your own files (deliverables not tied to an event) */}
<div className="rounded-md border border-neutral-200 p-3 dark:border-neutral-700">
<div className="mb-2 flex items-center justify-between">
<span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
{t('transfers.field.uploadFiles', 'Upload your own files')} · {files.length}
</span>
<label className="inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-neutral-300 px-2.5 py-1.5 text-sm text-neutral-700 hover:bg-neutral-50 dark:border-neutral-600 dark:text-neutral-300 dark:hover:bg-neutral-800">
<Upload className="h-4 w-4" />
{t('transfers.field.chooseFiles', 'Choose files')}
<input
type="file"
multiple
className="hidden"
onChange={(e) => { addFilesToList(e.target.files); e.target.value = ''; }}
/>
</label>
</div>
{files.length === 0 ? (
<p className="text-sm text-neutral-400">{t('transfers.field.noUploadFiles', 'Optionally add files from your computer to send along.')}</p>
) : (
<ul className="divide-y divide-neutral-100 dark:divide-neutral-800">
{files.map((f, idx) => (
<li key={`${f.name}-${idx}`} className="flex items-center justify-between py-1.5 text-sm">
<span className="flex min-w-0 items-center gap-2">
<FileText className="h-4 w-4 shrink-0 text-neutral-400" />
<span className="truncate text-neutral-700 dark:text-neutral-300">{f.name}</span>
</span>
<button
type="button"
onClick={() => setFiles((prev) => prev.filter((_, i) => i !== idx))}
className="rounded p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:bg-neutral-700"
><X className="h-3.5 w-3.5" /></button>
</li>
))}
</ul>
)}
</div>
{/* Delivery: copy a link yourself, or email it to recipients */}
<div className="rounded-md border border-neutral-200 p-3 dark:border-neutral-700">
<span className="mb-2 block text-sm font-medium text-neutral-700 dark:text-neutral-300">
{t('transfers.field.delivery', 'Delivery')}
</span>
<div className="flex gap-2">
<Button
type="button"
variant={deliveryMethod === 'link' ? 'primary' : 'outline'}
className="flex-1"
leftIcon={<Link2 className="h-4 w-4" />}
onClick={() => setDeliveryMethod('link')}
>
{t('transfers.delivery.link', 'Share a link')}
</Button>
<Button
type="button"
variant={deliveryMethod === 'email' ? 'primary' : 'outline'}
className="flex-1"
leftIcon={<Mail className="h-4 w-4" />}
onClick={() => setDeliveryMethod('email')}
>
{t('transfers.delivery.email', 'Send by email')}
</Button>
</div>
{deliveryMethod === 'email' && (
<div className="mt-3">
<label className="mb-1 block text-sm font-medium text-neutral-700 dark:text-neutral-300">
{t('transfers.field.recipients', 'Recipient email addresses')}
</label>
<textarea
value={emails}
onChange={(e) => setEmails(e.target.value)}
rows={2}
className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm dark:border-neutral-600 dark:bg-neutral-800"
placeholder={t('transfers.field.recipientsPlaceholder', '[email protected], [email protected]')}
/>
<p className="mt-1 text-xs text-neutral-400">
{parsedEmails.length > 0
? t('transfers.field.recipientsCount', '{{count}} recipient(s) — each gets the download link', { count: parsedEmails.length })
: t('transfers.field.recipientsHint', 'Separate multiple addresses with commas. Each recipient gets the download link.')}
</p>
</div>
)}
</div>
</div>
<div className="flex justify-end gap-2 border-t border-neutral-200 px-5 py-3 dark:border-neutral-700">
<Button variant="outline" onClick={onClose}>{t('common.cancel', 'Cancel')}</Button>
<Button
onClick={() => createMutation.mutate()}
isLoading={createMutation.isPending}
disabled={
(picked.length === 0 && files.length === 0 && !allowUploads)
|| (deliveryMethod === 'email' && parsedEmails.length === 0)
}
>
{deliveryMethod === 'email'
? t('transfers.createAndSend', 'Create & send')
: t('transfers.create', 'Create transfer')}
</Button>
</div>
</div>
{showPicker && (
<TransferPhotoPicker
onClose={() => setShowPicker(false)}
onConfirm={addPicked}
excludePhotoIds={picked.map((p) => p.id)}
/>
)}
</div>
);
};
// ---------------------------------------------------------------------------
// Detail modal
// ---------------------------------------------------------------------------
interface DetailProps {
transferId: number;
onClose: () => void;
onCopy: (text: string) => void;
confirm: ReturnType<typeof useConfirm>;
}
const TransferDetailModal: React.FC<DetailProps> = ({ transferId, onClose, onCopy, confirm }) => {
const { t } = useTranslation();
const { formatDateTime } = useLocalizedDate();
const fmtDate = (d: string | null) => (d ? formatDateTime(d) : '—');
const [showPicker, setShowPicker] = useState(false);
const { data: transfer, isLoading, refetch } = useQuery({
queryKey: ['admin-transfer', transferId],
queryFn: () => transfersService.get(transferId),
});
const addFilesMutation = useMutationWithToast({
mutationFn: (photoIds: number[]) => transfersService.addFiles(transferId, photoIds),
successMessage: t('transfers.filesAdded', 'Files added'),
onSuccess: () => refetch(),
});
const removeFileMutation = useMutationWithToast({
mutationFn: (fileId: number) => transfersService.removeFile(transferId, fileId),
onSuccess: () => refetch(),
});
const disableMutation = useMutationWithToast({
mutationFn: () => transfersService.update(transferId, { isActive: false }),
successMessage: t('transfers.disabled', 'Link disabled'),
onSuccess: () => refetch(),
});
const reactivateMutation = useMutationWithToast({
mutationFn: () => transfersService.update(transferId, { isActive: true, expiresInDays: 14 }),
successMessage: t('transfers.reactivated', 'Link re-activated'),
onSuccess: () => refetch(),
});
const enableUploadsMutation = useMutationWithToast({
mutationFn: () => transfersService.enableUploads(transferId),
successMessage: t('transfers.uploadEnabled', 'Upload link enabled'),
onSuccess: () => refetch(),
});
const disableUploadsMutation = useMutationWithToast({
mutationFn: () => transfersService.disableUploads(transferId),
onSuccess: () => refetch(),
});
const deleteMutation = useMutationWithToast({
mutationFn: () => transfersService.remove(transferId),
successMessage: t('transfers.deleted', 'Transfer deleted'),
onSuccess: onClose,
});
const uploadFilesMutation = useMutationWithToast({
mutationFn: (list: File[]) => transfersService.uploadFiles(transferId, list),
successMessage: t('transfers.filesAdded', 'Files added'),
onSuccess: () => refetch(),
});
const removeExtraFileMutation = useMutationWithToast({
mutationFn: (extraId: number) => transfersService.removeExtraFile(transferId, extraId),
onSuccess: () => refetch(),
});
const handleDelete = async () => {
const ok = await confirm({
title: t('transfers.deleteConfirmTitle', 'Delete transfer?'),
message: t('transfers.deleteConfirmBody', 'This removes the link and any client uploads. Source event photos are not affected.'),
variant: 'danger',
});
if (ok) deleteMutation.mutate();
};
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div className="flex max-h-[92vh] w-full max-w-3xl flex-col overflow-hidden rounded-lg bg-white shadow-xl dark:bg-neutral-900">
<div className="flex items-center justify-between border-b border-neutral-200 px-5 py-3 dark:border-neutral-700">
<h2 className="truncate text-lg font-semibold text-neutral-900 dark:text-neutral-100">
{transfer?.title || t('transfers.untitled', 'Untitled transfer')}
</h2>
<button onClick={onClose} className="rounded p-1 text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800"><X className="h-5 w-5" /></button>
</div>
{isLoading || !transfer ? (
<div className="p-8"><Loading /></div>
) : (
<div className="min-h-0 flex-1 space-y-5 overflow-y-auto p-5">
{/* Prominent recipient link + download-all, up top */}
<div className="rounded-lg border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800/50">
<div className="flex flex-wrap items-center gap-2">
<Input readOnly value={recipientUrl(transfer.token)} className="flex-1 min-w-[220px]" />
<Button variant="outline" leftIcon={<Copy className="h-4 w-4" />} onClick={() => onCopy(recipientUrl(transfer.token))}>
{t('transfers.copyLink', 'Copy link')}
</Button>
<a href={transfersService.adminDownloadUrl(transfer.id)}>
<Button leftIcon={<Download className="h-4 w-4" />}>{t('transfers.downloadAll', 'Download all')}</Button>
</a>
</div>
<div className="mt-3 flex flex-wrap gap-4 text-sm text-neutral-600 dark:text-neutral-400">
<span className="flex items-center gap-1"><Clock className="h-4 w-4" /> {t('transfers.expiresOn', 'Expires')}: {fmtDate(transfer.expires_at)}</span>
<span>{t('transfers.col.downloads', 'Downloads')}: {transfer.download_count}{transfer.max_downloads ? ` / ${transfer.max_downloads}` : ''}</span>
<span className={`rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_STYLES[transfer.status] || ''}`}>{t(`transfers.status.${transfer.status}`, transfer.status)}</span>
</div>
<div className="mt-3 flex gap-2">
{transfer.is_active ? (
<Button size="sm" variant="outline" leftIcon={<Ban className="h-4 w-4" />} onClick={() => disableMutation.mutate()} isLoading={disableMutation.isPending}>
{t('transfers.disableLink', 'Disable link')}
</Button>
) : (
<Button size="sm" variant="outline" leftIcon={<RefreshCw className="h-4 w-4" />} onClick={() => reactivateMutation.mutate()} isLoading={reactivateMutation.isPending}>
{t('transfers.reactivate', 'Re-activate (14 days)')}
</Button>
)}
<Button size="sm" variant="ghost" className="text-red-600" leftIcon={<Trash2 className="h-4 w-4" />} onClick={handleDelete}>
{t('common.delete', 'Delete')}
</Button>
</div>
</div>
{/* Files */}
<div>
<div className="mb-2 flex items-center justify-between">
<h3 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">{t('transfers.field.files', 'Files')} · {transfer.file_count}</h3>
<Button size="sm" variant="outline" leftIcon={<ImageIcon className="h-4 w-4" />} onClick={() => setShowPicker(true)}>
{t('transfers.addImages', 'Add images')}
</Button>
</div>
{transfer.files && transfer.files.length > 0 ? (
<div className="grid grid-cols-4 gap-3 sm:grid-cols-6">
{transfer.files.map((f) => (
<div key={f.file_id} className="group relative aspect-square overflow-hidden rounded">
<AdminAuthenticatedImage src={f.thumbnail_url} alt={f.filename} className="h-full w-full object-cover" />
<button
onClick={() => removeFileMutation.mutate(f.file_id)}
className="absolute right-1 top-1 rounded-full bg-black/60 p-0.5 text-white opacity-0 transition group-hover:opacity-100"
title={t('common.remove', 'Remove')}
><X className="h-3 w-3" /></button>
<span className="absolute inset-x-0 bottom-0 truncate bg-black/50 px-1 py-0.5 text-[10px] text-white" title={f.event_name}>{f.event_name}</span>
</div>
))}
</div>
) : (
<p className="text-sm text-neutral-400">{t('transfers.field.noFiles', 'No images selected yet.')}</p>
)}
</div>
{/* Admin-uploaded deliverable files */}
<div>
<div className="mb-2 flex items-center justify-between">
<h3 className="flex items-center gap-2 text-sm font-semibold text-neutral-700 dark:text-neutral-300">
<Paperclip className="h-4 w-4" /> {t('transfers.uploadedFiles', 'Uploaded files')} · {transfer.extra_files?.length || 0}
</h3>
<label className="inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-neutral-300 px-2.5 py-1.5 text-sm text-neutral-700 hover:bg-neutral-50 dark:border-neutral-600 dark:text-neutral-300 dark:hover:bg-neutral-800">
<Upload className="h-4 w-4" />
{t('transfers.addFiles', 'Add files')}
<input
type="file"
multiple
className="hidden"
onChange={(e) => {
if (e.target.files?.length) uploadFilesMutation.mutate(Array.from(e.target.files));
e.target.value = '';
}}
/>
</label>
</div>
{transfer.extra_files && transfer.extra_files.length > 0 ? (
<ul className="divide-y divide-neutral-100 dark:divide-neutral-800">
{transfer.extra_files.map((f) => (
<li key={f.id} className="flex items-center justify-between py-2 text-sm">
<span className="flex min-w-0 items-center gap-2">
<FileText className="h-4 w-4 shrink-0 text-neutral-400" />
<span className="truncate text-neutral-700 dark:text-neutral-300">{f.filename}</span>
</span>
<span className="flex shrink-0 items-center gap-3 text-neutral-500">
<span>{formatBytes(f.size_bytes)}</span>
<a href={transfersService.adminExtraFileDownloadUrl(transferId, f.id)} className="text-primary-600 hover:underline">
<Download className="h-4 w-4" />
</a>
<button
onClick={() => removeExtraFileMutation.mutate(f.id)}
className="rounded p-1 text-neutral-400 hover:bg-neutral-100 hover:text-red-600 dark:hover:bg-neutral-700"
title={t('common.remove', 'Remove')}
><X className="h-3.5 w-3.5" /></button>
</span>
</li>
))}
</ul>
) : (
<p className="text-sm text-neutral-400">{t('transfers.noUploadedFiles', 'No uploaded files. Add files from your computer to include them in the download.')}</p>
)}
</div>
{/* Email recipients (when delivered by email) */}
{transfer.recipients && transfer.recipients.length > 0 && (
<div className="rounded-lg border border-neutral-200 p-4 dark:border-neutral-700">
<h3 className="mb-2 flex items-center gap-2 text-sm font-semibold text-neutral-700 dark:text-neutral-300">
<Mail className="h-4 w-4" /> {t('transfers.sentTo', 'Emailed to')}
</h3>
<div className="flex flex-wrap gap-2">
{transfer.recipients.map((r) => (
<span key={r.id} className="rounded-full bg-neutral-100 px-2.5 py-1 text-xs text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300">
{r.email}
</span>
))}
</div>
</div>
)}
{/* Client uploads */}
<div className="rounded-lg border border-neutral-200 p-4 dark:border-neutral-700">
<div className="mb-2 flex items-center justify-between">
<h3 className="flex items-center gap-2 text-sm font-semibold text-neutral-700 dark:text-neutral-300">
<Upload className="h-4 w-4" /> {t('transfers.clientUpload', 'Client upload')}
</h3>
{transfer.allow_uploads ? (
<Button size="sm" variant="ghost" className="text-red-600" onClick={() => disableUploadsMutation.mutate()}>
{t('transfers.disableUploads', 'Disable')}
</Button>
) : (
<Button size="sm" variant="outline" onClick={() => enableUploadsMutation.mutate()} isLoading={enableUploadsMutation.isPending}>
{t('transfers.enableUploads', 'Enable upload link')}
</Button>
)}
</div>
{transfer.allow_uploads && transfer.upload_token ? (
<>
<div className="flex flex-wrap items-center gap-2">
<div className="rounded bg-neutral-100 px-3 py-1.5 font-mono text-lg tracking-widest dark:bg-neutral-800">{transfer.upload_token}</div>
<Input readOnly value={uploadUrl(transfer.upload_token)} className="flex-1 min-w-[200px]" />
<Button variant="outline" size="sm" leftIcon={<Copy className="h-4 w-4" />} onClick={() => onCopy(uploadUrl(transfer.upload_token as string))}>
{t('transfers.copyLink', 'Copy link')}
</Button>
</div>
{transfer.uploads && transfer.uploads.length > 0 ? (
<ul className="mt-3 divide-y divide-neutral-100 dark:divide-neutral-800">
{transfer.uploads.map((u) => (
<li key={u.id} className="flex items-center justify-between py-2 text-sm">
<span className="truncate">{u.original_filename}</span>
<span className="flex items-center gap-3 text-neutral-500">
<span>{formatBytes(u.size_bytes)}</span>
<a href={transfersService.adminUploadDownloadUrl(transferId, u.id)} className="text-primary-600 hover:underline">
<Download className="h-4 w-4" />
</a>
</span>
</li>
))}
</ul>
) : (
<p className="mt-2 text-sm text-neutral-400">{t('transfers.noUploads', 'No files uploaded by the client yet.')}</p>
)}
</>
) : (
<p className="text-sm text-neutral-400">
{t('transfers.uploadHint', 'Enable this to give the client a 6-character code to send you files (logos etc.).')}
</p>
)}
</div>
</div>
)}
</div>
{showPicker && transfer && (
<TransferPhotoPicker
onClose={() => setShowPicker(false)}
onConfirm={(photos) => { addFilesMutation.mutate(photos.map((p) => p.id)); setShowPicker(false); }}
excludePhotoIds={(transfer.files || []).map((f) => f.photo_id)}
isSaving={addFilesMutation.isPending}
/>
)}
</div>
);
};
@@ -0,0 +1,139 @@
/**
* Public recipient download page for PicTransfer (#997).
*
* Token-only (no auth). By design there are NO thumbnails just filenames,
* sizes and a prominent "Download all" button, plus per-file download.
* Files served are always ORIGINALS.
*
* Styling reads the branding theme CSS variables (`--color-*`) rather than
* Tailwind neutral/`dark:` utilities: this is a public page, so it never gets
* the admin `.dark` class the only theming that reaches it is the instance
* branding (colours + light/dark) applied by GlobalThemeProvider. Reading the
* vars keeps it on-brand and correct in both light and dark.
*/
import React from 'react';
import { useParams } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { Download, FileDown, Clock, PackageOpen, AlertCircle } from 'lucide-react';
import { Button, Loading } from '../../components/common';
import { useLocalizedDate } from '../../hooks/useLocalizedDate';
import { transfersService } from '../../services/transfers.service';
function formatBytes(bytes: number | null | undefined): string {
if (!bytes) return '';
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(1024));
return `${(bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
}
export const TransferDownloadPage: React.FC = () => {
const { t } = useTranslation();
const { format } = useLocalizedDate();
const { token } = useParams<{ token: string }>();
const { data, isLoading, isError } = useQuery({
queryKey: ['public-transfer', token],
queryFn: () => transfersService.getPublic(token as string),
enabled: !!token,
retry: false,
});
const wrap = (children: React.ReactNode) => (
<div
className="flex min-h-screen items-center justify-center p-4"
style={{ backgroundColor: 'var(--color-background)', color: 'var(--color-text)' }}
>
<div
className="w-full max-w-lg rounded-lg border shadow-sm"
style={{ backgroundColor: 'var(--color-surface)', borderColor: 'var(--color-surface-border)' }}
>
{children}
</div>
</div>
);
const muted = { color: 'var(--color-muted-text)' } as const;
if (isLoading) return wrap(<div className="p-6"><Loading /></div>);
if (isError || !data) {
return wrap(
<div className="p-8 text-center">
<AlertCircle className="mx-auto mb-3 h-12 w-12" style={muted} />
<h1 className="text-xl font-semibold">{t('transfers.public.notFoundTitle', 'Link not found')}</h1>
<p className="mt-2" style={muted}>{t('transfers.public.notFoundBody', 'This transfer link is invalid or has been removed.')}</p>
</div>,
);
}
if (!data.downloadable) {
const isLimit = data.status === 'limit_reached';
return wrap(
<div className="p-8 text-center">
<Clock className="mx-auto mb-3 h-12 w-12" style={muted} />
<h1 className="text-xl font-semibold">
{isLimit ? t('transfers.public.limitTitle', 'Download limit reached') : t('transfers.public.expiredTitle', 'This link has expired')}
</h1>
<p className="mt-2" style={muted}>
{isLimit
? t('transfers.public.limitBody', 'This transfer has reached its maximum number of downloads.')
: t('transfers.public.expiredBody', 'Please ask the sender for a new link.')}
</p>
</div>,
);
}
return wrap(
<div className="p-6">
<div className="mb-5 text-center">
<PackageOpen className="mx-auto mb-2 h-10 w-10" style={{ color: 'var(--color-accent)' }} />
<h1 className="text-2xl font-bold">{data.title}</h1>
{data.message && <p className="mt-2 whitespace-pre-line" style={muted}>{data.message}</p>}
<p className="mt-2 text-sm" style={muted}>
{t('transfers.public.fileSummary', '{{count}} files', { count: data.file_count || 0 })}
{data.total_bytes ? ` · ${formatBytes(data.total_bytes)}` : ''}
</p>
</div>
{/* Prominent download-all */}
<a href={transfersService.publicDownloadAllUrl(token as string)} className="block">
<Button size="lg" leftIcon={<Download className="h-5 w-5" />} className="w-full">
{t('transfers.downloadAll', 'Download all')}
</Button>
</a>
{data.files && data.files.length > 0 && (
<ul className="mt-5 border-t" style={{ borderColor: 'var(--color-surface-border)' }}>
{data.files.map((f) => (
<li
key={f.file_id}
className="flex items-center justify-between border-b py-2.5 text-sm"
style={{ borderColor: 'var(--color-surface-border)' }}
>
<span className="mr-3 truncate">{f.filename}</span>
<span className="flex shrink-0 items-center gap-3" style={muted}>
{f.size_bytes ? <span>{formatBytes(f.size_bytes)}</span> : null}
<a
href={transfersService.publicFileUrl(token as string, f.file_id)}
className="rounded p-1.5 hover:opacity-70"
style={{ color: 'var(--color-accent)' }}
title={t('transfers.public.downloadFile', 'Download')}
>
<FileDown className="h-4 w-4" />
</a>
</span>
</li>
))}
</ul>
)}
{data.expires_at && (
<p className="mt-5 text-center text-xs" style={muted}>
{t('transfers.public.availableUntil', 'Available until {{date}}', { date: format(data.expires_at) })}
</p>
)}
</div>,
);
};
@@ -0,0 +1,189 @@
/**
* Public client-upload page for PicTransfer (#997).
*
* Token-only (6-char code, no auth). Lets a client send files back to the
* photographer (logos etc.). Reached via /transfer-upload/:token.
*
* Like the recipient download page, styling reads the branding theme CSS
* variables (`--color-*`) rather than Tailwind `dark:` utilities a public
* page never gets the admin `.dark` class, so the branding theme (applied by
* GlobalThemeProvider) is what must drive colours and light/dark here.
*/
import React, { useRef, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { toast } from 'react-toastify';
import { UploadCloud, CheckCircle, AlertCircle, X, File as FileIcon } from 'lucide-react';
import { Button, Loading } from '../../components/common';
import { transfersService } from '../../services/transfers.service';
function formatBytes(bytes: number): string {
if (!bytes) return '0 B';
const units = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(1024));
return `${(bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
}
export const TransferUploadPage: React.FC = () => {
const { t } = useTranslation();
const { token } = useParams<{ token: string }>();
const inputRef = useRef<HTMLInputElement>(null);
const [files, setFiles] = useState<File[]>([]);
const [progress, setProgress] = useState(0);
const [uploading, setUploading] = useState(false);
const [done, setDone] = useState(false);
const { data, isLoading, isError } = useQuery({
queryKey: ['transfer-upload-info', token],
queryFn: () => transfersService.getUploadInfo(token as string),
enabled: !!token,
retry: false,
});
const muted = { color: 'var(--color-muted-text)' } as const;
const wrap = (children: React.ReactNode) => (
<div
className="flex min-h-screen items-center justify-center p-4"
style={{ backgroundColor: 'var(--color-background)', color: 'var(--color-text)' }}
>
<div
className="w-full max-w-lg rounded-lg border shadow-sm"
style={{ backgroundColor: 'var(--color-surface)', borderColor: 'var(--color-surface-border)' }}
>
{children}
</div>
</div>
);
if (isLoading) return wrap(<div className="p-6"><Loading /></div>);
if (isError || !data) {
return wrap(
<div className="p-8 text-center">
<AlertCircle className="mx-auto mb-3 h-12 w-12" style={muted} />
<h1 className="text-xl font-semibold">{t('transfers.upload.unavailableTitle', 'Upload link unavailable')}</h1>
<p className="mt-2" style={muted}>{t('transfers.upload.unavailableBody', 'This upload link is invalid or has expired.')}</p>
</div>,
);
}
const addFiles = (list: FileList | null) => {
if (!list) return;
const incoming = Array.from(list);
setFiles((prev) => {
const merged = [...prev, ...incoming].slice(0, data.max_files);
return merged;
});
};
const handleUpload = async () => {
if (!files.length) return;
const tooBig = files.find((f) => f.size > data.max_size_mb * 1024 * 1024);
if (tooBig) {
toast.error(t('transfers.upload.tooBig', 'Each file must be {{mb}} MB or smaller', { mb: data.max_size_mb }));
return;
}
setUploading(true);
setProgress(0);
try {
await transfersService.upload(token as string, files, setProgress);
setDone(true);
} catch (err) {
const msg = (err as { response?: { data?: { error?: string } } })?.response?.data?.error
|| t('transfers.upload.failed', 'Upload failed. Please try again.');
toast.error(msg);
} finally {
setUploading(false);
}
};
if (done) {
return wrap(
<div className="p-8 text-center">
<CheckCircle className="mx-auto mb-3 h-12 w-12 text-green-500" />
<h1 className="text-xl font-semibold">{t('transfers.upload.doneTitle', 'Thank you!')}</h1>
<p className="mt-2" style={muted}>{t('transfers.upload.doneBody', 'Your files were uploaded successfully.')}</p>
<Button className="mt-5" variant="outline" onClick={() => { setDone(false); setFiles([]); setProgress(0); }}>
{t('transfers.upload.uploadMore', 'Upload more')}
</Button>
</div>,
);
}
return wrap(
<div className="p-6">
<div className="mb-5 text-center">
<UploadCloud className="mx-auto mb-2 h-10 w-10" style={{ color: 'var(--color-accent)' }} />
<h1 className="text-2xl font-bold">{data.title}</h1>
{data.message && <p className="mt-2 whitespace-pre-line" style={muted}>{data.message}</p>}
<p className="mt-2 text-sm" style={muted}>
{t('transfers.upload.limits', 'Up to {{files}} files, {{mb}} MB each', { files: data.max_files, mb: data.max_size_mb })}
</p>
</div>
<button
type="button"
onClick={() => inputRef.current?.click()}
className="flex w-full flex-col items-center justify-center rounded-lg border-2 border-dashed py-10 transition hover:opacity-80"
style={{ borderColor: 'var(--color-surface-border)', color: 'var(--color-muted-text)' }}
onDragOver={(e) => e.preventDefault()}
onDrop={(e) => { e.preventDefault(); addFiles(e.dataTransfer.files); }}
>
<UploadCloud className="mb-2 h-8 w-8" />
<span className="text-sm">{t('transfers.upload.dropzone', 'Click to choose files or drag them here')}</span>
</button>
<input
ref={inputRef}
type="file"
multiple
className="hidden"
onChange={(e) => { addFiles(e.target.files); if (inputRef.current) inputRef.current.value = ''; }}
/>
{files.length > 0 && (
<ul className="mt-4 border-t" style={{ borderColor: 'var(--color-surface-border)' }}>
{files.map((f, idx) => (
<li
key={`${f.name}-${idx}`}
className="flex items-center justify-between border-b py-2 text-sm"
style={{ borderColor: 'var(--color-surface-border)' }}
>
<span className="flex min-w-0 items-center gap-2">
<FileIcon className="h-4 w-4 shrink-0" style={muted} />
<span className="truncate">{f.name}</span>
</span>
<span className="flex shrink-0 items-center gap-3" style={muted}>
<span>{formatBytes(f.size)}</span>
{!uploading && (
<button onClick={() => setFiles((prev) => prev.filter((_, i) => i !== idx))} className="rounded p-1 hover:opacity-70">
<X className="h-4 w-4" />
</button>
)}
</span>
</li>
))}
</ul>
)}
{uploading && (
<div className="mt-4 h-2 w-full overflow-hidden rounded-full" style={{ backgroundColor: 'var(--color-surface-border)' }}>
<div className="h-full transition-all" style={{ width: `${progress}%`, backgroundColor: 'var(--color-accent-dark)' }} />
</div>
)}
<Button
className="mt-5 w-full"
size="lg"
leftIcon={<UploadCloud className="h-5 w-5" />}
onClick={handleUpload}
disabled={files.length === 0}
isLoading={uploading}
>
{t('transfers.upload.send', 'Upload {{count}} files', { count: files.length })}
</Button>
</div>,
);
};
@@ -67,6 +67,11 @@ export type FeatureKey =
// Live Slideshow ("Diashow") — per-event fullscreen kiosk link + presets +
// global watermark settings tab. Strictly opt-in; gates all slideshow UI.
| 'slideshow'
// PicTransfer (migration 170) — cross-event file transfers:
// a token-protected recipient download link plus an optional client-upload
// channel. Strictly opt-in; gates the sidebar entry, the /admin/transfers
// area and every transfer route (admin + public).
| 'transfers'
// Workflow / automation engine — admin-configurable visual flows (triggers,
// conditions, branches, loops, approval gates) built on a canvas. Strictly
// opt-in; gates the Workflows admin area and the engine runtime.
+240
View File
@@ -0,0 +1,240 @@
/**
* Transfers API client (PicTransfer, #997).
*
* Three surfaces share one file:
* - Admin CRUD under /admin/transfers/* (cookie auth).
* - Public recipient download under /public/transfer/:token (token in URL).
* - Public client upload under /public/transfer-upload/:token (6-char token).
*/
import { api } from '../config/api';
import { getApiBaseUrl } from '../utils/url';
export interface TransferFile {
file_id: number;
photo_id: number;
filename: string;
type: string;
size_bytes: number | null;
event_id: number;
event_name: string;
event_slug: string;
thumbnail_url: string;
}
export interface TransferUpload {
id: number;
original_filename: string;
size_bytes: number | null;
mime_type: string | null;
uploader_ip: string | null;
uploaded_at: string;
}
/** An admin-uploaded deliverable file (not a referenced gallery photo). */
export interface TransferExtraFile {
id: number;
filename: string;
size_bytes: number | null;
mime_type: string | null;
}
export interface TransferRecipient {
id: number;
email: string;
last_sent_at: string | null;
}
export interface Transfer {
id: number;
token: string;
title: string;
message: string | null;
expires_at: string;
max_downloads: number | null;
download_count: number;
downloads_remaining: number | null;
is_active: boolean;
disabled_at: string | null;
grace_days: number;
deleted_at: string | null;
allow_uploads: boolean;
delivery_method: 'link' | 'email';
upload_token: string | null;
upload_expires_at: string | null;
created_at: string;
updated_at: string;
status: 'active' | 'expired' | 'deleted';
download_url: string;
upload_url: string | null;
file_count: number;
upload_count: number;
files?: TransferFile[];
extra_files?: TransferExtraFile[];
recipients?: TransferRecipient[];
uploads?: TransferUpload[];
}
export interface CreateTransferInput {
title?: string;
message?: string | null;
expiresInDays?: number;
maxDownloads?: number | null;
graceDays?: number;
allowUploads?: boolean;
uploadExpiresInDays?: number;
photoIds?: number[];
/** 'link' (default) or 'email' — email the download link to recipientEmails. */
deliveryMethod?: 'link' | 'email';
recipientEmails?: string[];
/** The operator's own files to include in the transfer as deliverables. */
files?: File[];
}
export interface UpdateTransferInput {
title?: string;
message?: string | null;
maxDownloads?: number | null;
graceDays?: number;
expiresInDays?: number;
expiresAt?: string;
isActive?: boolean;
}
// --- Public shapes ---
export interface PublicTransferFile {
// Prefixed on the server: `p<id>` = gallery photo, `x<id>` = uploaded file.
file_id: string;
filename: string;
size_bytes: number | null;
}
export interface PublicTransferView {
title: string;
message?: string | null;
status: 'active' | 'expired' | 'limit_reached';
downloadable: boolean;
expires_at: string;
file_count?: number;
total_bytes?: number;
downloads_remaining?: number | null;
files?: PublicTransferFile[];
}
export interface UploadInfo {
title: string;
message: string | null;
expires_at: string;
max_size_mb: number;
max_files: number;
allowed_mime: string[];
}
export const transfersService = {
// --- Admin ---
async list(search = ''): Promise<Transfer[]> {
const res = await api.get('/admin/transfers', { params: search ? { q: search } : {} });
return res.data.transfers;
},
async get(id: number): Promise<Transfer> {
const res = await api.get(`/admin/transfers/${id}`);
return res.data.transfer;
},
async create(input: CreateTransferInput, onProgress?: (pct: number) => void): Promise<Transfer> {
// multipart: the operator's own files ride along with the form fields.
const form = new FormData();
if (input.title != null) form.append('title', input.title);
if (input.message != null) form.append('message', input.message);
if (input.expiresInDays != null) form.append('expiresInDays', String(input.expiresInDays));
if (input.maxDownloads != null) form.append('maxDownloads', String(input.maxDownloads));
if (input.graceDays != null) form.append('graceDays', String(input.graceDays));
form.append('allowUploads', String(!!input.allowUploads));
if (input.uploadExpiresInDays != null) form.append('uploadExpiresInDays', String(input.uploadExpiresInDays));
form.append('photoIds', JSON.stringify(input.photoIds || []));
form.append('deliveryMethod', input.deliveryMethod || 'link');
form.append('recipientEmails', JSON.stringify(input.recipientEmails || []));
(input.files || []).forEach((f) => form.append('files', f));
const res = await api.post('/admin/transfers', form, {
onUploadProgress: (e) => {
if (onProgress && e.total) onProgress(Math.round((e.loaded / e.total) * 100));
},
});
return res.data.transfer;
},
/** Add deliverable files to an existing transfer. */
async uploadFiles(id: number, files: File[], onProgress?: (pct: number) => void): Promise<Transfer> {
const form = new FormData();
files.forEach((f) => form.append('files', f));
const res = await api.post(`/admin/transfers/${id}/upload-files`, form, {
onUploadProgress: (e) => {
if (onProgress && e.total) onProgress(Math.round((e.loaded / e.total) * 100));
},
});
return res.data.transfer;
},
async removeExtraFile(id: number, extraId: number): Promise<Transfer> {
const res = await api.delete(`/admin/transfers/${id}/extra-files/${extraId}`);
return res.data.transfer;
},
adminExtraFileDownloadUrl(id: number, extraId: number): string {
return `${getApiBaseUrl()}/admin/transfers/${id}/extra-files/${extraId}/download`;
},
async update(id: number, input: UpdateTransferInput): Promise<Transfer> {
const res = await api.patch(`/admin/transfers/${id}`, input);
return res.data.transfer;
},
async remove(id: number): Promise<void> {
await api.delete(`/admin/transfers/${id}`);
},
async addFiles(id: number, photoIds: number[]): Promise<Transfer> {
const res = await api.post(`/admin/transfers/${id}/files`, { photoIds });
return res.data.transfer;
},
async removeFile(id: number, fileId: number): Promise<Transfer> {
const res = await api.delete(`/admin/transfers/${id}/files/${fileId}`);
return res.data.transfer;
},
async enableUploads(id: number, uploadExpiresInDays?: number): Promise<Transfer> {
const res = await api.post(`/admin/transfers/${id}/upload-link`, { uploadExpiresInDays });
return res.data.transfer;
},
async disableUploads(id: number): Promise<Transfer> {
const res = await api.delete(`/admin/transfers/${id}/upload-link`);
return res.data.transfer;
},
/** Absolute API URL for the admin ZIP download (cookie auth → usable as href). */
adminDownloadUrl(id: number): string {
return `${getApiBaseUrl()}/admin/transfers/${id}/download`;
},
adminUploadDownloadUrl(id: number, uploadId: number): string {
return `${getApiBaseUrl()}/admin/transfers/${id}/uploads/${uploadId}/download`;
},
// --- Public recipient ---
async getPublic(token: string): Promise<PublicTransferView> {
const res = await api.get(`/public/transfer/${token}`);
return res.data.transfer;
},
publicDownloadAllUrl(token: string): string {
return `${getApiBaseUrl()}/public/transfer/${token}/download`;
},
publicFileUrl(token: string, fileId: string): string {
return `${getApiBaseUrl()}/public/transfer/${token}/download/${fileId}`;
},
// --- Public client upload ---
async getUploadInfo(token: string): Promise<UploadInfo> {
const res = await api.get(`/public/transfer-upload/${token}`);
return res.data.transfer;
},
async upload(token: string, files: File[], onProgress?: (pct: number) => void): Promise<{ uploaded: number }> {
const form = new FormData();
files.forEach((f) => form.append('files', f));
const res = await api.post(`/public/transfer-upload/${token}`, form, {
onUploadProgress: (e) => {
if (onProgress && e.total) onProgress(Math.round((e.loaded / e.total) * 100));
},
});
return res.data;
},
};