Video and audio file uploads to nostr.build

This commit is contained in:
hzrd149 2023-10-08 09:30:46 -05:00
parent 7a3674f8d2
commit b2be294dde
3 changed files with 20 additions and 12 deletions

View File

@ -0,0 +1,5 @@
---
"nostrudel": minor
---
Support video and audio file uploads to nostr.build

View File

@ -40,7 +40,7 @@ import {
import { UserAvatarStack } from "../compact-user-stack"; import { UserAvatarStack } from "../compact-user-stack";
import MagicTextArea, { RefType } from "../magic-textarea"; import MagicTextArea, { RefType } from "../magic-textarea";
import { useContextEmojis } from "../../providers/emoji-provider"; import { useContextEmojis } from "../../providers/emoji-provider";
import { nostrBuildUploadImage } from "../../helpers/nostr-build"; import { nostrBuildUploadImage as nostrBuildUpload } from "../../helpers/nostr-build";
import CommunitySelect from "./community-select"; import CommunitySelect from "./community-select";
import ZapSplitCreator, { fillRemainingPercent } from "./zap-split-creator"; import ZapSplitCreator, { fillRemainingPercent } from "./zap-split-creator";
import { EventSplit } from "../../helpers/nostr/zaps"; import { EventSplit } from "../../helpers/nostr/zaps";
@ -89,13 +89,15 @@ export default function PostModal({
const textAreaRef = useRef<RefType | null>(null); const textAreaRef = useRef<RefType | null>(null);
const imageUploadRef = useRef<HTMLInputElement | null>(null); const imageUploadRef = useRef<HTMLInputElement | null>(null);
const [uploading, setUploading] = useState(false); const [uploading, setUploading] = useState(false);
const uploadImage = useCallback( const uploadFile = useCallback(
async (imageFile: File) => { async (file: File) => {
try { try {
if (!imageFile.type.includes("image")) throw new Error("Only images are supported"); if (!(file.type.includes("image") || file.type.includes("video") || file.type.includes("audio")))
throw new Error("Unsupported file type");
setUploading(true); setUploading(true);
const response = await nostrBuildUploadImage(imageFile, requestSignature); const response = await nostrBuildUpload(file, requestSignature);
const imageUrl = response.url; const imageUrl = response.url;
const content = getValues().content; const content = getValues().content;
@ -177,7 +179,7 @@ export default function PostModal({
instanceRef={(inst) => (textAreaRef.current = inst)} instanceRef={(inst) => (textAreaRef.current = inst)}
onPaste={(e) => { onPaste={(e) => {
const imageFile = Array.from(e.clipboardData.files).find((f) => f.type.includes("image")); const imageFile = Array.from(e.clipboardData.files).find((f) => f.type.includes("image"));
if (imageFile) uploadImage(imageFile); if (imageFile) uploadFile(imageFile);
}} }}
/> />
{getValues().content.length > 0 && ( {getValues().content.length > 0 && (
@ -194,11 +196,11 @@ export default function PostModal({
<Flex mr="auto" gap="2"> <Flex mr="auto" gap="2">
<VisuallyHiddenInput <VisuallyHiddenInput
type="file" type="file"
accept="image/*" accept="image/*,audio/*,video/*"
ref={imageUploadRef} ref={imageUploadRef}
onChange={(e) => { onChange={(e) => {
const img = e.target.files?.[0]; const img = e.target.files?.[0];
if (img) uploadImage(img); if (img) uploadFile(img);
}} }}
/> />
<IconButton <IconButton

View File

@ -19,7 +19,7 @@ type NostrBuildResponse = {
}; };
blurhash: string; blurhash: string;
sha256: string; sha256: string;
type: "picture" | "video"; type: "picture" | "video" | "audio";
mime: string; mime: string;
size: number; size: number;
metadata: Record<string, string>; metadata: Record<string, string>;
@ -31,13 +31,14 @@ type NostrBuildResponse = {
]; ];
}; };
export async function nostrBuildUploadImage(image: File, sign?: (draft: DraftNostrEvent) => Promise<NostrEvent>) { export async function nostrBuildUploadImage(file: File, sign?: (draft: DraftNostrEvent) => Promise<NostrEvent>) {
if (!image.type.includes("image")) throw new Error("Only images are supported"); if (!(file.type.includes("image") || file.type.includes("video") || file.type.includes("audio")))
throw new Error("Unsupported file type");
const url = "https://nostr.build/api/v2/upload/files"; const url = "https://nostr.build/api/v2/upload/files";
const payload = new FormData(); const payload = new FormData();
payload.append("fileToUpload", image); payload.append("fileToUpload", file);
const headers: HeadersInit = {}; const headers: HeadersInit = {};
if (sign) { if (sign) {