refactor(base): expose extractFileId, dedupe URL→file-id parsing

Promote ImageUploadService.extractFileId from private to public so
edit-flow consumers don't re-implement the `/image/original/<id>`
parse. Used by market's CreateProductDialog and activities'
CreateEventDialog when re-populating <ImageUpload> from a stored URL.

Also clarify ImageUpload.removeImage: the `delete_token: ''` placeholder
on re-populated images intentionally skips the server-side DELETE.
We don't own the original upload's one-time token, and removing
client-side shouldn't reach back and wipe shared files.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-05-21 16:13:08 +02:00
commit 2b376bb244
4 changed files with 35 additions and 42 deletions

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ref, computed, nextTick, watch } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
@ -171,7 +171,7 @@ const availableCurrencies = ref<string[]>(['sat'])
const loadingCurrencies = ref(false)
const selectedCategories = ref<string[]>([])
function populateFromEvent(event: TicketedEvent) {
async function populateFromEvent(event: TicketedEvent) {
isPopulating.value = true
const start = splitDateTime(event.event_start_date)
const end = splitDateTime(event.event_end_date)
@ -189,25 +189,24 @@ function populateFromEvent(event: TicketedEvent) {
})
selectedCategories.value = [...(event.categories ?? [])]
if (event.banner) {
// Mirror the URL-to-alias bridge from market's CreateProductDialog
// so the <ImageUpload> renders the existing banner via its pict-rs
// file ID. delete_token is unknown for already-uploaded images, so
// removal just clears the slot client-side.
const url = event.banner
const alias = url.includes('/image/original/')
? url.split('/image/original/')[1]
: url
// Re-render the stored banner via its pict-rs file ID. delete_token
// is intentionally empty: we don't own the original upload's token
// and removing the image on the client should NOT delete the
// server-side file (it may be the user changing their mind about
// re-using it, or the same image referenced elsewhere).
const alias = imageService.extractFileId(event.banner)
bannerImages.value = [
{ alias, isPrimary: true, delete_token: '', details: {} as any },
]
} else {
bannerImages.value = []
}
// Release the watcher guard on the next tick so vee-validate's batched
// updates settle before user input can drive the auto-mirror.
setTimeout(() => {
isPopulating.value = false
}, 0)
// Release the watcher guard after Vue's microtask queue drains so
// vee-validate's batched setValues lands before user input can drive
// the auto-mirror. nextTick is more reliable than setTimeout(0) here
// it waits for the DOM tick *after* all current microtasks.
await nextTick()
isPopulating.value = false
}
watch(() => props.open, async (isOpen) => {
@ -223,7 +222,7 @@ watch(() => props.open, async (isOpen) => {
}
}
if (props.event) {
populateFromEvent(props.event)
await populateFromEvent(props.event)
}
} else {
selectedCategories.value = []

View file

@ -449,7 +449,11 @@ const removeImage = async (imageToRemove: ImageWithMetadata) => {
if (props.disabled) return
try {
// Only try to delete from pict-rs if we have a delete token (newly uploaded images)
// Server-side delete only when we have a delete_token (newly
// uploaded this session). Pre-existing images re-populated from a
// stored URL ship `delete_token: ''` by convention we don't own
// the original upload's one-time token, and removing on the client
// shouldn't reach back and wipe the server-side file.
if (imageToRemove.delete_token) {
await imageService.deleteImage(imageToRemove.delete_token, imageToRemove.alias)
}

View file

@ -300,9 +300,12 @@ export class ImageUploadService extends BaseService {
}
/**
* Extract file ID from alias, handling both file IDs and full URLs
* Extract a pict-rs file ID from an alias, accepting both bare IDs
* and full `/image/original/<id>` URLs. Public so callers
* re-populating uploads from stored URLs (edit flows) don't have to
* re-implement the parse.
*/
private extractFileId(alias: string): string {
extractFileId(alias: string): string {
if (!alias) {
return ''
}

View file

@ -516,30 +516,17 @@ watch(() => props.isOpen, async (isOpen) => {
// Reset form with appropriate initial values
resetForm({ values: initialValues })
// Convert existing image URLs to the format expected by ImageUpload component
// Convert existing image URLs to the format expected by ImageUpload.
// delete_token is intentionally empty for pre-existing images: see
// ImageUploadService.deleteImage gate removing on the client
// should not delete the server-side file.
if (props.product?.images && props.product.images.length > 0) {
// For existing products, we need to convert URLs back to a format ImageUpload can display
uploadedImages.value = props.product.images.map((url, index) => {
let alias = url
// If it's a full pict-rs URL, extract just the file ID
if (url.includes('/image/original/')) {
const parts = url.split('/image/original/')
if (parts.length > 1 && parts[1]) {
alias = parts[1]
}
} else if (url.startsWith('http://') || url.startsWith('https://')) {
// Keep full URLs as-is
alias = url
}
return {
alias: alias,
delete_token: '',
isPrimary: index === 0,
details: {}
}
})
uploadedImages.value = props.product.images.map((url, index) => ({
alias: imageService.extractFileId(url),
delete_token: '',
isPrimary: index === 0,
details: {} as any,
}))
} else {
uploadedImages.value = []
}