From 34539a16df5244fa23cd564f5c0fbcbff7096db1 Mon Sep 17 00:00:00 2001 From: Justin Walrath Date: Wed, 14 May 2025 16:27:06 -0400 Subject: [PATCH] [#19] Now there is a progress bar that pops up while uploading the episode --- public/file.svg | 1 - public/globe.svg | 1 - public/next.svg | 1 - public/vercel.svg | 1 - public/window.svg | 1 - src/app/[stream]/publish/publishForm.tsx | 47 +++++++++++++++++------- src/pages/api/[stream].ts | 21 ----------- src/pages/api/[stream]/podcasts.ts | 1 + 8 files changed, 35 insertions(+), 39 deletions(-) delete mode 100644 public/file.svg delete mode 100644 public/globe.svg delete mode 100644 public/next.svg delete mode 100644 public/vercel.svg delete mode 100644 public/window.svg diff --git a/public/file.svg b/public/file.svg deleted file mode 100644 index 004145c..0000000 --- a/public/file.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/globe.svg b/public/globe.svg deleted file mode 100644 index 567f17b..0000000 --- a/public/globe.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index 7705396..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/window.svg b/public/window.svg deleted file mode 100644 index b2b2a44..0000000 --- a/public/window.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/[stream]/publish/publishForm.tsx b/src/app/[stream]/publish/publishForm.tsx index 2e85c30..15befd0 100644 --- a/src/app/[stream]/publish/publishForm.tsx +++ b/src/app/[stream]/publish/publishForm.tsx @@ -16,7 +16,8 @@ type PodcastDto = { export default function StreamPublishForm({ stream }: { stream?: string | string[] }) { const { register, handleSubmit, formState: { errors } } = useForm(), router = useRouter(), - [submitting, setSubmitting] = useState(false); + [submitting, setSubmitting] = useState(false), + [progress, setProgress] = useState(-1); const onSubmit: SubmitHandler = (data) => { setSubmitting(true); @@ -28,21 +29,33 @@ export default function StreamPublishForm({ stream }: { stream?: string | string formData.append("file", data.url?.[0] as File); formData.append("author", data.author); + const xhr = new XMLHttpRequest(); + xhr.open("POST", `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/${stream}/podcasts`); - fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/${stream}/podcasts`, { - method: "POST", - body: formData, - }) - .then((res) => res.json()) - .then(() => { + xhr.upload.onprogress = (event) => { + if (event.lengthComputable) { + setProgress(Math.round((event.loaded / event.total) * 100)); + } + }; + + xhr.onload = () => { + setSubmitting(false); + if (xhr.status === 201) { alert(`Podcast uploaded: ${data.title}`); router.push(`/${stream}/podcasts`); - }) - .catch((err) => { - alert(`Error creating podcast: JSON.string${err}`); - setSubmitting(false); - }); - }; + } else { + alert('Error uploading podcast.'); + } + }; + + xhr.onerror = () => { + setSubmitting(false); + alert('Error uploading podcast.'); + }; + + xhr.send(formData); + + } return (
@@ -115,6 +128,14 @@ export default function StreamPublishForm({ stream }: { stream?: string | string > {submitting ? 'Uploading...' : 'Upload'} + {progress > 0 && progress < 100 && ( +
+
+
+ )}
); diff --git a/src/pages/api/[stream].ts b/src/pages/api/[stream].ts index 04fad73..4251fb2 100644 --- a/src/pages/api/[stream].ts +++ b/src/pages/api/[stream].ts @@ -12,25 +12,4 @@ export default async function handler( const data = prepareStreamItem(await getStream(stream as string)); res.status(200).json(data) - - // if(stream == 'nothing') { - // res.status(200).json(null); - // } else { - // res.status(200).json( - // { - // title: "Stream: stream1", - // description: "This is the description for stream: stream1", - // feedUrl: "http://localhost:3000/api/stream1/feed", - // siteUrl: "http://localhost:3000/stream1/podcasts", - // imageUrl: "https://placehold.co/400", - // author: "John Doe", - // managingEditor: "Jane Doe", - // webMaster: "John Smith", - // language: "en", - // categories: ["Technology", "Education", "Entertainment"], - // pubDate: "2023-10-01", - // ttl: 60, - // } - // ); - // } } \ No newline at end of file diff --git a/src/pages/api/[stream]/podcasts.ts b/src/pages/api/[stream]/podcasts.ts index 3cd3199..d88b996 100644 --- a/src/pages/api/[stream]/podcasts.ts +++ b/src/pages/api/[stream]/podcasts.ts @@ -74,6 +74,7 @@ const post = async (req: NextApiRequest, res: NextApiResponse) => { await publishPodcast(podcastData); + res.setHeader('Location', `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/${stream}/podcasts/${podcastData.podcastId}`); res.status(201).json({ message: 'Podcast created successfully' }); } catch (error) { console.error('Error handling request:', error);