diff --git a/apps/portal/src/components/resumes/ResumePdf.tsx b/apps/portal/src/components/resumes/ResumePdf.tsx index 82e26395..99431070 100644 --- a/apps/portal/src/components/resumes/ResumePdf.tsx +++ b/apps/portal/src/components/resumes/ResumePdf.tsx @@ -1,9 +1,12 @@ -import { useState } from 'react'; +import axios from 'axios'; +import { useEffect, useState } from 'react'; import { Document, Page, pdfjs } from 'react-pdf'; import type { PDFDocumentProxy } from 'react-pdf/node_modules/pdfjs-dist'; import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid'; import { Button, Spinner } from '@tih/ui'; +import { RESUME_STORAGE_KEY } from '~/constants/file-storage-keys'; + pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`; type Props = Readonly<{ @@ -13,16 +16,31 @@ type Props = Readonly<{ export default function ResumePdf({ url }: Props) { const [numPages, setNumPages] = useState(0); const [pageNumber] = useState(1); + const [file, setFile] = useState(); const onPdfLoadSuccess = (pdf: PDFDocumentProxy) => { setNumPages(pdf.numPages); }; + useEffect(() => { + async function fetchData() { + await axios + .get(`/api/file-storage?key=${RESUME_STORAGE_KEY}&url=${url}`, { + responseType: 'blob', + }) + .then((res) => { + const fileObject = res.data; + setFile(fileObject); + }); + } + fetchData(); + }, [url]); + return (
} onLoadSuccess={onPdfLoadSuccess}> diff --git a/apps/portal/src/constants/file-storage-keys.ts b/apps/portal/src/constants/file-storage-keys.ts new file mode 100644 index 00000000..753a5892 --- /dev/null +++ b/apps/portal/src/constants/file-storage-keys.ts @@ -0,0 +1 @@ +export const RESUME_STORAGE_KEY = 'resumes'; diff --git a/apps/portal/src/pages/api/file-storage.ts b/apps/portal/src/pages/api/file-storage.ts index 96e5d59a..d57f2453 100644 --- a/apps/portal/src/pages/api/file-storage.ts +++ b/apps/portal/src/pages/api/file-storage.ts @@ -2,11 +2,8 @@ import formidable from 'formidable'; import * as fs from 'fs'; import type { NextApiRequest, NextApiResponse } from 'next'; -import { env } from '~/env/server.mjs'; import { supabase } from '~/utils/supabase'; -const BASE_URL = `${env.SUPABASE_URL}/storage/v1/object/public`; - export const config = { api: { bodyParser: false, @@ -42,7 +39,7 @@ export default async function handler( } return res.status(200).json({ - url: `${BASE_URL}/${key}/${filePath}`, + url: filePath, }); }); } catch (error: unknown) { @@ -50,18 +47,19 @@ export default async function handler( } } - // See if we need this if (req.method === 'GET') { - const { key, filePath } = req.query; + const { key, url } = req.query; const { data, error } = await supabase.storage - .from(key as string) - .download(filePath as string); + .from(`public/${key as string}`) + .download(url as string); - if (error) { + if (error || data == null) { throw error; } - res.status(200).write(data); + const arrayBuffer = await data.arrayBuffer(); + const buffer = Buffer.from(arrayBuffer); + res.status(200).send(buffer); } } diff --git a/apps/portal/src/pages/resumes/submit.tsx b/apps/portal/src/pages/resumes/submit.tsx index 530e2414..409e70a3 100644 --- a/apps/portal/src/pages/resumes/submit.tsx +++ b/apps/portal/src/pages/resumes/submit.tsx @@ -14,6 +14,7 @@ import { ROLES, } from '~/components/resumes/browse/constants'; +import { RESUME_STORAGE_KEY } from '~/constants/file-storage-keys'; import { trpc } from '~/utils/trpc'; const TITLE_PLACEHOLDER = @@ -55,7 +56,7 @@ export default function SubmitResumeForm() { } const formData = new FormData(); - formData.append('key', 'resumes'); + formData.append('key', RESUME_STORAGE_KEY); formData.append('file', resumeFile); const res = await axios.post('/api/file-storage', formData, {