87 lines
1.8 KiB
TypeScript
87 lines
1.8 KiB
TypeScript
import { ImageIcon, LoaderIcon } from "@lume/icons";
|
|
import { message, open } from "@tauri-apps/plugin-dialog";
|
|
import { readFile } from "@tauri-apps/plugin-fs";
|
|
import { useState } from "react";
|
|
|
|
export function ArticleCoverUploader({ setCover }) {
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const uploadToNostrBuild = async () => {
|
|
try {
|
|
// start loading
|
|
setLoading(true);
|
|
|
|
const selected = await open({
|
|
multiple: false,
|
|
filters: [
|
|
{
|
|
name: "Media",
|
|
extensions: [
|
|
"png",
|
|
"jpeg",
|
|
"jpg",
|
|
"gif",
|
|
"mp4",
|
|
"mp3",
|
|
"webm",
|
|
"mkv",
|
|
"avi",
|
|
"mov",
|
|
],
|
|
},
|
|
],
|
|
});
|
|
|
|
if (!selected) {
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
const file = await readFile(selected.path);
|
|
const blob = new Blob([file]);
|
|
|
|
const data = new FormData();
|
|
data.append("fileToUpload", blob);
|
|
data.append("submit", "Upload Image");
|
|
|
|
const res = await fetch("https://nostr.build/api/v2/upload/files", {
|
|
method: "POST",
|
|
body: data,
|
|
});
|
|
|
|
if (res.ok) {
|
|
const json = await res.json();
|
|
const content = json.data[0];
|
|
setCover(content.url);
|
|
|
|
// stop loading
|
|
setLoading(false);
|
|
}
|
|
} catch (e) {
|
|
// stop loading
|
|
setLoading(false);
|
|
await message(`Upload failed, error: ${e}`, {
|
|
title: "Lume",
|
|
type: "error",
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={uploadToNostrBuild}
|
|
className="inline-flex h-9 w-max items-center justify-center gap-2 rounded-lg bg-neutral-100 px-2.5 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-800"
|
|
>
|
|
{loading ? (
|
|
<LoaderIcon className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<>
|
|
<ImageIcon className="h-4 w-4" />
|
|
Add cover
|
|
</>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|