mleku/smesh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add media upload progress bar (#479)

Browse Source
This commit is contained in:
Taxil Kathiriya
2025-08-12 02:42:57 +01:00
committed by GitHub
parent e78e2c2078
commit 9969ab2414
5 changed files with 229 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/PostEditor/PostContent.tsx
View File

@@ -11,7 +11,7 @@ import { useNostr } from '@/providers/NostrProvider'
import { useReply } from '@/providers/ReplyProvider'
import postEditorCache from '@/services/post-editor-cache.service'
import { TPollCreateData } from '@/types'
import { ImageUp, ListTodo, LoaderCircle, Settings, Smile } from 'lucide-react'
import { ImageUp, ListTodo, LoaderCircle, Settings, Smile, X } from 'lucide-react'
import { Event, kinds } from 'nostr-tools'
import { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
@@ -41,6 +41,9 @@ export default function PostContent({
const [text, setText] = useState('')
const textareaRef = useRef<TPostTextareaHandle>(null)
const [posting, setPosting] = useState(false)
const [uploadProgress, setUploadProgress] = useState<number | null>(null)
const [uploadFileName, setUploadFileName] = useState<string | null>(null)
const cancelRef = useRef<(() => void) | null>(null)
const [showMoreOptions, setShowMoreOptions] = useState(false)
const [addClientTag, setAddClientTag] = useState(false)
const [specifiedRelayUrls, setSpecifiedRelayUrls] = useState<string[] | undefined>(undefined)
@@ -175,6 +178,17 @@ export default function PostContent({
parentEvent={parentEvent}
onSubmit={() => post()}
className={isPoll ? 'min-h-20' : 'min-h-52'}
onUploadStart={(file) => {
setUploadFileName(file.name)
setUploadProgress(0)
}}
onUploadProgress={(p) => setUploadProgress(p)}
onUploadEnd={() => {
setUploadProgress(null)
setUploadFileName(null)
cancelRef.current = null
}}
onProvideCancel={(cancel) => (cancelRef.current = cancel)}
/>
{isPoll && (
<PollEditor
@@ -190,6 +204,29 @@ export default function PostContent({
setSpecifiedRelayUrls={setSpecifiedRelayUrls}
/>
)}
{uploadProgress !== null && (
<div className="mt-2 flex items-center gap-2">
<div className="min-w-0 flex-1">
<div className="truncate text-xs text-muted-foreground mb-1">
{uploadFileName ?? t('Uploading...')}
</div>
<div className="h-0.5 w-full rounded-full bg-muted overflow-hidden">
<div
className="h-full bg-primary transition-[width] duration-200 ease-out"
style={{ width: `${uploadProgress}%` }}
/>
</div>
</div>
<button
type="button"
onClick={() => cancelRef.current?.()}
className="p-1 text-muted-foreground hover:text-foreground"
title={t('Cancel')}
>
<X className="h-4 w-4" />
</button>
</div>
)}
<div className="flex items-center justify-between">
<div className="flex gap-2 items-center">
<Uploader
@@ -199,10 +236,21 @@ export default function PostContent({
onUploadingChange={(uploading) =>
setUploadingFiles((prev) => (uploading ? prev + 1 : prev - 1))
}
onUploadStart={(file) => {
setUploadFileName(file.name)
setUploadProgress(0)
}}
onUploadEnd={() => {
setUploadProgress(null)
setUploadFileName(null)
cancelRef.current = null
}}
onProgress={(p) => setUploadProgress(p)}
onProvideCancel={(cancel) => (cancelRef.current = cancel)}
accept="image/*,video/*,audio/*"
>
<Button variant="ghost" size="icon" disabled={uploadingFiles > 0}>
{uploadingFiles > 0 ? <LoaderCircle className="animate-spin" /> : <ImageUp />}
<ImageUp />
</Button>
</Uploader>
{/* I'm not sure why, but after triggering the virtual keyboard,

35
src/components/PostEditor/PostTextarea/ClipboardAndDropHandler.ts
View File

@@ -1,6 +1,7 @@
import mediaUpload from '@/services/media-upload.service'
import { Extension } from '@tiptap/core'
import { EditorView } from '@tiptap/pm/view'
import { Slice } from '@tiptap/pm/model'
import { Plugin, TextSelection } from 'prosemirror-state'
const DRAGOVER_CLASS_LIST = [
@@ -15,6 +16,9 @@ export interface ClipboardAndDropHandlerOptions {
onUploadStart?: (file: File) => void
onUploadSuccess?: (file: File, result: any) => void
onUploadError?: (file: File, error: any) => void
onUploadEnd?: () => void
onUploadProgress?: (file: File, progress: number) => void
onProvideCancel?: (cancel: () => void) => void
}
export const ClipboardAndDropHandler = Extension.create<ClipboardAndDropHandlerOptions>({
@@ -24,7 +28,10 @@ export const ClipboardAndDropHandler = Extension.create<ClipboardAndDropHandlerO
return {
onUploadStart: undefined,
onUploadSuccess: undefined,
onUploadError: undefined
onUploadError: undefined,
onUploadEnd: undefined,
onUploadProgress: undefined,
onProvideCancel: undefined
}
},
@@ -35,17 +42,24 @@ export const ClipboardAndDropHandler = Extension.create<ClipboardAndDropHandlerO
new Plugin({
props: {
handleDOMEvents: {
dragenter(view, event) {
event.preventDefault()
view.dom.classList.add(...DRAGOVER_CLASS_LIST)
return true
},
dragover(view, event) {
event.preventDefault()
view.dom.classList.add(...DRAGOVER_CLASS_LIST)
return false
return true
},
dragleave(view) {
view.dom.classList.remove(...DRAGOVER_CLASS_LIST)
return false
return true
}
},
drop(view, event) {
handleDrop(view: EditorView, event: DragEvent, _slice: Slice, _moved: boolean) {
event.preventDefault()
event.stopPropagation()
view.dom.classList.remove(...DRAGOVER_CLASS_LIST)
const items = Array.from(event.dataTransfer?.files ?? [])
@@ -55,9 +69,7 @@ export const ClipboardAndDropHandler = Extension.create<ClipboardAndDropHandlerO
if (!mediaFiles.length) return false
uploadFile(view, mediaFiles, options)
return true
}
},
handlePaste(view, event) {
const items = Array.from(event.clipboardData?.items ?? [])
@@ -121,8 +133,14 @@ async function uploadFile(
tr = tr.insert(tr.selection.from, hardBreakNode)
view.dispatch(tr)
const abortController = new AbortController()
options.onProvideCancel?.(() => abortController.abort())
mediaUpload
.upload(file)
.upload(file, {
onProgress: (p) => options.onUploadProgress?.(file, p),
signal: abortController.signal
})
.then((result) => {
options.onUploadSuccess?.(file, result)
const urlNode = view.state.schema.text(result.url)
@@ -157,6 +175,7 @@ async function uploadFile(
insertTr.setSelection(TextSelection.near(insertTr.doc.resolve(newPos)))
view.dispatch(insertTr)
}
options.onUploadEnd?.()
})
.catch((error) => {
console.error('Upload failed:', error)
@@ -181,7 +200,7 @@ async function uploadFile(
if (didReplace) {
view.dispatch(tr)
}
options.onUploadEnd?.()
throw error
})
}

27
src/components/PostEditor/PostTextarea/index.tsx
View File

@@ -33,8 +33,23 @@ const PostTextarea = forwardRef<
parentEvent?: Event
onSubmit?: () => void
className?: string
onUploadStart?: (file: File) => void
onUploadProgress?: (progress: number, file: File) => void
onUploadEnd?: () => void
onProvideCancel?: (cancel: () => void) => void
}
>(({ text = '', setText, defaultContent, parentEvent, onSubmit, className }, ref) => {
>(({
text = '',
setText,
defaultContent,
parentEvent,
onSubmit,
className,
onUploadStart,
onUploadProgress,
onUploadEnd,
onProvideCancel
}, ref) => {
const { t } = useTranslation()
const { setUploadingFiles } = usePostEditor()
const editor = useEditor({
@@ -51,9 +66,15 @@ const PostTextarea = forwardRef<
suggestion
}),
ClipboardAndDropHandler.configure({
onUploadStart: () => setUploadingFiles((prev) => prev + 1),
onUploadStart: (file) => {
setUploadingFiles((prev) => prev + 1)
onUploadStart?.(file)
},
onUploadSuccess: () => setUploadingFiles((prev) => prev - 1),
onUploadError: () => setUploadingFiles((prev) => prev - 1)
onUploadError: () => setUploadingFiles((prev) => prev - 1),
onUploadEnd: () => onUploadEnd?.(),
onUploadProgress: (file, p) => onUploadProgress?.(p, file),
onProvideCancel: (cancel) => onProvideCancel?.(cancel)
})
],
editorProps: {

31
src/components/PostEditor/Uploader.tsx
View File

@@ -6,16 +6,25 @@ export default function Uploader({
children,
onUploadSuccess,
onUploadingChange,
onUploadStart,
onUploadEnd,
onProgress,
onProvideCancel,
className,
accept = 'image/*'
}: {
children: React.ReactNode
onUploadSuccess: ({ url, tags }: { url: string; tags: string[][] }) => void
onUploadingChange?: (uploading: boolean) => void
onUploadStart?: (file: File) => void
onUploadEnd?: () => void
onProgress?: (progress: number, file: File) => void
onProvideCancel?: (cancel: () => void) => void
className?: string
accept?: string
}) {
const fileInputRef = useRef<HTMLInputElement>(null)
const abortControllerRef = useRef<AbortController | null>(null)
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
if (!event.target.files) return
@@ -23,15 +32,29 @@ export default function Uploader({
onUploadingChange?.(true)
try {
for (const file of event.target.files) {
const result = await mediaUpload.upload(file)
abortControllerRef.current = new AbortController()
const cancel = () => abortControllerRef.current?.abort()
onProvideCancel?.(cancel)
onUploadStart?.(file)
const result = await mediaUpload.upload(file, {
onProgress: (p) => onProgress?.(p, file),
signal: abortControllerRef.current.signal
})
onUploadSuccess(result)
abortControllerRef.current = null
onUploadEnd?.()
}
} catch (error) {
console.error('Error uploading file', error)
toast.error(`Failed to upload file: ${(error as Error).message}`)
const message = (error as Error).message
if (message !== 'Upload aborted') {
toast.error(`Failed to upload file: ${message}`)
}
if (fileInputRef.current) {
fileInputRef.current.value = ''
}
abortControllerRef.current = null
onUploadEnd?.()
} finally {
onUploadingChange?.(false)
}
@@ -45,8 +68,8 @@ export default function Uploader({
}
return (
<div onClick={handleUploadClick} className={className}>
{children}
<div className={className}>
<div onClick={handleUploadClick}>{children}</div>
<input
type="file"
ref={fileInputRef}

113
src/services/media-upload.service.ts
View File

@@ -5,6 +5,11 @@ import { z } from 'zod'
import client from './client.service'
import storage from './local-storage.service'
type UploadOptions = {
onProgress?: (progressPercent: number) => void
signal?: AbortSignal
}
class MediaUploadService {
static instance: MediaUploadService
@@ -23,12 +28,12 @@ class MediaUploadService {
this.serviceConfig = config
}
async upload(file: File) {
async upload(file: File, options?: UploadOptions) {
let result: { url: string; tags: string[][] }
if (this.serviceConfig.type === 'nip96') {
result = await this.uploadByNip96(this.serviceConfig.service, file)
result = await this.uploadByNip96(this.serviceConfig.service, file, options)
} else {
result = await this.uploadByBlossom(file)
result = await this.uploadByBlossom(file, options)
}
if (result.tags.length > 0) {
@@ -37,7 +42,7 @@ class MediaUploadService {
return result
}
private async uploadByBlossom(file: File) {
private async uploadByBlossom(file: File, options?: UploadOptions) {
const pubkey = client.pubkey
const signer = async (draft: TDraftEvent) => {
if (!client.signer) {
@@ -49,6 +54,34 @@ class MediaUploadService {
throw new Error('You need to be logged in to upload media')
}
if (options?.signal?.aborted) {
throw new Error('Upload aborted')
}
options?.onProgress?.(0)
// Pseudo-progress: advance gradually until main upload completes
let pseudoProgress = 1
let pseudoTimer: number | undefined
const startPseudoProgress = () => {
if (pseudoTimer !== undefined) return
pseudoTimer = window.setInterval(() => {
// Cap pseudo progress to 90% until we get real completion
pseudoProgress = Math.min(pseudoProgress + 3, 90)
options?.onProgress?.(pseudoProgress)
if (pseudoProgress >= 90) {
stopPseudoProgress()
}
}, 300)
}
const stopPseudoProgress = () => {
if (pseudoTimer !== undefined) {
clearInterval(pseudoTimer)
pseudoTimer = undefined
}
}
startPseudoProgress()
const servers = await client.fetchBlossomServerList(pubkey)
if (servers.length === 0) {
throw new Error('No Blossom services available')
@@ -61,6 +94,9 @@ class MediaUploadService {
// first upload blob to main server
const blob = await BlossomClient.uploadBlob(mainServer, file, { auth })
// Main upload finished
stopPseudoProgress()
options?.onProgress?.(80)
if (mirrorServers.length > 0) {
await Promise.allSettled(
@@ -74,10 +110,11 @@ class MediaUploadService {
tags = parseResult.data
}
options?.onProgress?.(100)
return { url: blob.url, tags }
}
private async uploadByNip96(service: string, file: File) {
private async uploadByNip96(service: string, file: File, options?: UploadOptions) {
let uploadUrl = this.nip96ServiceUploadUrlMap.get(service)
if (!uploadUrl) {
const response = await fetch(`${service}/.well-known/nostr/nip96.json`)
@@ -100,26 +137,58 @@ class MediaUploadService {
formData.append('file', file)
const auth = await client.signHttpAuth(uploadUrl, 'POST', 'Uploading media file')
const response = await fetch(uploadUrl, {
method: 'POST',
body: formData,
headers: {
Authorization: auth
// Use XMLHttpRequest for upload progress support
const result = await new Promise<{ url: string; tags: string[][] }>((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open('POST', uploadUrl as string)
xhr.responseType = 'json'
xhr.setRequestHeader('Authorization', auth)
const handleAbort = () => {
try {
xhr.abort()
} catch (_) {
// ignore
}
reject(new Error('Upload aborted'))
}
if (options?.signal) {
if (options.signal.aborted) {
return handleAbort()
}
options.signal.addEventListener('abort', handleAbort, { once: true })
}
xhr.upload.onprogress = (event) => {
if (event.lengthComputable) {
const percent = Math.round((event.loaded / event.total) * 100)
options?.onProgress?.(percent)
}
}
xhr.onerror = () => reject(new Error('Network error'))
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
const data = xhr.response
try {
const tags = z.array(z.array(z.string())).parse(data?.nip94_event?.tags ?? [])
const url = tags.find(([tagName]: string[]) => tagName === 'url')?.[1]
if (url) {
resolve({ url, tags })
} else {
reject(new Error('No url found'))
}
} catch (e) {
reject(e as Error)
}
} else {
reject(new Error(xhr.status.toString() + ' ' + xhr.statusText))
}
}
xhr.send(formData)
})
if (!response.ok) {
throw new Error(response.status.toString() + ' ' + response.statusText)
}
const data = await response.json()
const tags = z.array(z.array(z.string())).parse(data.nip94_event?.tags ?? [])
const url = tags.find(([tagName]) => tagName === 'url')?.[1]
if (url) {
return { url, tags }
} else {
throw new Error('No url found')
}
return result
}
getImetaTagByUrl(url: string) {