fix(16.2): IN-04 make upload ids without crypto.randomUUID

crypto.randomUUID exists only in a secure context, so an admin served
over plain HTTP from a LAN host threw on every editor upload while the
status line still said uploading. uploadRequestId falls back to a v4
UUID from crypto.getRandomValues, or a time and counter id when no
crypto object exists.

assets/src/blogeditor/element.ts

@@ -548,7 +548,7 @@ export class BlogEditorElement extends HTMLElement {
   }
 
   #upload(file: File): void {
-    const id = crypto.randomUUID()
+    const id = uploadRequestId()
     const name = file.name
     const timer = setTimeout(() => {
       if (!this.#pending.delete(id)) return
@@ -640,3 +640,26 @@ export class BlogEditorElement extends HTMLElement {
 function isImage(file: File): boolean {
   return IMAGE_TYPES.includes(file.type)
 }
+
+let uploadCounter = 0
+
+/**
+ * uploadRequestId returns a new id for a summer-upload request. It is
+ * crypto.randomUUID where the admin runs in a secure context. Over plain
+ * HTTP from a host other than localhost randomUUID does not exist, so it is
+ * a version 4 UUID built from crypto.getRandomValues (available in every
+ * context), or a time and counter id when no crypto object exists at all.
+ */
+export function uploadRequestId(): string {
+  const c: Partial<Crypto> | undefined = globalThis.crypto
+  if (c && typeof c.randomUUID === 'function') return c.randomUUID()
+  if (c && typeof c.getRandomValues === 'function') {
+    const bytes = c.getRandomValues(new Uint8Array(16))
+    bytes[6] = (bytes[6]! & 0x0f) | 0x40
+    bytes[8] = (bytes[8]! & 0x3f) | 0x80
+    const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('')
+    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`
+  }
+  uploadCounter += 1
+  return `upload-${Date.now().toString(36)}-${uploadCounter}`
+}

tests/blogeditor/smoke.test.ts

@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import fixture from './fixtures/imported-post.html?raw'
 import { BlogEditorElement, TAG } from '../../assets/src/blogeditor/index'
+import { uploadRequestId } from '../../assets/src/blogeditor/element'
 import { parseEmbedUrl } from '../../assets/src/blogeditor/embed'
 import { isPolicyUrl } from '../../assets/src/blogeditor/extensions'
 import { button, click, fill, form, insertAtBlock, insertAtEveryTextblock, mount, status } from './helpers'
@@ -304,6 +305,37 @@ describe('image uploads', () => {
 
   const png = () => new File([new Uint8Array([137, 80, 78, 71])], 'grzyb.png', { type: 'image/png' })
 
+  // IN-04: over plain HTTP from a host other than localhost the page is not
+  // a secure context and crypto.randomUUID does not exist.
+  it('makes upload ids without crypto.randomUUID outside a secure context', () => {
+    const uuid = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/
+    const real = globalThis.crypto
+    try {
+      vi.stubGlobal('crypto', { getRandomValues: real.getRandomValues.bind(real) })
+      const ids = [uploadRequestId(), uploadRequestId()]
+      expect(ids[0]).toMatch(uuid)
+      expect(ids[1]).toMatch(uuid)
+      expect(ids[0]).not.toBe(ids[1])
+
+      const { el, uploads } = mount('')
+      click(button(el, 'image'))
+      pick(el, [png()])
+      expect(uploads).toHaveLength(1)
+      expect(uploads[0]!.id).toMatch(uuid)
+      expect(status(el)).toBe('Uploading grzyb.png…')
+      answer(el, { id: uploads[0]!.id, url: '/storage/app/uploads/public/journal/grzyb.png' })
+      expect(form(el, 'image')).not.toBeNull()
+
+      vi.stubGlobal('crypto', undefined)
+      const plain = [uploadRequestId(), uploadRequestId()]
+      expect(plain[0]).toMatch(/^upload-[0-9a-z]+-\d+$/)
+      expect(plain[0]).not.toBe(plain[1])
+    } finally {
+      vi.unstubAllGlobals()
+    }
+    expect(globalThis.crypto).toBe(real)
+  })
+
   it('sends a picked image as summer-upload and inserts img with alt text', () => {
     const { el, uploads } = mount('')
     click(button(el, 'image'))