323 lines
13 KiB
TypeScript
323 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect, useCallback, type ChangeEvent, type FormEvent } from "react"
|
|
import { ReloadIcon } from "@radix-ui/react-icons"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { type NostrEvent } from "nostr-tools"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import {
|
|
Drawer,
|
|
DrawerContent,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
DrawerDescription,
|
|
DrawerFooter,
|
|
} from "@/components/ui/drawer"
|
|
import { Spinner } from "./spinner"
|
|
import { signEvent } from "@/lib/utils"
|
|
|
|
async function calculateBlurhash(file: File): Promise<string> {
|
|
return new Promise((resolve, reject) => {
|
|
const canvas = document.createElement("canvas")
|
|
const ctx = canvas.getContext("2d")
|
|
const img = new Image()
|
|
img.crossOrigin = "anonymous"
|
|
img.onload = () => {
|
|
canvas.width = 32
|
|
canvas.height = 32
|
|
ctx?.drawImage(img, 0, 0, 32, 32)
|
|
const imageData = ctx?.getImageData(0, 0, 32, 32)
|
|
if (imageData) {
|
|
// Mock blurhash calculation - in a real app you'd use the blurhash library
|
|
const mockBlurhash = "LGF5?xYk^6#M@-5c,1J5@[or[Q6."
|
|
resolve(mockBlurhash)
|
|
} else {
|
|
reject(new Error("Failed to get image data"))
|
|
}
|
|
}
|
|
img.onerror = reject
|
|
img.src = URL.createObjectURL(file)
|
|
})
|
|
}
|
|
|
|
async function calculateSHA256(file: File): Promise<string> {
|
|
// In a browser environment, we'd use the Web Crypto API
|
|
// This is a simplified mock implementation
|
|
return new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
// Generate a random SHA256-like hash for demo purposes
|
|
const mockHash = Array.from({ length: 64 }, () => "0123456789abcdef"[Math.floor(Math.random() * 16)]).join("")
|
|
resolve(mockHash)
|
|
}, 500)
|
|
})
|
|
}
|
|
|
|
const UploadComponent = () => {
|
|
const { createHash } = require("crypto")
|
|
const loginType = typeof window !== "undefined" ? window.localStorage.getItem("loginType") : null
|
|
const [previewUrl, setPreviewUrl] = useState("")
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const [isDrawerOpen, setIsDrawerOpen] = useState(false)
|
|
const [uploadedNoteId, setUploadedNoteId] = useState("")
|
|
const [retryCount, setRetryCount] = useState(0)
|
|
const [shouldFetch, setShouldFetch] = useState(false)
|
|
const [serverChoice, setServerChoice] = useState("blossom.band")
|
|
const [events, setEvents] = useState<any[]>([])
|
|
const [isNoteLoading, setIsNoteLoading] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (uploadedNoteId) {
|
|
setShouldFetch(true)
|
|
}
|
|
}, [uploadedNoteId])
|
|
|
|
useEffect(() => {
|
|
let timeoutId: NodeJS.Timeout
|
|
|
|
if (shouldFetch && events.length === 0 && !isNoteLoading) {
|
|
setIsNoteLoading(true)
|
|
|
|
// Simulate fetching events
|
|
timeoutId = setTimeout(() => {
|
|
setIsNoteLoading(false)
|
|
// After a few retries, simulate finding the event
|
|
if (retryCount >= 2) {
|
|
setEvents([{ id: uploadedNoteId }])
|
|
} else {
|
|
setRetryCount((prevCount) => prevCount + 1)
|
|
}
|
|
}, 2000)
|
|
}
|
|
|
|
return () => {
|
|
if (timeoutId) {
|
|
clearTimeout(timeoutId)
|
|
}
|
|
}
|
|
}, [shouldFetch, events, isNoteLoading, retryCount, uploadedNoteId])
|
|
|
|
const handleRetry = useCallback(() => {
|
|
setRetryCount((prevCount) => prevCount + 1)
|
|
setShouldFetch(false)
|
|
setTimeout(() => setShouldFetch(true), 100)
|
|
}, [])
|
|
|
|
const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0]
|
|
if (file) {
|
|
const url = URL.createObjectURL(file)
|
|
setPreviewUrl(url)
|
|
|
|
return () => URL.revokeObjectURL(url)
|
|
}
|
|
}
|
|
|
|
const handleServerChange = (value: string) => {
|
|
setServerChoice(value)
|
|
}
|
|
|
|
async function onSubmit(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault()
|
|
setIsLoading(true)
|
|
|
|
const formData = new FormData(event.currentTarget)
|
|
const desc = formData.get("description") as string
|
|
const file = formData.get("file") as File
|
|
let sha256 = ""
|
|
let finalNoteContent = desc
|
|
let finalFileUrl = ""
|
|
console.log("File:", file)
|
|
|
|
if (!desc && !file.size) {
|
|
alert("Please enter a description and/or upload a file")
|
|
setIsLoading(false)
|
|
return
|
|
}
|
|
|
|
// If file is present, upload it to the media server
|
|
if (file) {
|
|
const readFileAsArrayBuffer = (file: File): Promise<ArrayBuffer> => {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader()
|
|
reader.onload = () => resolve(reader.result as ArrayBuffer)
|
|
reader.onerror = () => reject(reader.error)
|
|
reader.readAsArrayBuffer(file)
|
|
})
|
|
}
|
|
|
|
try {
|
|
const arrayBuffer = await readFileAsArrayBuffer(file)
|
|
const hashBuffer = createHash("sha256").update(Buffer.from(arrayBuffer)).digest()
|
|
sha256 = hashBuffer.toString("hex")
|
|
|
|
const unixNow = () => Math.floor(Date.now() / 1000)
|
|
const newExpirationValue = () => (unixNow() + 60 * 5).toString()
|
|
|
|
const pubkey = window.localStorage.getItem("pubkey")
|
|
const createdAt = Math.floor(Date.now() / 1000)
|
|
|
|
// alert("SHA256: " + sha256)
|
|
|
|
// Create auth event for blossom auth via nostr
|
|
const authEvent: NostrEvent = {
|
|
kind: 24242,
|
|
// content: desc,
|
|
content: "File upload",
|
|
created_at: createdAt,
|
|
tags: [
|
|
["t", "media"],
|
|
["x", sha256],
|
|
["expiration", newExpirationValue()],
|
|
],
|
|
pubkey: "", // Add a placeholder for pubkey
|
|
id: "", // Add a placeholder for id
|
|
sig: "", // Add a placeholder for sig
|
|
}
|
|
|
|
console.log(authEvent)
|
|
|
|
// Sign auth event
|
|
const authEventSigned = (await signEvent(loginType, authEvent)) as NostrEvent
|
|
// authEventSigned as base64 encoded string
|
|
const authString = Buffer.from(JSON.stringify(authEventSigned)).toString("base64")
|
|
|
|
const blossomServer = "https://" + serverChoice
|
|
|
|
await fetch(blossomServer + "/media", {
|
|
method: "PUT",
|
|
body: file,
|
|
headers: { authorization: "Nostr " + authString },
|
|
}).then(async (res) => {
|
|
if (res.ok) {
|
|
const responseText = await res.text()
|
|
const responseJson = JSON.parse(responseText)
|
|
finalFileUrl = responseJson.url
|
|
sha256 = responseJson.sha256
|
|
|
|
let blurhash = ""
|
|
if (file && file.type.startsWith("image/")) {
|
|
try {
|
|
blurhash = await calculateBlurhash(file)
|
|
} catch (error) {
|
|
console.error("Error calculating blurhash:", error)
|
|
}
|
|
}
|
|
|
|
if (finalFileUrl) {
|
|
const image = new Image()
|
|
image.src = URL.createObjectURL(file)
|
|
await new Promise((resolve) => {
|
|
image.onload = resolve
|
|
})
|
|
|
|
finalNoteContent = desc
|
|
}
|
|
|
|
setIsLoading(false)
|
|
if (finalFileUrl != null) {
|
|
setIsDrawerOpen(true)
|
|
setShouldFetch(true)
|
|
setRetryCount(0)
|
|
}
|
|
} else {
|
|
// alert(await res.text())
|
|
throw new Error("Failed to upload file: " + (await res.text()))
|
|
}
|
|
})
|
|
} catch (error) {
|
|
alert(error)
|
|
console.error("Error reading file:", error)
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="w-full max-w-2xl mx-auto">
|
|
<form className="space-y-4" onSubmit={onSubmit}>
|
|
<div className="grid w-full items-center gap-1.5">
|
|
<Label htmlFor="file">Upload Image</Label>
|
|
<Input id="file" name="file" type="file" accept="image/*" onChange={handleFileChange} />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 w-full items-center gap-1.5">
|
|
<Label htmlFor="server-select">Upload to</Label>
|
|
<Select onValueChange={handleServerChange} value={serverChoice}>
|
|
<SelectTrigger className="w-full" id="server-select">
|
|
<SelectValue placeholder={serverChoice} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="blossom.band">blossom.band</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{previewUrl && (
|
|
<div className="mt-4 rounded-md overflow-hidden">
|
|
<img src={previewUrl || "/placeholder.svg"} alt="Preview" className="w-full max-h-80 object-contain" />
|
|
</div>
|
|
)}
|
|
|
|
{isLoading ? (
|
|
<Button className="w-full" disabled>
|
|
Uploading... <ReloadIcon className="ml-2 h-4 w-4 animate-spin" />
|
|
</Button>
|
|
) : (
|
|
<Button className="w-full" type="submit">
|
|
Upload
|
|
</Button>
|
|
)}
|
|
</form>
|
|
</div>
|
|
|
|
<Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
|
|
<DrawerContent>
|
|
<DrawerHeader>
|
|
<DrawerTitle>Upload Status</DrawerTitle>
|
|
<DrawerDescription>
|
|
{isNoteLoading ? (
|
|
<div className="flex items-center space-x-2">
|
|
<Spinner />
|
|
<span>Checking note status...</span>
|
|
</div>
|
|
) : events.length > 0 ? (
|
|
<div
|
|
className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative"
|
|
role="alert"
|
|
>
|
|
<strong className="font-bold">Success!</strong>
|
|
<span className="block sm:inline"> Note found with ID: </span>
|
|
<span className="block sm:inline font-mono">
|
|
{`${uploadedNoteId.slice(0, 5)}...${uploadedNoteId.slice(-3)}`}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<p>Note not found. It may take a moment to propagate.</p>
|
|
)}
|
|
</DrawerDescription>
|
|
</DrawerHeader>
|
|
<DrawerFooter className="flex flex-col space-y-2">
|
|
{events.length === 0 && (
|
|
<Button onClick={handleRetry} variant="outline" className="w-full">
|
|
Retry Now
|
|
</Button>
|
|
)}
|
|
<Button asChild className="w-full">
|
|
<a href={`/note/${uploadedNoteId}`}>View Note</a>
|
|
</Button>
|
|
<Button variant="outline" onClick={() => setIsDrawerOpen(false)} className="w-full">
|
|
Close
|
|
</Button>
|
|
</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default UploadComponent
|