Add progress indicator for file uploads

newwingbird · Jul 3, 2024 · aa7390d · aa7390d
1 parent 3d505d8
commit aa7390d
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/src/components/ImageInput.tsx b/src/components/ImageInput.tsx
@@ -8,7 8,7 @@ import { clsx } from 'clsx/lite';
 import { ACCEPTED_PHOTO_FILE_TYPES } from '@/photo';
 import { FiUploadCloud } from 'react-icons/fi';
 import { MAX_IMAGE_SIZE } from '@/services/next-image';
-import LoaderButton from './primitives/LoaderButton';
 import ProgressButton from './primitives/ProgressButton';
 
 const INPUT_ID = 'file';
 
@@ -58,9 58,12 @@ export default function ImageInput({
  loading && 'pointer-events-none cursor-not-allowed',
  )}
  >
- <LoaderButton
  <ProgressButton
  type="button"
  isLoading={loading}
  progress={filesLength > 1
  ? (fileUploadIndex   1) / filesLength * 0.95
  : undefined}
  icon={<FiUploadCloud
  size={18}
  className="translate-x-[-0.5px] translate-y-[0.5px]"
@@ -73,7 76,7 @@ export default function ImageInput({
  {loading
  ? 'Uploading'
  : 'Upload Photos'}
- </LoaderButton>
  </ProgressButton>
  <input
  ref={inputRef}
  id={INPUT_ID}