mirrors/binwiederhier-ntfy
1
0
Fork 0
mirror of https://github.com/binwiederhier/ntfy.git synced 2024-12-15 17:50:55 +00:00
Code Activity

Web: support pasting images to PublishDialog

Browse source
This commit is contained in:
Cao Mingjun 2023-11-25 07:39:20 +00:00 committed by GitHub
parent 00fe639a95
commit 4b1468cfd8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
web/src/components/Messaging.jsx
View file

@ -26,6 +26,16 @@ const Messaging = (props) => {
setAttachFile(null); setAttachFile(null);
}; };
const getPastedImage = (ev) => {
const { items } = ev.clipboardData;
for (let i = 0; i < items.length; i += 1) {
if (items[i].type.indexOf("image") !== -1) {
return items[i].getAsFile();
}
}
return null;
};
return ( return (
<> <>
{subscription && ( {subscription && (
@ -35,6 +45,7 @@ const Messaging = (props) => {
onMessageChange={setMessage} onMessageChange={setMessage}
onFilePasted={setAttachFile} onFilePasted={setAttachFile}
onOpenDialogClick={handleOpenDialogClick} onOpenDialogClick={handleOpenDialogClick}
getPastedImage={getPastedImage}
/> />
)} )}
<PublishDialog <PublishDialog
@ -44,6 +55,7 @@ const Messaging = (props) => {
topic={subscription?.topic ?? ""} topic={subscription?.topic ?? ""}
message={message} message={message}
attachFile={attachFile} attachFile={attachFile}
getPastedImage={getPastedImage}
onClose={handleDialogClose} onClose={handleDialogClose}
onDragEnter={() => props.onDialogOpenModeChange((prev) => prev || PublishDialog.OPEN_MODE_DRAG)} // Only update if not already open onDragEnter={() => props.onDialogOpenModeChange((prev) => prev || PublishDialog.OPEN_MODE_DRAG)} // Only update if not already open
onResetOpenMode={() => props.onDialogOpenModeChange(PublishDialog.OPEN_MODE_DEFAULT)} onResetOpenMode={() => props.onDialogOpenModeChange(PublishDialog.OPEN_MODE_DEFAULT)}
@ -67,15 +79,10 @@ const MessageBar = (props) => {
}; };
const handlePaste = (ev) => { const handlePaste = (ev) => {
const clipboardData = ev.clipboardData || window.clipboardData; const blob = props.getPastedImage(ev);
const { items } = clipboardData; if (blob) {
for (let i = 0; i < items.length; i += 1) {
if (items[i].type.indexOf("image") !== -1) {
const blob = items[i].getAsFile();
props.onFilePasted(blob); props.onFilePasted(blob);
props.onOpenDialogClick(); props.onOpenDialogClick();
break;
}
} }
}; };

8
web/src/components/PublishDialog.jsx
View file

@ -241,6 +241,13 @@ const PublishDialog = (props) => {
} }
}, [props.attachFile]); }, [props.attachFile]);
const handlePaste = (ev) => {
const blob = props.getPastedImage(ev);
if (blob) {
updateAttachFile(blob);
}
};
const handleAttachFileChanged = async (ev) => { const handleAttachFileChanged = async (ev) => {
await updateAttachFile(ev.target.files[0]); await updateAttachFile(ev.target.files[0]);
}; };
@ -363,6 +370,7 @@ const PublishDialog = (props) => {
inputProps={{ inputProps={{
"aria-label": t("publish_dialog_message_label"), "aria-label": t("publish_dialog_message_label"),
}} }}
onPaste={handlePaste}
/> />
<FormControlLabel <FormControlLabel
label={t("publish_dialog_checkbox_markdown")} label={t("publish_dialog_checkbox_markdown")}