42 add an upload button to the UI (#64)

* frontend looks good, pending correct upload functionality

* add upload string for issue

* test upload function

* remove effect import

* redirect client and remove bad react import

* remove bad url prop

* attempt DS resolutions for JS-0417

* add comment to satisfy DS

* make header a link to /

* use href instead

* make const not function

* Trigger CICD

* add comment

* remove usage files

* add a status to the submit button

Readme.md

@@ -14,6 +14,7 @@ The upload function listens on `/api/upload` for PUT or POST requests. The uploa
 ##### Basic upload
 ```
 curl -T test.md https://contoso.com/api/upload
+curl -H "Content-Type: text/markdown" -T test.md https://contoso.com/api/upload
 ```
 
 ##### HTML upload

package.json

@@ -14,12 +14,25 @@
   "license": "ISC",
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.14.5",
+    "axios": "^1.7.9",
+    "dompurify": "^3.1.7",
+    "marked": "^14.1.2",
     "react": "^18.3.1",
-    "react-scripts": "^5.0.0",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^6.27.0",
-    "dompurify": "^3.1.7",
-    "marked": "^14.1.2"
+    "react-scripts": "^5.0.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/App.js

@@ -1,34 +1,31 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Helmet } from 'react-helmet';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import { loadUsage } from './usage';
+import Upload from './upload';
 import Footer from './footer';
 import Paste from './paste';
 
 const SITE_NAME = process.env.REACT_APP_SITE_NAME;
 
-function App() {
-    useEffect(() => {
-        loadUsage();
-    }, []);
-
-    return (
-        <Router>
-            <Helmet>
-                <title>{SITE_NAME}</title>
-            </Helmet>
-            <div id="container">
-                <div id="header">
+// Primary page, it loads the upload or paste function based on the URL
+const App = () => (
+    <Router>
+        <Helmet>
+            <title>{SITE_NAME}</title>
+        </Helmet>
+        <div id="container">
+            <div id="header">
+                <a href="/" style={{ textDecoration: 'none', color: 'inherit' }}>
                     <h1 id="site_name">{SITE_NAME}</h1>
-                </div>
-                <Routes>
-                    <Route path="/:uuid" element={<Paste />} />
-                    <Route path="/" element={<div id="usage">Loading...</div>} />
-                </Routes>
-                <Footer />
+                </a>
             </div>
-        </Router>
-    );
-};
+            <Routes>
+                <Route path="/:uuid" element={<Paste />} />
+                <Route path="/" element={<Upload />} />
+            </Routes>
+            <Footer />
+        </div>
+    </Router>
+);
 
-export default App;
+export default App;

src/style.css

@@ -32,12 +32,25 @@ body {
     margin-right: 10%;
 }
 #blobContent,
-#usage,
+#uploadBlock,
 #errorBlock {
     background-color: var(--b3);
     border-radius: .5em;
     padding: 1em;
 }
+#uploadBlock textarea {
+    width: 100%;
+    box-sizing: border-box;
+    resize: none;
+    overflow: hidden;
+    color: var(--b0);
+    background-color: var(--w0);
+    border: none;
+}
+#uploadBlock textarea:focus {
+    outline: none;
+    border: none;
+}
 footer {
     text-align: right;
     padding: 1em;

src/upload.js

@@ -0,0 +1,53 @@
+import { useState, useCallback } from 'react';
+import axios from 'axios';
+
+// Upload function that creates a text box for user input then uploads that content as a blob with markdown mimetype to the API. It redirects the user to the uploaded blob after the API returns a URL
+const Upload = () => {
+    const [content, setContent] = useState('');
+    const [isUploading, setIsUploading] = useState(false);
+
+    const handleChange = useCallback((e) => {
+        setContent(e.target.value);
+    }, []);
+
+    const upload = useCallback(async (e) => {
+        e.preventDefault();
+        setIsUploading(true);
+        try {
+            // Create a Blob with the markdown content and the correct MIME type
+            const blob = new Blob([content], { type: 'text/markdown' });
+
+            // Send the blob directly with the correct Content-Type header
+            const response = await axios.put('/api/upload', blob, {
+                headers: {
+                    'Content-Type': 'text/markdown',
+                },
+            });
+
+            // Redirect to the URL returned by the API
+            window.location.href = response.data;
+        } catch (error) {
+            console.error('Error uploading file:', error);
+            setIsUploading(false); // Re-enable button if there's an error
+        }
+    }, [content]);
+
+    return (
+        <div id="uploadBlock">
+            <form onSubmit={upload}>
+                <textarea
+                    className="textarea"
+                    value={content}
+                    onChange={handleChange}
+                    placeholder="Enter your markdown content here..."
+                    rows={Math.max(10, content.split('\n').length)}
+                />
+                <button type="submit" disabled={isUploading}>
+                    {isUploading ? 'Uploading...' : 'Upload'}
+                </button>
+            </form>
+        </div>
+    );
+};
+
+export default Upload;