In this article, we will review the UploadingState component in FilePizza codebase.
UploadingState component is returned in app/page.tsx and this is the component you would see when you have already uploaded a file.
UploadingState
function UploadingState({
uploadedFiles,
password,
onStop,
}: {
uploadedFiles: UploadedFile[]
password: string
onStop: () => void
}): JSX.Element {
const fileListData = useUploaderFileListData(uploadedFiles)
return (
You are uploading {pluralize(uploadedFiles.length, 'file', 'files')}.
)
}This above code can be found at line 87 in app/page.tsx.
PageWrapper and the TitleText components are straightforward. I am curious about the UploadFileList component. Let’s find out what this is.
UploadFileList
import React, { JSX } from 'react'
import TypeBadge from './TypeBadge'
type UploadedFileLike = {
fileName?: string
type: string
}
export default function UploadFileList({
files,
onRemove,
}: {
files: UploadedFileLike[]
onRemove?: (index: number) => void
}): JSX.Element {
const items = files.map((f: UploadedFileLike, i: number) => (
{f.fileName}
{onRemove && (
onRemove?.(i)}
className="text-stone-500 hover:text-stone-700 dark:text-stone-400 dark:hover:text-stone-200 focus:outline-none pl-3 pr-1"
>
✕
)}
))
return (
{items}
)
}UploadFileList can be in components/UploadFileList.tsx. This component accepts files and onRemove as its props.
WebRTCProvider
I have already talked about what WebRTCProvider is in one of my previous articles. Check it out.
Uploader
'use client'
import React, { JSX, useCallback, useEffect } from 'react'
import { UploadedFile, UploaderConnectionStatus } from '../types'
import { useWebRTCPeer } from './WebRTCProvider'
import QRCode from 'react-qr-code'
import Loading from './Loading'
import StopButton from './StopButton'
import { useUploaderChannel } from '../hooks/useUploaderChannel'
import { useUploaderConnections } from '../hooks/useUploaderConnections'
import { CopyableInput } from './CopyableInput'
import { ConnectionListItem } from './ConnectionListItem'
import { ErrorMessage } from './ErrorMessage'
import { setRotating } from '../hooks/useRotatingSpinner'
const QR_CODE_SIZE = 128
export default function Uploader({
files,
password,
onStop,
}: {
files: UploadedFile[]
password: string
onStop: () => void
}): JSX.Element {
const { peer, stop } = useWebRTCPeer()
const { isLoading, error, longSlug, shortSlug, longURL, shortURL } =
useUploaderChannel(peer.id)
const connections = useUploaderConnections(peer, files, password)
const handleStop = useCallback(() => {
stop()
onStop()
}, [stop, onStop])
const activeDownloaders = connections.filter(
(conn) => conn.status === UploaderConnectionStatus.Uploading,
).length
useEffect(() => {
setRotating(activeDownloaders > 0)
}, [activeDownloaders])
if (isLoading || !longSlug || !shortSlug) {
return
}
if (error) {
return
}
return (
<>
{activeDownloaders} Downloading, {connections.length} Total
{connections.map((conn, i) => (
))}
>
)
}Uploader component is responsible for showing QR code and the long/short URLs.
About me:
Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com
My Github — https://github.com/ramu-narasinga
My website — https://ramunarasinga.com
My Youtube channel — https://www.youtube.com/@ramu-narasinga
Learning platform — https://thinkthroo.com
Codebase Architecture — https://app.thinkthroo.com/architecture
Best practices — https://app.thinkthroo.com/best-practices
Production-grade projects — https://app.thinkthroo.com/production-grade-projects