add a status to the submit button

src/upload.js

@@ -4,13 +4,15 @@ 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' });
@@ -26,6 +28,7 @@ const Upload = () => {
             window.location.href = response.data;
         } catch (error) {
             console.error('Error uploading file:', error);
+            setIsUploading(false); // Re-enable button if there's an error
         }
     }, [content]);
 
@@ -39,10 +42,12 @@ const Upload = () => {
                     placeholder="Enter your markdown content here..."
                     rows={Math.max(10, content.split('\n').length)}
                 />
-                <button type="submit">Upload</button>
+                <button type="submit" disabled={isUploading}>
+                    {isUploading ? 'Uploading...' : 'Upload'}
+                </button>
             </form>
         </div>
     );
 };
 
-export default Upload;
+export default Upload;