fix: use uploadFile for single files to support long filenames and reafactor for linter (#228)

2026-03-16 14:50:26 +01:00
parent a56a5c3ed8
commit db52e4471a
2 changed files with 39 additions and 17 deletions
@@ -42,6 +42,28 @@ export function Share(): ReactElement {

  const isMountedRef = useRef(true)

+  function applyFallbackMetadata(entries: Record<string, string>, indexDocument: string | null) {
+    const count = Object.keys(entries).length
+    const isVideo = Boolean(indexDocument && /.*\.(mp4|webm|ogv)$/i.test(indexDocument))
+    const isAudio = Boolean(indexDocument && /.*\.(mp3|ogg|oga|wav|webm|m4a|aac|flac)$/i.test(indexDocument))
+    const isImage = Boolean(indexDocument && /.*\.(jpg|jpeg|png|gif|webp|svg)$/i.test(indexDocument))
+
+    if (isImage || isVideo || isAudio) {
+      setPreview(`${apiUrl}/bzz/${hash}`)
+    }
+
+    setMetadata({
+      hash,
+      type: count > 1 ? 'folder' : 'unknown',
+      name: indexDocument || hash || '',
+      count,
+      isWebsite: Boolean(indexDocument && /.*\.html?$/i.test(indexDocument)),
+      isVideo,
+      isAudio,
+      isImage,
+    })
+  }
+
  async function prepare() {
    if (!beeApi || !status.all || !hash) {
      return
@@ -79,21 +101,8 @@ export function Share(): ReactElement {
        setMetadata({ ...formattedMetadata, hash })
      } catch {
        // if metadata is not available or invalid go with the default one
-        const count = Object.keys(entries).length
-
        if (!isMountedRef.current) return
-
-        setMetadata({
-          hash,
-          type: count > 1 ? 'folder' : 'unknown',
-          name: hash,
-          count,
-          isWebsite: Boolean(indexDocument && /.*\.html?$/i.test(indexDocument)),
-          isVideo: Boolean(indexDocument && /.*\.(mp4|webm|ogv)$/i.test(indexDocument)),
-          isAudio: Boolean(indexDocument && /.*\.(mp3|ogg|oga|wav|webm|m4a|aac|flac)$/i.test(indexDocument)),
-          isImage: Boolean(indexDocument && /.*\.(jpg|jpeg|png|gif|webp|svg)$/i.test(indexDocument)),
-          // naive assumption based on indexDocument, we don't want to download the whole manifest
-        })
+        applyFallbackMetadata(entries, indexDocument)
      }
    } catch {
      if (!isMountedRef.current) return
@@ -106,7 +115,16 @@ export function Share(): ReactElement {
  }

  function onOpen() {
-    window.open(`${apiUrl}/bzz/${hash}/`, '_blank', 'noopener,noreferrer')
+    if (metadata?.isImage) {
+      const imgUrl = `${apiUrl}/bzz/${hash}`
+      const safeName = (metadata?.name ?? hash).replace(/[&<>"']/g, c => `&#${c.charCodeAt(0)};`)
+      const html = `<!DOCTYPE html><html><head><title>${safeName}</title></head><body style="margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center"><img src="${imgUrl}" alt="${safeName}" style="max-width:100%;max-height:100vh;object-fit:contain"></body></html>`
+      const blob = new Blob([html], { type: 'text/html' })
+      const blobUrl = URL.createObjectURL(blob)
+      window.open(blobUrl, '_blank', 'noopener,noreferrer')
+    } else {
+      window.open(`${apiUrl}/bzz/${hash}/`, '_blank', 'noopener,noreferrer')
+    }
  }

  function onClose() {
@@ -103,6 +103,7 @@ export function Upload(): ReactElement {
    }

    const lastModified = files[0].lastModified
+    const isSingleFile = files.length === 1

    const metafile = new File([JSON.stringify(metadata)], META_FILE_NAME, {
      type: 'application/json',
@@ -114,8 +115,11 @@ export function Upload(): ReactElement {

    await waitUntilStampUsable(stamp.batchID, beeApi)

-    beeApi
-      .uploadFiles(stamp.batchID, fls, { indexDocument, deferred: true })
+    const uploadPromise = isSingleFile
+      ? beeApi.uploadFile(stamp.batchID, fls[0], fls[0].name, { deferred: true })
+      : beeApi.uploadFiles(stamp.batchID, fls, { indexDocument, deferred: true })
+
+    uploadPromise
      .then(hash => {
        putHistory(LocalStorageKeys.uploadHistory, hash.reference.toHex(), getAssetNameFromFiles(files))