Almost there

web/src/app/Api.js

@@ -52,14 +52,22 @@ class Api {
         const send = new Promise(function (resolve, reject) {
             xhr.open("PUT", url);
             xhr.addEventListener('readystatechange', (ev) => {
-                console.log("read change", xhr.readyState, xhr.status, xhr.responseText, xhr)
                 if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status <= 299) {
                     console.log(`[Api] Publish successful (HTTP ${xhr.status})`, xhr.response);
                     resolve(xhr.response);
                 } else if (xhr.readyState === 4) {
-                    console.log(`[Api] Publish failed`, xhr.status, xhr.responseText, xhr);
+                    console.log(`[Api] Publish failed (HTTP ${xhr.status})`, xhr.responseText);
+                    let errorText;
+                    try {
+                        const error = JSON.parse(xhr.responseText);
+                        if (error.code && error.error) {
+                            errorText = `Error ${error.code}: ${error.error}`;
+                        }
+                    } catch (e) {
+                        // Nothing
+                    }
                     xhr.abort();
-                    reject(ev);
+                    reject(errorText ?? "An error occurred");
                 }
             })
             xhr.upload.addEventListener("progress", onProgress);

web/src/components/App.js

@@ -18,10 +18,8 @@ import {expandUrl, topicUrl} from "../app/utils";
 import ErrorBoundary from "./ErrorBoundary";
 import routes from "./routes";
 import {useAutoSubscribe, useBackgroundProcesses, useConnectionListeners} from "./hooks";
-import {Backdrop} from "@mui/material";
 import Paper from "@mui/material/Paper";
 import IconButton from "@mui/material/IconButton";
-import {MoreVert} from "@mui/icons-material";
 import TextField from "@mui/material/TextField";
 import SendIcon from "@mui/icons-material/Send";
 import api from "../app/Api";
@@ -127,50 +125,54 @@ const Main = (props) => {
 const Messaging = (props) => {
     const [message, setMessage] = useState("");
     const [dialogKey, setDialogKey] = useState(0);
+    const [dialogOpenMode, setDialogOpenMode] = useState("");
     const [showDialog, setShowDialog] = useState(false);
     const [showDropZone, setShowDropZone] = useState(false);
 
     const subscription = props.selected;
     const selectedTopicUrl = (subscription) ? topicUrl(subscription.baseUrl, subscription.topic) : "";
 
-    useEffect(() => {
+    const handleWindowDragEnter = () => {
-        window.addEventListener('dragenter', () => {
+        setDialogOpenMode(prev => (prev) ? prev : SendDialog.OPEN_MODE_DRAG); // Only update if not already open
         setShowDialog(true);
         setShowDropZone(true);
-        });
+    };
+
+    useEffect(() => {
+        window.addEventListener('dragenter', handleWindowDragEnter);
     }, []);
 
+    const handleOpenDialogClick = () => {
+        setDialogOpenMode(SendDialog.OPEN_MODE_DEFAULT);
+        setShowDialog(true);
+        setShowDropZone(false);
+    };
+
     const handleSendDialogClose = () => {
         setShowDialog(false);
         setShowDropZone(false);
+        setDialogOpenMode("");
         setDialogKey(prev => prev+1);
     };
 
-    const allowSubmit = () => true;
-
-    const allowDrag = (e) => {
-        if (allowSubmit()) {
-            e.dataTransfer.dropEffect = 'copy';
-            e.preventDefault();
-        }
-    };
-
     return (
         <>
             {subscription && <MessageBar
                 subscription={subscription}
                 message={message}
                 onMessageChange={setMessage}
-                onOpenDialogClick={() => setShowDialog(true)}
+                onOpenDialogClick={handleOpenDialogClick}
             />}
             <SendDialog
                 key={`sendDialog${dialogKey}`} // Resets dialog when canceled/closed
-                open={showDialog}
-                dropZone={showDropZone}
-                onClose={handleSendDialogClose}
-                onDrop={() => setShowDropZone(false)}
                 topicUrl={selectedTopicUrl}
                 message={message}
+                open={showDialog}
+                openMode={dialogOpenMode}
+                dropZone={showDropZone}
+                onClose={handleSendDialogClose}
+                onHideDropZone={() => setShowDropZone(false)}
+                onResetOpenMode={() => setDialogOpenMode(SendDialog.OPEN_MODE_DEFAULT)}
             />
         </>
     );

web/src/components/DialogFooter.js

@@ -10,16 +10,16 @@ const DialogFooter = (props) => {
             flexDirection: 'row',
             justifyContent: 'space-between',
             paddingLeft: '24px',
-            paddingTop: '8px 24px',
+            paddingBottom: '8px',
-            paddingBottom: '8px 24px',
         }}>
-            <DialogContentText sx={{
+            <DialogContentText component="div" sx={{
                 margin: '0px',
                 paddingTop: '12px',
+                paddingBottom: '4px'
             }}>
                 {props.status}
             </DialogContentText>
-            <DialogActions>
+            <DialogActions sx={{paddingRight: 2}}>
                 {props.children}
             </DialogActions>
         </Box>

web/src/components/SendDialog.js

@@ -27,7 +27,7 @@ import userManager from "../app/UserManager";
 
 const SendDialog = (props) => {
     const [topicUrl, setTopicUrl] = useState("");
-    const [message, setMessage] = useState(props.message || "");
+    const [message, setMessage] = useState("");
     const [title, setTitle] = useState("");
     const [tags, setTags] = useState("");
     const [priority, setPriority] = useState(3);
@@ -51,7 +51,7 @@ const SendDialog = (props) => {
     const [attachFileError, setAttachFileError] = useState("");
 
     const [activeRequest, setActiveRequest] = useState(null);
-    const [statusText, setStatusText] = useState("");
+    const [status, setStatus] = useState("");
     const disabled = !!activeRequest;
 
     const [sendButtonEnabled, setSendButtonEnabled] = useState(true);
@@ -65,9 +65,14 @@ const SendDialog = (props) => {
     }, [props.topicUrl]);
 
     useEffect(() => {
-        setSendButtonEnabled(validTopicUrl(topicUrl) && !attachFileError);
+        const valid = validTopicUrl(topicUrl) && !attachFileError;
+        setSendButtonEnabled(valid);
     }, [topicUrl, attachFileError]);
 
+    useEffect(() => {
+        setMessage(props.message);
+    }, [props.message]);
+
     const handleSubmit = async () => {
         const { baseUrl, topic } = splitTopicUrl(topicUrl);
         const headers = {};
@@ -105,12 +110,11 @@ const SendDialog = (props) => {
                 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}%) ...`);
+                    setStatus(`Uploading ${formatBytes(ev.loaded)}/${formatBytes(ev.total)} (${percent}%) ...`);
                 } else {
-                    setStatusText(`Uploading ...`);
+                    setStatus(`Uploading ...`);
                 }
             };
             const request = api.publishXHR(baseUrl, topic, body, headers, progressFn);
@@ -119,13 +123,13 @@ const SendDialog = (props) => {
             if (!publishAnother) {
                 props.onClose();
             } else {
-                setStatusText("Message published");
+                setStatus("Message published");
+                setActiveRequest(null);
             }
         } catch (e) {
-            console.log("error", e);
+            setStatus(<Typography sx={{color: 'error.main', maxWidth: "400px"}}>{e}</Typography>);
-            setStatusText("An error occurred");
-        }
             setActiveRequest(null);
+        }
     };
 
     const checkAttachmentLimits = async (file) => {
@@ -133,17 +137,17 @@ const SendDialog = (props) => {
             const { baseUrl } = splitTopicUrl(topicUrl);
             const stats = await api.userStats(baseUrl);
             console.log(`[SendDialog] Visitor attachment limits`, stats);
-
             const fileSizeLimit = stats.attachmentFileSizeLimit ?? 0;
-            if (fileSizeLimit > 0 && file.size > fileSizeLimit) {
-                return setAttachFileError(`exceeds ${formatBytes(fileSizeLimit)} limit`);
-            }
-
             const remainingBytes = stats.visitorAttachmentBytesRemaining ?? 0;
-            if (remainingBytes > 0 && file.size > remainingBytes) {
+            const fileSizeLimitReached = fileSizeLimit > 0 && file.size > fileSizeLimit;
+            const quotaReached = remainingBytes > 0 && file.size > remainingBytes;
+            if (fileSizeLimitReached && quotaReached) {
+                return setAttachFileError(`exceeds ${formatBytes(fileSizeLimit)} file limit, quota reached: ${formatBytes(remainingBytes)} remaining`);
+            } else if (fileSizeLimitReached) {
+                return setAttachFileError(`exceeds ${formatBytes(fileSizeLimit)} file limit`);
+            } else if (quotaReached) {
                 return setAttachFileError(`quota reached, only ${formatBytes(remainingBytes)} remaining`);
             }
-
             setAttachFileError("");
         } catch (e) {
             console.log(`[SendDialog] Retrieving attachment limits failed`, e);
@@ -161,59 +165,39 @@ const SendDialog = (props) => {
 
     const handleAttachFileDrop = async (ev) => {
         ev.preventDefault();
-        props.onDrop();
+        props.onHideDropZone();
         await updateAttachFile(ev.dataTransfer.files[0]);
     };
 
     const updateAttachFile = async (file) => {
         setAttachFile(file);
         setFilename(file.name);
+        props.onResetOpenMode();
         await checkAttachmentLimits(file);
     };
 
-    const allowDrag = (ev) => {
+    const handleAttachFileDragLeave = () => {
-        if (true /* allowSubmit */) {
+        // When the dialog was opened by dragging a file in, close it. If it was open
-            ev.dataTransfer.dropEffect = 'copy';
+        // before, keep it open.
-            ev.preventDefault();
+
+        console.log(`open mode ${props.openMode}`);
+        if (props.openMode === SendDialog.OPEN_MODE_DRAG) {
+            props.onClose();
+        } else {
+            props.onHideDropZone();
         }
     };
 
     return (
+        <>
+            {dropZone && <DropArea
+                onDrop={handleAttachFileDrop}
+                onDragLeave={handleAttachFileDragLeave}/>
+            }
             <Dialog maxWidth="md" open={props.open} onClose={props.onCancel} fullScreen={fullScreen}>
                 <DialogTitle>Publish to {shortUrl(topicUrl)}</DialogTitle>
                 <DialogContent>
-                {dropZone &&
+                    {dropZone && <DropBox/>}
-                    <Box sx={{
-                        position: 'absolute',
-                        left: 0,
-                        top: 0,
-                        right: 0,
-                        bottom: 0,
-                        zIndex: 10000,
-                        backgroundColor: "#ffffffbb"
-                    }}>
-                        <Box
-                            sx={{
-                                position: 'absolute',
-                                border: '3px dashed #ccc',
-                                borderRadius: '5px',
-                                left: "40px",
-                                top: "40px",
-                                right: "40px",
-                                bottom: "40px",
-                                zIndex: 10001,
-                                display: 'flex',
-                                justifyContent: "center",
-                                alignItems: "center",
-                            }}
-                            onDrop={handleAttachFileDrop}
-                            onDragEnter={allowDrag}
-                            onDragOver={allowDrag}
-                        >
-                            <Typography variant="h5">Drop file here</Typography>
-                        </Box>
-                    </Box>
-                }
                     {showTopicUrl &&
                         <ClosableRow disabled={disabled} onClose={() => {
                             setTopicUrl(props.topicUrl);
@@ -404,7 +388,7 @@ const SendDialog = (props) => {
                             <TextField
                                 margin="dense"
                                 label="Delay"
-                            placeholder="Unix timestamp, duration or English natural language"
+                                placeholder="Delay delivery, e.g. 1649029748, 30m, or tomorrow, 9am"
                                 value={delay}
                                 onChange={ev => setDelay(ev.target.value)}
                                 disabled={disabled}
@@ -427,10 +411,10 @@ const SendDialog = (props) => {
                     </div>
                     <Typography variant="body1" sx={{marginTop: 1, marginBottom: 1}}>
                         For examples and a detailed description of all send features, please
-                    refer to the <Link href="/docs">documentation</Link>.
+                        refer to the <Link href="/docs" target="_blank">documentation</Link>.
                     </Typography>
                 </DialogContent>
-            <DialogFooter status={statusText}>
+                <DialogFooter status={status}>
                     {activeRequest && <Button onClick={() => activeRequest.abort()}>Cancel sending</Button>}
                     {!activeRequest &&
                         <>
@@ -446,6 +430,7 @@ const SendDialog = (props) => {
                     }
                 </DialogFooter>
             </Dialog>
+        </>
     );
 };
 
@@ -539,7 +524,7 @@ const ExpandingTextField = (props) => {
                 ref={invisibleFieldRef}
                 component="span"
                 variant={props.variant}
-                sx={{position: "absolute", left: "-100%"}}
+                sx={{position: "absolute", left: "-200%"}}
             >
                 {props.value}
             </Typography>
@@ -559,12 +544,74 @@ const ExpandingTextField = (props) => {
     )
 };
 
+const DropArea = (props) => {
+    const allowDrag = (ev) => {
+        // This is where we could disallow certain files to be dragged in.
+        // For now we allow all files.
+
+        ev.dataTransfer.dropEffect = 'copy';
+        ev.preventDefault();
+    };
+
+    return (
+        <Box
+            sx={{
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 10002,
+            }}
+            onDrop={props.onDrop}
+            onDragEnter={allowDrag}
+            onDragOver={allowDrag}
+            onDragLeave={props.onDragLeave}
+        />
+    );
+};
+
+const DropBox = () => {
+    return (
+        <Box sx={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 10000,
+            backgroundColor: "#ffffffbb"
+        }}>
+            <Box
+                sx={{
+                    position: 'absolute',
+                    border: '3px dashed #ccc',
+                    borderRadius: '5px',
+                    left: "40px",
+                    top: "40px",
+                    right: "40px",
+                    bottom: "40px",
+                    zIndex: 10001,
+                    display: 'flex',
+                    justifyContent: "center",
+                    alignItems: "center",
+                }}
+            >
+                <Typography variant="h5">Drop file here</Typography>
+            </Box>
+        </Box>
+    );
+}
+
 const priorities = {
-    1: { label: "Minimum priority", file: priority1 },
+    1: { label: "Min. priority", file: priority1 },
     2: { label: "Low priority", file: priority2 },
     3: { label: "Default priority", file: priority3 },
     4: { label: "High priority", file: priority4 },
-    5: { label: "Maximum priority", file: priority5 }
+    5: { label: "Max. priority", file: priority5 }
 };
 
+SendDialog.OPEN_MODE_DEFAULT = "default";
+SendDialog.OPEN_MODE_DRAG = "drag";
+
 export default SendDialog;