Reuse

src/features/post/new/PostEditorRoot.tsx

@@ -35,10 +35,8 @@ import { useOptimizedIonRouter } from "../../../helpers/useOptimizedIonRouter";
 import { isAndroid } from "../../../helpers/device";
 import { css } from "@linaria/core";
 import AppHeader from "../../shared/AppHeader";
-import {
-  deletePendingImageUploads,
-  uploadImage,
-} from "../../shared/markdown/editing/uploadImageSlice";
+import { deletePendingImageUploads } from "../../shared/markdown/editing/uploadImageSlice";
+import useUploadImage from "../../shared/markdown/editing/useUploadImage";
 
 const Container = styled.div`
   position: absolute;
@@ -81,7 +79,7 @@ const HiddenInput = styled.input`
   display: none;
 `;
 
-type PostType = "photo" | "link" | "text";
+type PostType = "media" | "link" | "text";
 
 const MAX_TITLE_LENGTH = 200;
 
@@ -106,12 +104,14 @@ export default function PostEditorRoot({
 
   const dispatch = useAppDispatch();
 
+  const { uploadImage } = useUploadImage();
+
   const initialImage = isImage ? existingPost!.post.url : undefined;
 
   const initialPostType = (() => {
-    if (!existingPost) return "photo";
+    if (!existingPost) return "media";
 
-    if (initialImage) return "photo";
+    if (initialImage) return "media";
 
     if (existingPost.post.url) return "link";
 
@@ -148,7 +148,7 @@ export default function PostEditorRoot({
   const showAutofill = !!url && isValidUrl(url) && !title;
 
   const showNsfwToggle = !!(
-    (postType === "photo" && photoPreviewURL) ||
+    (postType === "media" && photoPreviewURL) ||
     (postType === "link" && url)
   );
 
@@ -186,7 +186,7 @@ export default function PostEditorRoot({
         if (!url) return false;
         break;
 
-      case "photo":
+      case "media":
         if (!photoUrl) return false;
         break;
     }
@@ -210,7 +210,7 @@ export default function PostEditorRoot({
       switch (postType) {
         case "link":
           return url || undefined;
-        case "photo":
+        case "media":
           return photoUrl || undefined;
         default:
           return;
@@ -224,8 +224,8 @@ export default function PostEditorRoot({
     } else if (postType === "link" && (!url || !validUrl(url))) {
       errorMessage =
         "Please add a valid URL to your post (start with https://).";
-    } else if (postType === "photo" && !photoUrl) {
-      errorMessage = "Please add a photo to your post.";
+    } else if (postType === "media" && !photoUrl) {
+      errorMessage = "Please add a photo or video to your post.";
     } else if (!canSubmit()) {
       errorMessage =
         "It looks like you're missing some information to submit this post. Please double check.";
@@ -312,15 +312,8 @@ export default function PostEditorRoot({
     if (isAndroid()) await new Promise((resolve) => setTimeout(resolve, 250));
 
     try {
-      imageUrl = await dispatch(uploadImage(image));
+      imageUrl = await uploadImage(image);
     } catch (error) {
-      const message = error instanceof Error ? error.message : "Unknown error";
-
-      presentToast({
-        message: `Problem uploading image: ${message}. Please try again.`,
-        color: "danger",
-        fullscreen: true,
-      });
       clearImage();
 
       throw error;
@@ -396,7 +389,7 @@ export default function PostEditorRoot({
             value={postType}
             onIonChange={(e) => setPostType(e.target.value as PostType)}
           >
-            <IonSegmentButton value="photo">Photo</IonSegmentButton>
+            <IonSegmentButton value="media">Media</IonSegmentButton>
             <IonSegmentButton value="link">Link</IonSegmentButton>
             <IonSegmentButton value="text">Text</IonSegmentButton>
           </IonSegment>
@@ -433,7 +426,7 @@ export default function PostEditorRoot({
                 </IonButton>
               )}
             </IonItem>
-            {postType === "photo" && (
+            {postType === "media" && (
               <>
                 <label htmlFor="photo-upload">
                   <IonItem>

src/features/shared/markdown/editing/Editor.tsx

@@ -122,7 +122,7 @@ export default forwardRef<HTMLTextAreaElement, EditorProps>(function Editor(
   }
 
   async function onReceivedImage(image: File) {
-    const markdown = await uploadImage(image);
+    const markdown = await uploadImage(image, true);
 
     textareaRef.current?.focus();
     document.execCommand("insertText", false, markdown);

src/features/shared/markdown/editing/modes/DefaultMode.tsx

@@ -463,7 +463,7 @@ export default function DefaultMode({
               const image = (e.target as HTMLInputElement).files?.[0];
               if (!image) return;
 
-              const markdown = await uploadImage(image);
+              const markdown = await uploadImage(image, true);
 
               textareaRef.current?.focus();
               document.execCommand("insertText", false, markdown);

src/features/shared/markdown/editing/useUploadImage.tsx

@@ -11,16 +11,24 @@ export default function useUploadImage() {
 
   return {
     jsx: <IonLoading isOpen={imageUploading} message="Uploading image..." />,
-    uploadImage: async (image: File) => {
+    uploadImage: async (image: File, toMarkdown = false) => {
       setImageUploading(true);
 
       let imageUrl: string;
 
       try {
         imageUrl = await dispatch(uploadImage(image));
       } catch (error) {
-        const message =
-          error instanceof Error ? error.message : "Unknown error";
+        const message = (() => {
+          if (error instanceof Error) {
+            if (error.message.startsWith("NetworkError"))
+              return "Issue with network connectivity, or upload was too large";
+
+            return error.message;
+          }
+
+          return "Unknown error";
+        })();
 
         presentToast({
           message: `Problem uploading image: ${message}. Please try again.`,
@@ -33,7 +41,9 @@ export default function useUploadImage() {
         setImageUploading(false);
       }
 
-      return `\n![](${imageUrl})\n`;
+      if (toMarkdown) return `\n![](${imageUrl})\n`;
+
+      return imageUrl;
     },
   };
 }