[UXIT-3464] Add compact Upload component

[barbaraperic]

This commit introduces a new UploadButton component that allows users to upload files with error handling for file size limits. The component utilizes Radix UI for form control and includes a button with a loading state during uploads. It also provides user feedback for file size errors.

CleanShot.2025-11-05.at.11.46.18.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
filecoin-pin-website	Ready	Preview	Comment	Nov 7, 2025 11:11am

[github-actions]

Filecoin Pin Upload

IPFS Artifacts:

• IPFS Root CID: bafybeiecyovp5j6r7efl2vzrux5uobgbye7valjtlh6ntab4vqlhsytk3u
• Centralized IPFS HTTP Gateway Preview: https://dweb.link/ipfs/bafybeiecyovp5j6r7efl2vzrux5uobgbye7valjtlh6ntab4vqlhsytk3u
• In-Browser IPFS HTTP Gateway Preview: https://inbrowser.link/ipfs/bafybeiecyovp5j6r7efl2vzrux5uobgbye7valjtlh6ntab4vqlhsytk3u
• Status: Uploaded
• Generated CAR on GitHub: download link
• CAR file size: 1.5 MB

Onchain verification:

• Network: calibration
• Data Set ID: 54
• Piece CID: bafkzcibezpar6efqocnk25i6wlzmns2tdb2jg743f3jlowjd4nve6hlzc63lif2sau
• Provider: infrafolio-calib (ID 4)
• Piece download direct from provider: https://caliberation-pdp.infrafolio.com/piece/bafkzcibezpar6efqocnk25i6wlzmns2tdb2jg743f3jlowjd4nve6hlzc63lif2sau

Payment:

• Current Filecoin Pay balance: 48.5533 USDFC
• Amount deposited to Filecoin Pay by this workflow: 0.0000 USDFC
• Data Set Storage runway: 2 year(s) 9 month(s) 25 day(s)

More details

[CharlyMartin]

It looks great @barbaraperic 👏

My only comment would be: centralize the logic file state management in a hook, if possible.

Currently, DragNDrop and UploadButton each use their own state and functions to manage files, but the logic is similar.

I would create a useFileState hook (name TBD) to abstract all of it, such as below, and call it in each file picker component.

import { useRef, useState } from 'react'
import { formatFileSize } from '@/utils/format-file-size'

type UseFileStateProps = {
  maxSize: number
  onUpload: (file: File) => void
}

export function useFileState({ maxSize, onUpload }: UseFileStateProps) {
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [error, setError] = useState<string | null>(null)

  function handleButtonClick() {
    fileInputRef.current?.click()
  }

  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]

    if (file) {
      if (file.size > maxSize) {
        setError(`File is too large. Maximum size is ${formatFileSize(maxSize)}.`)
        if (fileInputRef.current) fileInputRef.current.value = ''
        return
      }

      setError(null)
      onUpload(file)
      if (fileInputRef.current) fileInputRef.current.value = ''
    }
  }

  function clearFile() {
    if (fileInputRef.current) fileInputRef.current.value = ''
  }

  return {
    error,
    fileInputRef,
    handleButtonClick,
    handleFileChange,
    clearFile,
  }
}

(I haven't tested this)

[CharlyMartin]

I believe if you pass size here, the user will only be able to pick files with an appropriate size, hence rendering the use setError(File is too large. Maximum size is ${formatFileSize(maxSize)}.) unnecessary.

To be tested, maybe both are needed!

Suggested change

	<input
	accept={accept.join(',')}
	className="hidden"
	multiple={false}
	onChange={handleFileChange}
	ref={fileInputRef}
	type="file"
	<input
	accept={accept.join(',')}
	className="hidden"
	multiple={false}
	onChange={handleFileChange}
	ref={fileInputRef}
	type="file"
	size={maxSize}

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#size

[barbaraperic]

Seems like that section is under “Getting information on selected files,” which is all about the File API, not HTML attribute? 👀

[SgtPooki]

I am not up to date on the mocks. are we supposed to remove the drag-n-drop functionality?

[barbaraperic]

It looks great @barbaraperic 👏

My only comment would be: centralize the logic file state management in a hook, if possible.

Currently, DragNDrop and UploadButton each use their own state and functions to manage files, but the logic is similar.

I would create a useFileState hook (name TBD) to abstract all of it, such as below, and call it in each file picker component.

import { useRef, useState } from 'react'
import { formatFileSize } from '@/utils/format-file-size'

type UseFileStateProps = {
  maxSize: number
  onUpload: (file: File) => void
}

export function useFileState({ maxSize, onUpload }: UseFileStateProps) {
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [error, setError] = useState<string | null>(null)

  function handleButtonClick() {
    fileInputRef.current?.click()
  }

  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]

    if (file) {
      if (file.size > maxSize) {
        setError(`File is too large. Maximum size is ${formatFileSize(maxSize)}.`)
        if (fileInputRef.current) fileInputRef.current.value = ''
        return
      }

      setError(null)
      onUpload(file)
      if (fileInputRef.current) fileInputRef.current.value = ''
    }
  }

  function clearFile() {
    if (fileInputRef.current) fileInputRef.current.value = ''
  }

  return {
    error,
    fileInputRef,
    handleButtonClick,
    handleFileChange,
    clearFile,
  }
}

(I haven't tested this)

Hm I honestly feel like they are too different for a shared hook...

State Management

• DragNDrop: Manages file state internally, has a two-step flow (select and upload)
• UploadButton: No file state, immediate upload on selection

User Flow

• DragNDrop: Select file - Review - Click upload button
• UploadButton: Click button - Select file - Immediate upload

Validation

• DragNDrop: Validation happens in FilePicker component
• UploadButton: Validation happens inline in handleFileChange

UI

• DragNDrop: Shows selected file, has cancel/upload buttons
• UploadButton: Only shows error state