mirror of
https://github.com/hzrd149/nostrudel.git
synced 2025-03-17 13:21:44 +01:00
Isolating upload file process into a separated hook
This commit is contained in:
parent
bbcaab0b95
commit
a0dfb6c076
@ -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 };
|
||||
|
52
src/hooks/use-upload-file.ts
Normal file
52
src/hooks/use-upload-file.ts
Normal 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,
|
||||
};
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user