/** @jsxImportSource https://esm.sh/react */ import React, { useState, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { AppBskyEmbedVideo, AppBskyVideoDefs, AtpAgent, BlobRef, } from "https://esm.sh/@atproto/api"; function App() { const [result, setResult] = useState(""); const [progress, setProgress] = useState(0); const [aspectRatio, setAspectRatio] = useState({ width: 1, height: 1 }); const fileInputRef = useRef(null); const calculateAspectRatio = (file: File) => { return new Promise<{ width: number; height: number }>((resolve) => { const img = new Image(); img.onload = () => { URL.revokeObjectURL(img.src); resolve({ width: img.width, height: img.height }); }; img.src = URL.createObjectURL(file); }); }; const handleFileChange = async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { const ratio = await calculateAspectRatio(file); setAspectRatio(ratio); } }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); const formData = new FormData(e.currentTarget); formData.append('aspectRatioWidth', aspectRatio.width.toString()); formData.append('aspectRatioHeight', aspectRatio.height.toString()); const response = await fetch("/submit", { method: "POST", body: formData, }); const reader = response.body!.getReader(); const decoder = new TextDecoder(); while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value, { stream: true }); const lines = chunk.split('\n'); for (const line of lines) { if (line.startsWith('progress:')) { setProgress(parseInt(line.split(':')[1])); } else if (line) { setResult(prev => prev + line + '\n'); } } } }; return (

Bluesky GIF Uploader

Note: you don't need to use this anymore. You can upload .gif files as videos using bsky.app

{progress > 0 &&

Upload progress: {progress}%

} {result &&

Result:

{result}

}

Aspect Ratio: {aspectRatio.width}:{aspectRatio.height}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if (request.method === "POST" && new URL(request.url).pathname === "/submit") { const formData = await request.formData(); const serviceUrl = formData.get("serviceUrl") as string || "https://bsky.social"; const username = formData.get("username") as string; const password = formData.get("password") as string; const postText = formData.get("postText") as string || "gif"; const gifFile = formData.get("gifFile") as File; const aspectRatioWidth = parseInt(formData.get("aspectRatioWidth") as string); const aspectRatioHeight = parseInt(formData.get("aspectRatioHeight") as string); if (!gifFile || !username || !password || !aspectRatioWidth || !aspectRatioHeight) { return new Response("Missing required fields", { status: 400 }); } const gifBuffer = await gifFile.arrayBuffer(); const gif = new Uint8Array(gifBuffer); const encoder = new TextEncoder(); const stream = new TransformStream({ transform(chunk, controller) { controller.enqueue(encoder.encode(chunk)); }, }); const writer = stream.writable.getWriter(); // Process the GIF upload in the background processGifUpload(serviceUrl, username, password, gif, gifFile.name, { width: aspectRatioWidth, height: aspectRatioHeight }, postText, writer).catch(async (error) => { console.error("Error processing GIF upload:", error); await writer.write(`Error: ${error instanceof Error ? error.message : String(error)}\n`); }).finally(() => { writer.close().catch(() => {}); }); return new Response(stream.readable, { headers: { "Content-Type": "text/plain" }, }); } return new Response(` Bluesky GIF Uploader

`, { headers: { "content-type": "text/html", }, }); } async function processGifUpload( serviceUrl: string, username: string, password: string, gif: Uint8Array, fileName: string, aspectRatio: { width: number; height: number }, postText: string, writer: WritableStreamDefaultWriter ) { const userAgent = new AtpAgent({ service: serviceUrl }); try { await writer.write("Logging in...\n"); await userAgent.login({ identifier: username, password: password }); await writer.write(`Logged in as ${userAgent.session?.handle}\n`); const { data: serviceAuth } = await userAgent.com.atproto.server.getServiceAuth({ aud: `did:web:${userAgent.dispatchUrl.host}`, lxm: "com.atproto.repo.uploadBlob", exp: Date.now() / 1000 + 60 * 30, // 30 minutes }); const token = serviceAuth.token; const size = gif.length; const uploadUrl = new URL("https://video.bsky.app/xrpc/app.bsky.video.uploadVideo"); uploadUrl.searchParams.append("did", userAgent.session!.did); uploadUrl.searchParams.append("name", fileName); await writer.write("Uploading GIF...\n"); const uploadResponse = await fetch(uploadUrl, { method: "POST", headers: { Authorization: `Bearer ${token}`, "Content-Type": "image/gif", "Content-Length": String(size), }, body: gif, }); if (!uploadResponse.ok) { const errorText = await uploadResponse.text(); throw new Error(`Upload failed with status ${uploadResponse.status}: ${errorText}`); } const jobStatus = await uploadResponse.json() as AppBskyVideoDefs.JobStatus; if (!jobStatus.jobId) { throw new Error("JobId not found"); } await writer.write(`JobId: ${jobStatus.jobId}\n`); let blob: BlobRef | undefined = jobStatus.blob; const videoAgent = new AtpAgent({ service: "https://video.bsky.app" }); while (!blob) { const { data: status } = await videoAgent.app.bsky.video.getJobStatus({ jobId: jobStatus.jobId }); await writer.write(`Status: ${status.jobStatus.state} ${status.jobStatus.progress || ""}\n`); if (status.jobStatus.blob) { blob = status.jobStatus.blob; } else if (status.jobStatus.state === "failed") { throw new Error(`Video processing failed: ${status.jobStatus.error || "Unknown error"}`); } await new Promise((resolve) => setTimeout(resolve, 1000)); } await writer.write("Posting to Bluesky...\n"); await userAgent.post({ text: postText, langs: ["en"], embed: { $type: "app.bsky.embed.video", video: blob, aspectRatio: aspectRatio, } satisfies AppBskyEmbedVideo.Main, }); await writer.write("Done ✨\n"); } catch (error) { await writer.write(`Error: ${error instanceof Error ? error.message : String(error)}\n`); } } const css = ` body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } form > div { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input, textarea { width: 100%; padding: 5px; } button { background-color: #4CAF50; color: white; padding: 10px 15px; border: none; cursor: pointer; } button:hover { background-color: #45a049; } pre { background-color: #f4f4f4; padding: 10px; overflow-x: auto; } `;

gif_upload

Versions

v0