@shhhum/xftp-web 0.4.0 → 0.6.0

package/web/upload.ts

@@ -0,0 +1,170 @@
+import {createCryptoBackend} from './crypto-backend.js'
+import {getServers} from './servers.js'
+import {createProgressRing} from './progress.js'
+import {
+  newXFTPAgent, closeXFTPAgent, uploadFile, encodeDescriptionURI,
+  type EncryptedFileMetadata
+} from '../src/agent.js'
+import {XFTPPermanentError} from '../src/client.js'
+
+const MAX_SIZE = 100 * 1024 * 1024
+
+export function initUpload(app: HTMLElement) {
+  app.innerHTML = `
+    <div class="card">
+      <h1>SimpleX File Transfer</h1>
+      <div id="drop-zone" class="drop-zone">
+        <p>Drag & drop a file here</p>
+        <p class="hint">or</p>
+        <label class="btn" for="file-input">Choose file</label>
+        <input id="file-input" type="file" hidden>
+        <p class="hint">Max 100 MB</p>
+      </div>
+      <div id="upload-progress" class="stage" hidden>
+        <div id="progress-container"></div>
+        <p id="upload-status">Encrypting…</p>
+        <button id="cancel-btn" class="btn btn-secondary">Cancel</button>
+      </div>
+      <div id="upload-complete" class="stage" hidden>
+        <p class="success">File uploaded</p>
+        <div class="link-row">
+          <input id="share-link" data-testid="share-link" readonly>
+          <button id="copy-btn" class="btn">Copy</button>
+        </div>
+        <p class="hint expiry">Files are typically available for 48 hours.</p>
+        <div class="security-note">
+          <p>Your file was encrypted in the browser before upload — the server never sees file contents.</p>
+          <p>The link contains the decryption key in the hash fragment, which the browser never sends to any server.</p>
+          <p>For maximum security, use the <a href="https://simplex.chat" target="_blank" rel="noopener">SimpleX app</a>.</p>
+        </div>
+      </div>
+      <div id="upload-error" class="stage" hidden>
+        <p class="error" id="error-msg"></p>
+        <button id="retry-btn" class="btn">Retry</button>
+      </div>
+    </div>`
+
+  const dropZone = document.getElementById('drop-zone')!
+  const fileInput = document.getElementById('file-input') as HTMLInputElement
+  const progressStage = document.getElementById('upload-progress')!
+  const completeStage = document.getElementById('upload-complete')!
+  const errorStage = document.getElementById('upload-error')!
+  const progressContainer = document.getElementById('progress-container')!
+  const statusText = document.getElementById('upload-status')!
+  const cancelBtn = document.getElementById('cancel-btn')!
+  const shareLink = document.getElementById('share-link') as HTMLInputElement
+  const copyBtn = document.getElementById('copy-btn')!
+  const errorMsg = document.getElementById('error-msg')!
+  const retryBtn = document.getElementById('retry-btn')!
+
+  let aborted = false
+  let pendingFile: File | null = null
+
+  dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over') })
+  dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'))
+  dropZone.addEventListener('drop', e => {
+    e.preventDefault()
+    dropZone.classList.remove('drag-over')
+    const f = e.dataTransfer?.files[0]
+    if (f) startUpload(f)
+  })
+  fileInput.addEventListener('change', () => {
+    if (fileInput.files?.[0]) startUpload(fileInput.files[0])
+  })
+  retryBtn.addEventListener('click', () => {
+    if (pendingFile) startUpload(pendingFile)
+  })
+
+  function showStage(stage: HTMLElement) {
+    for (const s of [dropZone, progressStage, completeStage, errorStage]) s.hidden = true
+    stage.hidden = false
+  }
+
+  function showError(msg: string) {
+    errorMsg.textContent = msg
+    showStage(errorStage)
+  }
+
+  async function startUpload(file: File) {
+    pendingFile = file
+    aborted = false
+
+    if (file.size > MAX_SIZE) {
+      showError(`File too large (${formatSize(file.size)}). Maximum is 100 MB.`)
+      return
+    }
+    if (file.size === 0) {
+      showError('File is empty.')
+      return
+    }
+
+    showStage(progressStage)
+    const ring = createProgressRing()
+    progressContainer.innerHTML = ''
+    progressContainer.appendChild(ring.canvas)
+    statusText.textContent = 'Encrypting…'
+
+    const backend = createCryptoBackend()
+    const agent = newXFTPAgent()
+
+    cancelBtn.onclick = () => {
+      aborted = true
+      backend.cleanup().catch(() => {})
+      closeXFTPAgent(agent)
+      showStage(dropZone)
+    }
+
+    try {
+      const fileData = new Uint8Array(await file.arrayBuffer())
+      if (aborted) return
+
+      const encrypted = await backend.encrypt(fileData, file.name, (done, total) => {
+        ring.update(done / total * 0.3)
+      })
+      if (aborted) return
+
+      statusText.textContent = 'Uploading…'
+      const metadata: EncryptedFileMetadata = {
+        digest: encrypted.digest,
+        key: encrypted.key,
+        nonce: encrypted.nonce,
+        chunkSizes: encrypted.chunkSizes
+      }
+      const servers = getServers()
+      const result = await uploadFile(agent, servers, metadata, {
+        readChunk: (off, sz) => backend.readChunk(off, sz),
+        onProgress: (uploaded, total) => {
+          ring.update(0.3 + (uploaded / total) * 0.7)
+        }
+      })
+      if (aborted) return
+
+      const url = window.location.origin + window.location.pathname + '#' + result.uri
+      shareLink.value = url
+      showStage(completeStage)
+      copyBtn.onclick = () => {
+        navigator.clipboard.writeText(url).then(() => {
+          copyBtn.textContent = 'Copied!'
+          setTimeout(() => { copyBtn.textContent = 'Copy' }, 2000)
+        })
+      }
+    } catch (err: any) {
+      if (!aborted) {
+        const msg = err?.message ?? String(err)
+        showError(msg)
+        // Hide retry button for permanent errors (no point retrying)
+        if (err instanceof XFTPPermanentError) retryBtn.hidden = true
+        else retryBtn.hidden = false
+      }
+    } finally {
+      await backend.cleanup().catch(() => {})
+      closeXFTPAgent(agent)
+    }
+  }
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return bytes + ' B'
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+}

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from "./agent.js"
-export {parseXFTPServer, formatXFTPServer, type XFTPServer} from "./protocol/address.js"
-export {decodeFileDescription, encodeFileDescription, validateFileDescription, type FileDescription, type FileChunk, type FileChunkReplica, type FileParty, type RedirectFileInfo} from "./protocol/description.js"
-export {type FileHeader} from "./crypto/file.js"