From df76009648cda9bfbc035de19ffe43382f3bcf11 Mon Sep 17 00:00:00 2001
From: Botho <1258870+elbotho@users.noreply.github.com>
Date: Fri, 18 Oct 2024 15:57:07 +0200
Subject: [PATCH 1/3] feat(image): add new upload code for testing

---
 .../plugins/image/controls/upload-button.tsx  | 12 ++-
 packages/editor/src/plugins/image/editor.tsx  |  7 +-
 .../src/plugins/image/utils/upload-file.ts    | 73 +++++++++++++++++++
 .../src/plugins/image/utils/validate-file.ts  | 45 ++++++++++++
 4 files changed, 134 insertions(+), 3 deletions(-)
 create mode 100644 packages/editor/src/plugins/image/utils/upload-file.ts
 create mode 100644 packages/editor/src/plugins/image/utils/validate-file.ts

diff --git a/packages/editor/src/plugins/image/controls/upload-button.tsx b/packages/editor/src/plugins/image/controls/upload-button.tsx
index 33dda7c6c0..bb21a6da54 100644
--- a/packages/editor/src/plugins/image/controls/upload-button.tsx
+++ b/packages/editor/src/plugins/image/controls/upload-button.tsx
@@ -10,6 +10,7 @@ import {
 import { useState } from 'react'
 
 import type { ImageProps } from '..'
+import { shouldUseNewUpload, uploadFile } from '../utils/upload-file'
 
 interface UploadButtonProps {
   config: ImageProps['config']
@@ -64,7 +65,10 @@ export function UploadButton({
               const filesArray = Array.from(target.files)
 
               // Upload the first file like normal
-              void src.upload(filesArray[0], config.upload)
+              void src.upload(
+                filesArray[0], // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                shouldUseNewUpload() ? uploadFile : config.upload
+              )
 
               // If multiple upload is allowed, call the multiple upload callback
               // with the remaining files
@@ -82,7 +86,11 @@ export function UploadButton({
         <button
           className="serlo-button-editor-primary serlo-tooltip-trigger mr-2 scale-90"
           onClick={() =>
-            src.upload((src.value as TempFile).failed!, config.upload)
+            src.upload(
+              (src.value as TempFile).failed!,
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+              shouldUseNewUpload() ? uploadFile : config.upload
+            )
           }
           data-qa="plugin-image-retry"
         >
diff --git a/packages/editor/src/plugins/image/editor.tsx b/packages/editor/src/plugins/image/editor.tsx
index 08c3d35b9e..cee91b8bf6 100644
--- a/packages/editor/src/plugins/image/editor.tsx
+++ b/packages/editor/src/plugins/image/editor.tsx
@@ -13,6 +13,7 @@ import { ImageSelectionScreen } from './components/image-selection-screen'
 import { ImageRenderer } from './renderer'
 import { ImageToolbar } from './toolbar'
 import { isImageUrl } from './utils/check-image-url'
+import { shouldUseNewUpload, uploadFile } from './utils/upload-file'
 
 const captionFormattingOptions = [
   TextEditorFormattingOption.richTextBold,
@@ -27,7 +28,11 @@ export function ImageEditor(props: ImageProps) {
 
   const [showInlineImageUrl, setShowInlineImageUrl] = useState(!state.src.value)
 
-  usePendingFileUploader(state.src, config.upload)
+  usePendingFileUploader(
+    state.src,
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    shouldUseNewUpload() ? uploadFile : config.upload
+  )
 
   // eslint-disable-next-line @typescript-eslint/no-base-to-string
   const src = state.src.value.toString()
diff --git a/packages/editor/src/plugins/image/utils/upload-file.ts b/packages/editor/src/plugins/image/utils/upload-file.ts
new file mode 100644
index 0000000000..d6bd14c853
--- /dev/null
+++ b/packages/editor/src/plugins/image/utils/upload-file.ts
@@ -0,0 +1,73 @@
+import { handleError, validateFile } from './validate-file'
+
+// while testing
+export function shouldUseNewUpload() {
+  const nodeEnv = Object.hasOwn(process.env, 'NODE_ENV')
+    ? process.env.NODE_ENV
+    : undefined
+  const nextPublicEnv = Object.hasOwn(process.env, 'NEXT_PUBLIC_ENV')
+    ? process.env.NEXT_PUBLIC_ENV
+    : undefined
+  const isDevOrStaging =
+    nodeEnv === 'development' ||
+    nextPublicEnv === 'staging' ||
+    nextPublicEnv === 'local'
+  if (isDevOrStaging) {
+    // eslint-disable-next-line no-console
+    console.warn('using new upload method and temporary bucket')
+  }
+  return isDevOrStaging
+}
+
+export async function uploadFile(file: File) {
+  const validated = validateFile(file)
+
+  if (!validated) return Promise.reject()
+
+  const data = await getSignedUrlAndSrc(file.type)
+  if (!data) return Promise.reject('Could not get signed URL')
+
+  const { signedUrl, imgSrc } = data
+
+  const success = await uploadToBucket(file, signedUrl)
+  if (!success) return Promise.reject('Could not upload file')
+  return Promise.resolve(imgSrc)
+}
+
+async function getSignedUrlAndSrc(mimeType: string) {
+  // TODO: depend on environment
+  // TODO: add editorVariant
+  const url = `https://editor.serlo.dev/media/presigned-url?mimeType=${encodeURIComponent(mimeType)}&editorVariant=${encodeURIComponent('unknown')}`
+
+  const result = await fetch(url).catch((e) => {
+    // eslint-disable-next-line no-console
+    console.error(e)
+  })
+
+  const data = (await result?.json()) as { signedUrl: string; imgSrc: string }
+  return data
+}
+
+const errorMessage = 'Error while uploading'
+
+async function uploadToBucket(file: File, signedUrl: string) {
+  const response = await fetch(signedUrl, {
+    method: 'PUT',
+    body: file,
+    headers: {
+      'Content-Type': file.type,
+      'Access-Control-Allow-Origin': '*',
+    },
+  }).catch((e) => {
+    // eslint-disable-next-line no-console
+    console.error(e)
+    handleError(errorMessage)
+    return
+  })
+
+  if (!response || response.status !== 200) {
+    handleError(errorMessage)
+    return
+  }
+  return true
+}
diff --git a/packages/editor/src/plugins/image/utils/validate-file.ts b/packages/editor/src/plugins/image/utils/validate-file.ts
new file mode 100644
index 0000000000..eaf6237432
--- /dev/null
+++ b/packages/editor/src/plugins/image/utils/validate-file.ts
@@ -0,0 +1,45 @@
+import { showToastNotice } from '@editor/editor-ui/show-toast-notice'
+
+export enum FileErrorCode {
+  TOO_MANY_FILES,
+  NO_FILE_SELECTED,
+  BAD_EXTENSION,
+  FILE_TOO_BIG,
+  UPLOAD_FAILED,
+}
+
+export interface FileError {
+  errorCode: FileErrorCode
+  message: string
+}
+const maxFileSize = 2 * 1024 * 1024
+const allowedExtensions = ['gif', 'jpg', 'jpeg', 'png', 'svg', 'webp']
+
+export function validateFile(file: File) {
+  // TODO: i18n and make error messages actually helpful
+  if (!file) {
+    handleError('No file selected')
+    return false
+  }
+  if (!matchesAllowedExtensions(file.name)) {
+    handleError('Not an accepted file type')
+    return false
+  }
+  if (file.size > maxFileSize) {
+    handleError('File is too big')
+    return false
+  }
+
+  return true
+}
+
+function matchesAllowedExtensions(fileName: string) {
+  const extension = fileName.toLowerCase().slice(fileName.lastIndexOf('.') + 1)
+  return allowedExtensions.includes(extension)
+}
+
+export function handleError(message: string) {
+  // eslint-disable-next-line no-console
+  console.error(message)
+  showToastNotice(message, 'warning')
+}

From edd3e9df5b8dba13d69a4cfde734dd6caef5d6f0 Mon Sep 17 00:00:00 2001
From: Botho <1258870+elbotho@users.noreply.github.com>
Date: Fri, 18 Oct 2024 16:18:06 +0200
Subject: [PATCH 2/3] fix: also activate on previews

---
 .../src/plugins/image/utils/upload-file.ts    | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/editor/src/plugins/image/utils/upload-file.ts b/packages/editor/src/plugins/image/utils/upload-file.ts
index d6bd14c853..4bd80c1719 100644
--- a/packages/editor/src/plugins/image/utils/upload-file.ts
+++ b/packages/editor/src/plugins/image/utils/upload-file.ts
@@ -2,21 +2,20 @@ import { handleError, validateFile } from './validate-file'
 
 // while testing
 export function shouldUseNewUpload() {
-  const nodeEnv = Object.hasOwn(process.env, 'NODE_ENV')
-    ? process.env.NODE_ENV
-    : undefined
-  const nextPublicEnv = Object.hasOwn(process.env, 'NEXT_PUBLIC_ENV')
-    ? process.env.NEXT_PUBLIC_ENV
-    : undefined
-  const isDevOrStaging =
-    nodeEnv === 'development' ||
-    nextPublicEnv === 'staging' ||
-    nextPublicEnv === 'local'
-  if (isDevOrStaging) {
+  if (typeof window === 'undefined') return false
+  const host = window.location.hostname
+  const isDevOrPreviewOrStaging =
+    (host.startsWith('frontend-git') && host.endsWith('vercel.app')) ||
+    host.endsWith('serlo-staging.dev') ||
+    host === 'localhost' ||
+    process.env.NODE_ENV === 'development' ||
+    host.endsWith('serlo.dev')
+
+  if (isDevOrPreviewOrStaging) {
     // eslint-disable-next-line no-console
     console.warn('using new upload method and temporary bucket')
   }
-  return isDevOrStaging
+  return isDevOrPreviewOrStaging
 }
 
 export async function uploadFile(file: File) {

From 92fb5589d5b5270a8503c58a5e83b1bae37716c3 Mon Sep 17 00:00:00 2001
From: Botho <1258870+elbotho@users.noreply.github.com>
Date: Sat, 19 Oct 2024 12:00:28 +0200
Subject: [PATCH 3/3] add editorVariant to file upload, refactor

---
 .../core/contexts/editor-variant-context.tsx  |  4 +++
 packages/editor/src/package/editor.tsx        | 19 ++++++-----
 .../plugins/image/controls/upload-button.tsx  | 17 +++-------
 packages/editor/src/plugins/image/editor.tsx  | 10 ++----
 .../src/plugins/image/utils/upload-file.ts    | 32 +++++++++++++++----
 5 files changed, 48 insertions(+), 34 deletions(-)
 create mode 100644 packages/editor/src/core/contexts/editor-variant-context.tsx

diff --git a/packages/editor/src/core/contexts/editor-variant-context.tsx b/packages/editor/src/core/contexts/editor-variant-context.tsx
new file mode 100644
index 0000000000..11f78bf50b
--- /dev/null
+++ b/packages/editor/src/core/contexts/editor-variant-context.tsx
@@ -0,0 +1,4 @@
+import type { EditorVariant } from '@editor/package/storage-format'
+import { createContext } from 'react'
+
+export const EditorVariantContext = createContext<EditorVariant>('unknown')
diff --git a/packages/editor/src/package/editor.tsx b/packages/editor/src/package/editor.tsx
index 1b79cb73fc..26b1c75c1c 100644
--- a/packages/editor/src/package/editor.tsx
+++ b/packages/editor/src/package/editor.tsx
@@ -1,4 +1,5 @@
 import { Editor, type EditorProps } from '@editor/core'
+import { EditorVariantContext } from '@editor/core/contexts/editor-variant-context'
 import { type GetDocument } from '@editor/core/types'
 import { createBasicPlugins } from '@editor/editor-integration/create-basic-plugins'
 import { createRenderers } from '@editor/editor-integration/create-renderers'
@@ -71,14 +72,16 @@ export function SerloEditor(props: SerloEditorProps) {
   return (
     <StaticStringsProvider value={staticStrings}>
       <EditStringsProvider value={editStrings}>
-        <LtikContext.Provider value={_ltik}>
-          <Editor
-            initialState={migratedState.document}
-            onChange={handleDocumentChange}
-          >
-            {children}
-          </Editor>
-        </LtikContext.Provider>
+        <EditorVariantContext.Provider value={editorVariant}>
+          <LtikContext.Provider value={_ltik}>
+            <Editor
+              initialState={migratedState.document}
+              onChange={handleDocumentChange}
+            >
+              {children}
+            </Editor>
+          </LtikContext.Provider>
+        </EditorVariantContext.Provider>
       </EditStringsProvider>
     </StaticStringsProvider>
   )
diff --git a/packages/editor/src/plugins/image/controls/upload-button.tsx b/packages/editor/src/plugins/image/controls/upload-button.tsx
index bb21a6da54..d6861ab7fe 100644
--- a/packages/editor/src/plugins/image/controls/upload-button.tsx
+++ b/packages/editor/src/plugins/image/controls/upload-button.tsx
@@ -10,7 +10,7 @@ import {
 import { useState } from 'react'
 
 import type { ImageProps } from '..'
-import { shouldUseNewUpload, uploadFile } from '../utils/upload-file'
+import { useUploadFile } from '../utils/upload-file'
 
 interface UploadButtonProps {
   config: ImageProps['config']
@@ -28,6 +28,8 @@ export function UploadButton({
   const imageStrings = useEditStrings().plugins.image
   const isFailed = isTempFile(src.value) && src.value.failed
 
+  const upload = useUploadFile(config.upload)
+
   const [isLabelFocused, setIsLabelFocused] = useState(false)
 
   return (
@@ -65,10 +67,7 @@ export function UploadButton({
               const filesArray = Array.from(target.files)
 
               // Upload the first file like normal
-              void src.upload(
-                filesArray[0], // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-                shouldUseNewUpload() ? uploadFile : config.upload
-              )
+              void src.upload(filesArray[0], upload)
 
               // If multiple upload is allowed, call the multiple upload callback
               // with the remaining files
@@ -85,13 +84,7 @@ export function UploadButton({
       {isFailed ? (
         <button
           className="serlo-button-editor-primary serlo-tooltip-trigger mr-2 scale-90"
-          onClick={() =>
-            src.upload(
-              (src.value as TempFile).failed!,
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-              shouldUseNewUpload() ? uploadFile : config.upload
-            )
-          }
+          onClick={() => src.upload((src.value as TempFile).failed!, upload)}
           data-qa="plugin-image-retry"
         >
           <EditorTooltip text={imageStrings.retry} className="top-10" />
diff --git a/packages/editor/src/plugins/image/editor.tsx b/packages/editor/src/plugins/image/editor.tsx
index cee91b8bf6..d995bd7d2c 100644
--- a/packages/editor/src/plugins/image/editor.tsx
+++ b/packages/editor/src/plugins/image/editor.tsx
@@ -13,7 +13,7 @@ import { ImageSelectionScreen } from './components/image-selection-screen'
 import { ImageRenderer } from './renderer'
 import { ImageToolbar } from './toolbar'
 import { isImageUrl } from './utils/check-image-url'
-import { shouldUseNewUpload, uploadFile } from './utils/upload-file'
+import { useUploadFile } from './utils/upload-file'
 
 const captionFormattingOptions = [
   TextEditorFormattingOption.richTextBold,
@@ -25,15 +25,11 @@ const captionFormattingOptions = [
 export function ImageEditor(props: ImageProps) {
   const { id, focused, state, config } = props
   const imageStrings = useEditStrings().plugins.image
+  const upload = useUploadFile(config.upload)
+  usePendingFileUploader(state.src, upload)
 
   const [showInlineImageUrl, setShowInlineImageUrl] = useState(!state.src.value)
 
-  usePendingFileUploader(
-    state.src,
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    shouldUseNewUpload() ? uploadFile : config.upload
-  )
-
   // eslint-disable-next-line @typescript-eslint/no-base-to-string
   const src = state.src.value.toString()
 
diff --git a/packages/editor/src/plugins/image/utils/upload-file.ts b/packages/editor/src/plugins/image/utils/upload-file.ts
index 4bd80c1719..d3b74b5676 100644
--- a/packages/editor/src/plugins/image/utils/upload-file.ts
+++ b/packages/editor/src/plugins/image/utils/upload-file.ts
@@ -1,5 +1,17 @@
+import { EditorVariantContext } from '@editor/core/contexts/editor-variant-context'
+import { type EditorVariant } from '@editor/package/storage-format'
+import { type UploadHandler } from '@editor/plugin'
+import { useContext } from 'react'
+
 import { handleError, validateFile } from './validate-file'
 
+export function useUploadFile(oldFileUploader: UploadHandler<string>) {
+  const editorVariant = useContext(EditorVariantContext)
+  return shouldUseNewUpload()
+    ? (file: File) => uploadFile(file, editorVariant)
+    : oldFileUploader
+}
+
 // while testing
 export function shouldUseNewUpload() {
   if (typeof window === 'undefined') return false
@@ -18,12 +30,11 @@ export function shouldUseNewUpload() {
   return isDevOrPreviewOrStaging
 }
 
-export async function uploadFile(file: File) {
+export async function uploadFile(file: File, editorVariant: EditorVariant) {
   const validated = validateFile(file)
-
   if (!validated) return Promise.reject()
 
-  const data = await getSignedUrlAndSrc(file.type)
+  const data = await getSignedUrlAndSrc(file.type, editorVariant)
   if (!data) return Promise.reject('Could not get signed URL')
 
   const { signedUrl, imgSrc } = data
@@ -33,14 +44,21 @@ export async function uploadFile(file: File) {
   return Promise.resolve(imgSrc)
 }
 
-async function getSignedUrlAndSrc(mimeType: string) {
-  // TODO: depend on environment
-  // TODO: add editorVariant
-  const url = `https://editor.serlo.dev/media/presigned-url?mimeType=${encodeURIComponent(mimeType)}&editorVariant=${encodeURIComponent('unknown')}`
+const signedUrlHost =
+  process.env.NODE_ENV === 'development'
+    ? 'editor.serlo.dev'
+    : 'editor.serlo.dev' // TODO: Change to production bucket after testing
+
+async function getSignedUrlAndSrc(
+  mimeType: string,
+  editorVariant: EditorVariant
+) {
+  const url = `https://${signedUrlHost}/media/presigned-url?mimeType=${encodeURIComponent(mimeType)}&editorVariant=${encodeURIComponent(editorVariant)}`
 
   const result = await fetch(url).catch((e) => {
     // eslint-disable-next-line no-console
     console.error(e)
+    handleError(errorMessage)
   })
 
   const data = (await result?.json()) as { signedUrl: string; imgSrc: string }