auth-upload

src/components/Editor/Editor.tsx

@@ -151,7 +151,7 @@ export const Editor = (props: Props) => {
       }
 
       showSnackbar({ body: t('Uploading image') })
-      const result = await handleImageUpload(uplFile)
+      const result = await handleImageUpload(uplFile, session()?.access_token)
 
       editor()
         .chain()

src/components/Editor/UploadModalContent/UploadModalContent.tsx

@@ -12,6 +12,7 @@ import { Icon } from '../../_shared/Icon'
 import { Loading } from '../../_shared/Loading'
 import { InlineForm } from '../InlineForm'
 
+import { useSession } from '../../../context/session'
 import styles from './UploadModalContent.module.scss'
 
 type Props = {
@@ -24,12 +25,12 @@ export const UploadModalContent = (props: Props) => {
   const [uploadError, setUploadError] = createSignal<string | undefined>()
   const [dragActive, setDragActive] = createSignal(false)
   const [dragError, setDragError] = createSignal<string | undefined>()
-
+  const { session } = useSession()
   const { selectFiles } = createFileUploader({ multiple: false, accept: 'image/*' })
   const runUpload = async (file: UploadFile) => {
     try {
       setIsUploading(true)
-      const result = await handleImageUpload(file)
+      const result = await handleImageUpload(file, session()?.access_token)
       props.onClose(result)
       setIsUploading(false)
     } catch (error) {

src/components/Nav/Header/Header.tsx

@@ -70,7 +70,6 @@ export const Header = (props: Props) => {
 
   createEffect(() => {
     if (topics()?.length) {
-      console.debug(topics())
       setRandomTopics(getRandomTopicsFromArray(topics()))
     }
   })

src/components/ProfileSettings/ProfileSettings.tsx

@@ -57,7 +57,7 @@ export const ProfileSettings = () => {
   const [nameError, setNameError] = createSignal<string>()
   const { form, submit, updateFormField, setForm } = useProfileForm()
   const { showSnackbar } = useSnackbar()
-  const { loadAuthor } = useSession()
+  const { loadAuthor, session } = useSession()
   const { showConfirm } = useConfirm()
 
   createEffect(() => {
@@ -140,7 +140,7 @@ export const ProfileSettings = () => {
       setUploadError(false)
       setIsUserpicUpdating(true)
 
-      const result = await handleImageUpload(uploadFile)
+      const result = await handleImageUpload(uploadFile, session()?.access_token)
       updateFormField('pic', result.url)
 
       setUserpicFile(null)

src/components/_shared/SolidSwiper/EditorSwiper.tsx

@@ -19,6 +19,7 @@ import { Popover } from '../Popover'
 
 import { SwiperRef } from './swiper'
 
+import { useSession } from '../../../context/session'
 import styles from './Swiper.module.scss'
 
 const SimplifiedEditor = lazy(() => import('../../Editor/SimplifiedEditor'))
@@ -36,7 +37,7 @@ export const EditorSwiper = (props: Props) => {
   const [loading, setLoading] = createSignal(false)
   const [slideIndex, setSlideIndex] = createSignal(0)
   const [slideBody, setSlideBody] = createSignal<string>()
-
+  const { session } = useSession()
   const mainSwipeRef: { current: SwiperRef } = { current: null }
   const thumbSwipeRef: { current: SwiperRef } = { current: null }
 
@@ -100,7 +101,7 @@ export const EditorSwiper = (props: Props) => {
       setLoading(true)
       const results: UploadedFile[] = []
       for (const file of selectedFiles) {
-        const result = await handleImageUpload(file)
+        const result = await handleImageUpload(file, session()?.access_token)
         results.push(result)
       }
       props.onImagesAdd(composeMediaItems(results))

src/utils/handleImageUpload.ts

@@ -4,13 +4,14 @@ import { UploadedFile } from '../pages/types'
 
 import { thumborUrl } from './config'
 
-export const handleImageUpload = async (uploadFile: UploadFile, _token: string): Promise<UploadedFile> => {
-  // TODO: image uploads can be authenticated too
+export const handleImageUpload = async (uploadFile: UploadFile, token: string): Promise<UploadedFile> => {
   const formData = new FormData()
   formData.append('media', uploadFile.file, uploadFile.name)
+  const headers = token ? { Authorization: token } : {}
   const response = await fetch(`${thumborUrl}/image`, {
     method: 'POST',
     body: formData,
+    headers
   })
 
   const location = response.headers.get('Location')