diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx index 950aa355..26b79f75 100644 --- a/src/components/Editor/Editor.tsx +++ b/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() diff --git a/src/components/Editor/UploadModalContent/UploadModalContent.tsx b/src/components/Editor/UploadModalContent/UploadModalContent.tsx index c2e99ad4..51b0939f 100644 --- a/src/components/Editor/UploadModalContent/UploadModalContent.tsx +++ b/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() const [dragActive, setDragActive] = createSignal(false) const [dragError, setDragError] = createSignal() - + 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) { diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx index 75ceeaac..360d5a25 100644 --- a/src/components/Nav/Header/Header.tsx +++ b/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())) } }) diff --git a/src/components/ProfileSettings/ProfileSettings.tsx b/src/components/ProfileSettings/ProfileSettings.tsx index 9d405a9b..15532ddb 100644 --- a/src/components/ProfileSettings/ProfileSettings.tsx +++ b/src/components/ProfileSettings/ProfileSettings.tsx @@ -57,7 +57,7 @@ export const ProfileSettings = () => { const [nameError, setNameError] = createSignal() 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) diff --git a/src/components/_shared/SolidSwiper/EditorSwiper.tsx b/src/components/_shared/SolidSwiper/EditorSwiper.tsx index c7f53a03..83d691a8 100644 --- a/src/components/_shared/SolidSwiper/EditorSwiper.tsx +++ b/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() - + 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)) diff --git a/src/utils/handleImageUpload.ts b/src/utils/handleImageUpload.ts index d0308a03..56181ca8 100644 --- a/src/utils/handleImageUpload.ts +++ b/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 => { - // TODO: image uploads can be authenticated too +export const handleImageUpload = async (uploadFile: UploadFile, token: string): Promise => { 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')