highperfocused/nostrudel
1
0
Fork 0
mirror of https://github.com/hzrd149/nostrudel.git synced 2025-03-28 18:53:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Isolating upload file process into a separated hook

Browse Source
This commit is contained in:
kiuusai 2025-02-12 19:28:39 -03:00
parent bbcaab0b95
commit a0dfb6c076
No known key found for this signature in database
GPG Key ID: 99D962682DD15C7F
2 changed files with 64 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/hooks/use-textarea-upload-file.ts
View File

@ -1,16 +1,9 @@
import { ChangeEventHandler, ClipboardEventHandler, MutableRefObject, useCallback, useState } from "react"; import { ChangeEventHandler, ClipboardEventHandler, MutableRefObject, useCallback, useState } from "react";
import { useToast } from "@chakra-ui/react";
import { useActiveAccount } from "applesauce-react/hooks";
import { nostrBuildUploadImage } from "../helpers/media-upload/nostr-build";
import { RefType } from "../components/magic-textarea"; import { RefType } from "../components/magic-textarea";
import { useSigningContext } from "../providers/global/signing-provider";
import { UseFormGetValues, UseFormSetValue } from "react-hook-form"; import { UseFormGetValues, UseFormSetValue } from "react-hook-form";
import useAppSettings from "./use-user-app-settings";
import useUsersMediaServers from "./use-user-media-servers";
import { simpleMultiServerUpload } from "../helpers/media-upload/blossom";
import { stripSensitiveMetadataOnFile } from "../helpers/image";
import insertTextIntoMagicTextarea from "../helpers/magic-textarea"; import insertTextIntoMagicTextarea from "../helpers/magic-textarea";
import useUploadFile from "./use-upload-file";
export function useTextAreaUploadFileWithForm( export function useTextAreaUploadFileWithForm(
ref: MutableRefObject<RefType | null>, ref: MutableRefObject<RefType | null>,
@ -41,52 +34,29 @@ export function useTextAreaInsertTextWithForm(
} }
export default function useTextAreaUploadFile(insertText: (url: string) => void) { export default function useTextAreaUploadFile(insertText: (url: string) => void) {
const toast = useToast(); const { uploadFile, uploading } = useUploadFile();
const account = useActiveAccount();
const { mediaUploadService } = useAppSettings();
const { servers: mediaServers } = useUsersMediaServers(account?.pubkey);
const { requestSignature } = useSigningContext();
const [uploading, setUploading] = useState(false); const privateUploadFile = useCallback(async (file: File) => {
const uploadFile = useCallback( const imageUrl = await uploadFile(file);
async (file: File) => {
setUploading(true); if (imageUrl)
try { insertText(imageUrl);
const safeFile = await stripSensitiveMetadataOnFile(file); }, [uploadFile])
if (mediaUploadService === "nostr.build") {
const response = await nostrBuildUploadImage(safeFile, requestSignature);
const imageUrl = response.url;
insertText(imageUrl);
} else if (mediaUploadService === "blossom" && mediaServers.length) {
const blob = await simpleMultiServerUpload(
mediaServers.map((s) => s.toString()),
safeFile,
requestSignature,
);
insertText(blob.url);
}
} catch (e) {
if (e instanceof Error) toast({ description: e.message, status: "error" });
}
setUploading(false);
},
[insertText, toast, setUploading, mediaServers, mediaUploadService],
);
const onFileInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>( const onFileInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
(e) => { (e) => {
const img = e.target.files?.[0]; const img = e.target.files?.[0];
if (img) uploadFile(img); if (img) privateUploadFile(img);
}, },
[uploadFile], [privateUploadFile],
); );
const onPaste = useCallback<ClipboardEventHandler<HTMLTextAreaElement>>( const onPaste = useCallback<ClipboardEventHandler<HTMLTextAreaElement>>(
(e) => { (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) uploadFile(imageFile); if (imageFile) privateUploadFile(imageFile);
}, },
[uploadFile], [privateUploadFile],
); );
return { uploadFile, uploading, onPaste, onFileInputChange }; return { uploadFile, uploading, onPaste, onFileInputChange };

52
src/hooks/use-upload-file.ts Normal file
View File

@ -0,0 +1,52 @@
import { useCallback, useState } from "react";
import { stripSensitiveMetadataOnFile } from "../helpers/image";
import { nostrBuildUploadImage } from "../helpers/media-upload/nostr-build";
import { useToast } from "@chakra-ui/react";
import useUsersMediaServers from "./use-user-media-servers";
import { useSigningContext } from "../providers/global/signing-provider";
import { useActiveAccount } from "applesauce-react/hooks";
import useAppSettings from "./use-user-app-settings";
import { simpleMultiServerUpload } from "~/helpers/media-upload/blossom";
export default function useUploadFile() {
const toast = useToast();
const account = useActiveAccount();
const { mediaUploadService } = useAppSettings();
const { servers: mediaServers } = useUsersMediaServers(account?.pubkey);
const { requestSignature } = useSigningContext();
const [uploading, setUploading] = useState(false);
const uploadFile = useCallback(
async (file: File) => {
let imageUrl: string | undefined = undefined;
setUploading(true);
try {
const safeFile = await stripSensitiveMetadataOnFile(file);
if (mediaUploadService === "nostr.build") {
const response = await nostrBuildUploadImage(safeFile, requestSignature);
imageUrl = response.url;
} else if (mediaUploadService === "blossom" && mediaServers.length) {
const blob = await simpleMultiServerUpload(
mediaServers.map((s) => s.toString()),
safeFile,
requestSignature,
);
imageUrl = blob.url;
}
} catch (e) {
if (e instanceof Error) toast({ description: e.message, status: "error" });
}
setUploading(false);
return imageUrl;
},
[toast, setUploading, mediaServers, mediaUploadService],
);
return {
uploadFile,
uploading,
};
}