From aabae53e5d3aab1c90b92b8aa9cac4500724450a Mon Sep 17 00:00:00 2001 From: Philipp Heckel Date: Fri, 1 Apr 2022 08:41:45 -0400 Subject: [PATCH] File upload --- web/src/app/Api.js | 39 +++++++++++ web/src/components/SendDialog.js | 109 +++++++++++++++++++++---------- 2 files changed, 115 insertions(+), 33 deletions(-) diff --git a/web/src/app/Api.js b/web/src/app/Api.js index dcf09ea5..99f3f763 100644 --- a/web/src/app/Api.js +++ b/web/src/app/Api.js @@ -1,4 +1,6 @@ import { + basicAuth, + encodeBase64, fetchLinesIterator, maybeWithBasicAuth, topicShortUrl, @@ -42,6 +44,43 @@ class Api { }); } + publishXHR(baseUrl, topic, body, headers, onProgress) { + const url = topicUrl(baseUrl, topic); + const xhr = new XMLHttpRequest(); + + console.log(`[Api] Publishing message to ${url}`); + const send = new Promise(function (resolve, reject) { + xhr.open("PUT", url); + xhr.addEventListener('readystatechange', (ev) => { + if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status <= 299) { + console.log(`[Api] Publish successful`, ev); + resolve(xhr.response); + } else if (xhr.readyState === 4) { + console.log(`[Api] Publish failed (1)`, ev); + xhr.abort(); + reject(ev); + } + }) + xhr.onerror = (ev) => { + console.log(`[Api] Publish failed (2)`, ev); + reject(ev); + }; + xhr.upload.addEventListener("progress", onProgress); + if (body.type) { + xhr.overrideMimeType(body.type); + } + for (const [key, value] of Object.entries(headers)) { + xhr.setRequestHeader(key, value); + } + xhr.send(body); + }); + send.abort = () => { + console.log(`[Api] Publish aborted by user`); + xhr.abort(); + } + return send; + } + async auth(baseUrl, topic, user) { const url = topicUrlAuth(baseUrl, topic); console.log(`[Api] Checking auth for ${url}`); diff --git a/web/src/components/SendDialog.js b/web/src/components/SendDialog.js index 1b43150e..0094b538 100644 --- a/web/src/components/SendDialog.js +++ b/web/src/components/SendDialog.js @@ -18,7 +18,7 @@ import IconButton from "@mui/material/IconButton"; import InsertEmoticonIcon from '@mui/icons-material/InsertEmoticon'; import {Close} from "@mui/icons-material"; import MenuItem from "@mui/material/MenuItem"; -import {formatBytes, shortUrl, splitNoEmpty, splitTopicUrl, validTopicUrl} from "../app/utils"; +import {basicAuth, formatBytes, shortUrl, splitNoEmpty, splitTopicUrl, validTopicUrl} from "../app/utils"; import Box from "@mui/material/Box"; import Icon from "./Icon"; import DialogFooter from "./DialogFooter"; @@ -26,6 +26,7 @@ import api from "../app/Api"; import Divider from "@mui/material/Divider"; import EditIcon from '@mui/icons-material/Edit'; import CheckIcon from '@mui/icons-material/Check'; +import userManager from "../app/UserManager"; const SendDialog = (props) => { const [topicUrl, setTopicUrl] = useState(props.topicUrl); @@ -50,7 +51,9 @@ const SendDialog = (props) => { const showAttachFile = !!attachFile && !showAttachUrl; const attachFileInput = useRef(); - const [errorText, setErrorText] = useState(""); + const [sendRequest, setSendRequest] = useState(null); + const [statusText, setStatusText] = useState(""); + const disabled = !!sendRequest; const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); const sendButtonEnabled = (() => { @@ -61,38 +64,59 @@ const SendDialog = (props) => { })(); const handleSubmit = async () => { const { baseUrl, topic } = splitTopicUrl(topicUrl); - const options = {}; + const headers = {}; if (title.trim()) { - options["title"] = title.trim(); + headers["X-Title"] = title.trim(); } if (tags.trim()) { - options["tags"] = splitNoEmpty(tags, ","); + headers["X-Tags"] = tags.trim(); } if (priority && priority !== 3) { - options["priority"] = priority; + headers["X-Priority"] = priority.toString(); } if (clickUrl.trim()) { - options["click"] = clickUrl.trim(); + headers["X-Click"] = clickUrl.trim(); } if (attachUrl.trim()) { - options["attach"] = attachUrl.trim(); + headers["X-Attach"] = attachUrl.trim(); } if (filename.trim()) { - options["filename"] = filename.trim(); + headers["X-Filename"] = filename.trim(); } if (email.trim()) { - options["email"] = email.trim(); + headers["X-Email"] = email.trim(); } if (delay.trim()) { - options["delay"] = delay.trim(); + headers["X-Delay"] = delay.trim(); } + if (attachFile && message.trim()) { + headers["X-Message"] = message.replaceAll("\n", "\\n").trim(); + } + const body = (attachFile) ? attachFile : message; try { - const response = await api.publish(baseUrl, topic, message, options); - console.log(response); - props.onClose(); + const user = await userManager.get(baseUrl); + if (user) { + headers["Authorization"] = basicAuth(user.username, user.password); + } + const progressFn = (ev) => { + console.log(ev); + if (ev.loaded > 0 && ev.total > 0) { + const percent = Math.round(ev.loaded * 100.0 / ev.total); + setStatusText(`Uploading ${formatBytes(ev.loaded)}/${formatBytes(ev.total)} (${percent}%) ...`); + } else { + setStatusText(`Uploading ...`); + } + }; + const request = api.publishXHR(baseUrl, topic, body, headers, progressFn); + setSendRequest(request); + await request; + setStatusText("Message published"); + //props.onClose(); } catch (e) { - setErrorText(e); + console.log("error", e); + setStatusText("An error occurred"); } + setSendRequest(null); }; const handleAttachFileClick = () => { attachFileInput.current.click(); @@ -109,7 +133,7 @@ const SendDialog = (props) => { Publish to {shortUrl(topicUrl)} {showTopicUrl && - { + { setTopicUrl(props.topicUrl); setShowTopicUrl(false); }}> @@ -118,6 +142,7 @@ const SendDialog = (props) => { label="Topic URL" value={topicUrl} onChange={ev => setTopicUrl(ev.target.value)} + disabled={disabled} type="text" variant="standard" fullWidth @@ -130,6 +155,7 @@ const SendDialog = (props) => { label="Title" value={title} onChange={ev => setTitle(ev.target.value)} + disabled={disabled} type="text" fullWidth variant="standard" @@ -141,6 +167,7 @@ const SendDialog = (props) => { placeholder="Type the main message body here." value={message} onChange={ev => setMessage(ev.target.value)} + disabled={disabled} type="text" variant="standard" rows={5} @@ -149,13 +176,14 @@ const SendDialog = (props) => { multiline />
- null}> + null}> setTags(ev.target.value)} + disabled={disabled} type="text" variant="standard" sx={{flexGrow: 1, marginRight: 1}} @@ -171,6 +199,7 @@ const SendDialog = (props) => { margin="dense" value={priority} onChange={(ev) => setPriority(ev.target.value)} + disabled={disabled} > {[5,4,3,2,1].map(priority => @@ -184,7 +213,7 @@ const SendDialog = (props) => {
{showClickUrl && - { + { setClickUrl(""); setShowClickUrl(false); }}> @@ -194,6 +223,7 @@ const SendDialog = (props) => { placeholder="URL that is opened when notification is clicked" value={clickUrl} onChange={ev => setClickUrl(ev.target.value)} + disabled={disabled} type="url" fullWidth variant="standard" @@ -201,7 +231,7 @@ const SendDialog = (props) => { } {showEmail && - { + { setEmail(""); setShowEmail(false); }}> @@ -211,6 +241,7 @@ const SendDialog = (props) => { placeholder="Address to forward the message to, e.g. phil@example.com" value={email} onChange={ev => setEmail(ev.target.value)} + disabled={disabled} type="email" variant="standard" fullWidth @@ -218,7 +249,7 @@ const SendDialog = (props) => { } {showAttachUrl && - { + { setAttachUrl(""); setFilename(""); setFilenameEdited(false); @@ -244,6 +275,7 @@ const SendDialog = (props) => { } } }} + disabled={disabled} type="url" variant="standard" sx={{flexGrow: 5, marginRight: 1}} @@ -257,6 +289,7 @@ const SendDialog = (props) => { setFilename(ev.target.value); setFilenameEdited(true); }} + disabled={disabled} type="text" variant="standard" sx={{flexGrow: 1}} @@ -272,6 +305,7 @@ const SendDialog = (props) => { {showAttachFile && setFilename(f)} onClose={() => { setAttachFile(null); @@ -279,7 +313,7 @@ const SendDialog = (props) => { }} />} {showDelay && - { + { setDelay(""); setShowDelay(false); }}> @@ -289,6 +323,7 @@ const SendDialog = (props) => { placeholder="Unix timestamp, duration or English natural language" value={delay} onChange={ev => setDelay(ev.target.value)} + disabled={disabled} type="text" variant="standard" fullWidth @@ -299,21 +334,26 @@ const SendDialog = (props) => { Other features:
- {!showClickUrl && setShowClickUrl(true)} sx={{marginRight: 1}}/>} - {!showEmail && setShowEmail(true)} sx={{marginRight: 1}}/>} - {!showAttachUrl && !showAttachFile && setShowAttachUrl(true)} sx={{marginRight: 1}}/>} - {!showAttachFile && !showAttachUrl && handleAttachFileClick()} sx={{marginRight: 1}}/>} - {!showDelay && setShowDelay(true)} sx={{marginRight: 1}}/>} - {!showTopicUrl && setShowTopicUrl(true)} sx={{marginRight: 1}}/>} + {!showClickUrl && setShowClickUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>} + {!showEmail && setShowEmail(true)} sx={{marginRight: 1, marginBottom: 1}}/>} + {!showAttachUrl && !showAttachFile && setShowAttachUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>} + {!showAttachFile && !showAttachUrl && handleAttachFileClick()} sx={{marginRight: 1, marginBottom: 1}}/>} + {!showDelay && setShowDelay(true)} sx={{marginRight: 1, marginBottom: 1}}/>} + {!showTopicUrl && setShowTopicUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
- + For examples and a detailed description of all send features, please refer to the documentation. - - - + + {sendRequest && } + {!sendRequest && + <> + + + + } ); @@ -331,7 +371,7 @@ const ClosableRow = (props) => { return ( {props.children} - + ); }; @@ -345,6 +385,7 @@ const DialogIconButton = (props) => { edge="start" sx={{height: "45px", marginTop: "17px", ...sx}} onClick={props.onClick} + disabled={props.disabled} > {props.children} @@ -371,11 +412,12 @@ const AttachmentBox = (props) => { variant="body2" value={props.filename} onChange={(ev) => props.onChangeFilename(ev.target.value)} + disabled={props.disabled} />
{formatBytes(file.size)} - + ); @@ -414,6 +456,7 @@ const ExpandingTextField = (props) => { sx={{ width: `${textWidth}px`, borderBottom: "none" }} InputProps={{ style: { fontSize: theme.typography[props.variant].fontSize } }} inputProps={{ style: { paddingBottom: 0, paddingTop: 0 } }} + disabled={props.disabled} /> )