fix upload in doc preview

Author: Davy-c

src/cloud/components/DocPreview/DocPreviewRealtime.tsx

@@ -30,9 +30,11 @@ import cc from 'classcat'
 import WithTooltip from '../../../design/components/atoms/WithTooltip'
 import { useEffectOnUnmount } from '../../../lib/hooks'
 import { useDocEditor } from '../../lib/hooks/editor/docEditor'
+import { SerializedSubscription } from '../../interfaces/db/subscription'
 
 interface DocPreviewRealtimeProps {
   team: SerializedTeam
+  subscription?: SerializedSubscription
   doc: SerializedDocWithSupplemental
   token: string
   mode?: 'preview' | 'editor'
@@ -46,6 +48,7 @@ const DocPreviewRealtime = ({
   doc,
   token,
   user,
+  subscription,
   setRenderHeader,
 }: DocPreviewRealtimeProps) => {
   const [loaded, setLoaded] = useState(false)
@@ -77,6 +80,7 @@ const DocPreviewRealtime = ({
     team,
     doc,
     collaborationToken: token,
+    subscription,
   })
 
   const onEditorTemplateToolClick = useCallback(() => {

src/cloud/components/DocPreview/index.tsx

@@ -48,7 +48,7 @@ const DocPreviewModal = ({ doc, team, fallbackUrl }: DocPreviewModalProps) => {
   const { openContextModal, closeLastModal } = useModal()
   const { docsMap } = useNav()
   const { push } = useRouter()
-  const { currentUserIsCoreMember, permissions } = usePage()
+  const { currentUserIsCoreMember, permissions, subscription } = usePage()
   const [fetching, setFetching] = useState(true)
   const [mode, setMode] = useState<'preview' | 'editor'>('preview')
   const [collabToken, setCollabToken] = useState(
@@ -226,6 +226,7 @@ const DocPreviewModal = ({ doc, team, fallbackUrl }: DocPreviewModalProps) => {
             token={collabToken}
             user={currentUser}
             mode={mode}
+            subscription={subscription}
           />
         )}
       </div>

src/cloud/lib/hooks/editor/docEditor.ts

@@ -2,9 +2,12 @@ import { Hint } from 'codemirror'
 import throttle from 'lodash.throttle'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { YText, YEvent } from 'yjs/dist/src/internals'
+import { useToast } from '../../../../design/lib/stores/toast'
 import { buildIconUrl } from '../../../api/files'
+import { buildTeamFileUrl, uploadFile } from '../../../api/teams/files'
 import { getDocLinkHref } from '../../../components/Link/DocLink'
 import { SerializedDocWithSupplemental } from '../../../interfaces/db/doc'
+import { SerializedSubscription } from '../../../interfaces/db/subscription'
 import { SerializedTeam } from '../../../interfaces/db/team'
 import { SerializedTemplate } from '../../../interfaces/db/template'
 import { SerializedUser } from '../../../interfaces/db/user'
@@ -20,20 +23,25 @@ import {
 import { useLocalSnapshot } from '../../stores/localSnapshots'
 import { useNav } from '../../stores/nav'
 import { CodeMirrorKeyMap, useSettings } from '../../stores/settings'
+import { freePlanUploadSizeMb, paidPlanUploadSizeMb } from '../../subscription'
+import { nginxSizeLimitInMb } from '../../upload'
+import { bytesToMegaBytes } from '../../utils/bytes'
 import { getColorFromString, getRandomColor } from '../../utils/string'
 
 interface DocEditorHookProps {
   doc: SerializedDocWithSupplemental
   collaborationToken: string
   team?: SerializedTeam
   user?: SerializedUser
+  subscription?: SerializedSubscription
 }
 
 export function useDocEditor({
   doc,
   collaborationToken,
   user,
   team,
+  subscription,
 }: DocEditorHookProps) {
   const { settings } = useSettings()
   const [editorContent, setEditorContent] = useState('')
@@ -45,6 +53,7 @@ export function useDocEditor({
   } | null>(null)
   const suggestionsRef = useRef<Hint[]>([])
   const { loadDoc } = useNav()
+  const { pushApiErrorMessage, pushMessage } = useToast()
   const [selection, setSelection] = useState<SelectionState>({
     currentCursor: {
       line: 0,
@@ -342,6 +351,37 @@ export function useDocEditor({
     return undefined
   }, [realtime, updateContent])
 
+  useEffect(() => {
+    if (team != null) {
+      fileUploadHandlerRef.current = async (file) => {
+        if (bytesToMegaBytes(file.size) > nginxSizeLimitInMb) {
+          pushMessage({
+            title: '',
+            description: `File size exceeding limit. ${
+              subscription == null ? freePlanUploadSizeMb : paidPlanUploadSizeMb
+            }Mb limit per upload allowed.`,
+          })
+          return null
+        }
+        try {
+          const { file: fileInfo } = await uploadFile(team, file, doc)
+          const url = buildTeamFileUrl(team, fileInfo.name)
+          if (file.type.match(/image\/.*/)) {
+            return { type: 'img', url, alt: file.name }
+          } else {
+            return { type: 'file', url, title: file.name }
+          }
+        } catch (err) {
+          console.log(err)
+          pushApiErrorMessage(err)
+          return null
+        }
+      }
+    } else {
+      fileUploadHandlerRef.current = undefined
+    }
+  }, [team, pushMessage, pushApiErrorMessage, subscription, doc])
+
   return {
     editorConfig,
     editorContent,