Isolating upload file process into a separated hook

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

View File

@ -1,16 +1,9 @@
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 { useSigningContext } from "../providers/global/signing-provider";
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 useUploadFile from "./use-upload-file";
export function useTextAreaUploadFileWithForm(
ref: MutableRefObject<RefType | null>,
@ -41,52 +34,29 @@ export function useTextAreaInsertTextWithForm(
}
export default function useTextAreaUploadFile(insertText: (url: string) => void) {
const toast = useToast();
const account = useActiveAccount();
const { mediaUploadService } = useAppSettings();
const { servers: mediaServers } = useUsersMediaServers(account?.pubkey);
const { requestSignature } = useSigningContext();
const { uploadFile, uploading } = useUploadFile();
const [uploading, setUploading] = useState(false);
const uploadFile = useCallback(
async (file: File) => {
setUploading(true);
try {
const safeFile = await stripSensitiveMetadataOnFile(file);
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 privateUploadFile = useCallback(async (file: File) => {
const imageUrl = await uploadFile(file);
if (imageUrl)
insertText(imageUrl);
}, [uploadFile])
const onFileInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
(e) => {
const img = e.target.files?.[0];
if (img) uploadFile(img);
if (img) privateUploadFile(img);
},
[uploadFile],
[privateUploadFile],
);
const onPaste = useCallback<ClipboardEventHandler<HTMLTextAreaElement>>(
(e) => {
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 };

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,
};
}