strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add basic headless upload functionality

Browse Source
This commit is contained in:
Sam Becker 2025-02-27 18:00:43 -06:00
parent 5c2954dc00
commit 83188b7190
9 changed files with 196 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/admin/AdminAppMenu.tsx
View File

@ -34,6 +34,7 @@ export default function AdminAppMenu({
uploadsCount,
tagsCount,
selectedPhotoIds,
startUpload,
setSelectedPhotoIds,
refreshAdminData,
clearAuthStateAndRedirect,
@ -47,6 +48,7 @@ export default function AdminAppMenu({
size={15}
className="translate-x-[0.5px] translate-y-[0.5px]"
/>,
action: startUpload,
}, {
label: 'Manage Photos',
...photosCount !== undefined && {

2
src/admin/AdminPhotosClient.tsx
View File

@ -43,7 +43,7 @@ export default function AdminPhotosClient({
<SiteGrid
contentMain={
<div>
<div className="flex">
<div className="flex space-y-4">
<div className="grow min-w-0">
<PhotoUpload
shouldResize={!PRESERVE_ORIGINAL_UPLOADS}

176
src/admin/upload/AdminUploadPanel.tsx
View File

@ -1,52 +1,156 @@
'use client';
import { pathForAdminUploadUrl } from '@/app/paths';
import { PATH_ADMIN_UPLOADS } from '@/app/paths';
import Container from '@/components/Container';
import ImageInput from '@/components/ImageInput';
import LoaderButton from '@/components/primitives/LoaderButton';
import SiteGrid from '@/components/SiteGrid';
import Spinner from '@/components/Spinner';
import { uploadPhotoFromClient } from '@/platforms/storage';
import { useAppState } from '@/state/AppState';
import clsx from 'clsx';
import { useRouter } from 'next/navigation';
import { useEffect, useRef, useTransition } from 'react';
import { IoCloseSharp } from 'react-icons/io5';
export default function AdminUploadPanel() {
const { uploadState: {
isUploading,
filesLength,
fileUploadIndex,
fileUploadName,
} } = useAppState();
export default function AdminUploadPanel({
shouldResize,
onLastUpload,
debug,
}: {
shouldResize: boolean
onLastUpload?: () => Promise<void>
debug?: boolean
}) {
const {
uploadInputRef,
uploadState: {
isUploading,
filesLength,
fileUploadIndex,
fileUploadName,
uploadError,
debugDownload,
hideUploadPanel,
},
setUploadState,
resetUploadState,
} = useAppState();
const router = useRouter();
const shouldResetUploadStateAfterPending = useRef(false);
const [isPending, startTransition] = useTransition();
useEffect(() => {
if (!isPending) {
if (shouldResetUploadStateAfterPending.current) {
resetUploadState?.();
shouldResetUploadStateAfterPending.current = false;
}
}
}, [isPending, resetUploadState]);
const isFinalizing = isPending &&
shouldResetUploadStateAfterPending.current;
return (
<SiteGrid contentMain={
<Container
color="gray"
padding="tight"
className="p-2! pl-4! text-main!"
>
<div className="flex w-full items-center gap-2">
<div className="grow">
{isUploading
? <div className={clsx('flex items-center gap-4')}>
<span className="inline-block truncate">
{/* eslint-disable-next-line max-len */}
Uploading {fileUploadIndex + 1} of {filesLength}: {fileUploadName}
</span>
<Spinner
className="text-dim translate-y-[1px]"
color="text"
size={14}
/>
</div>
: 'Upload Photos'}
<SiteGrid
className={clsx((!isUploading || hideUploadPanel) && 'hidden')}
contentMain={
<Container
color="gray"
padding="tight"
className="p-2! pl-4! text-main!"
>
<div className="flex w-full items-center gap-2">
<div className="grow">
<ImageInput
ref={uploadInputRef}
shouldResize={shouldResize}
onStart={() => {
setUploadState?.({
isUploading: true,
uploadError: '',
});
}}
onBlobReady={async ({
blob,
extension,
hasMultipleUploads,
isLastBlob,
}) => {
if (debug) {
setUploadState?.({
isUploading: false,
uploadError: '',
debugDownload: {
href: URL.createObjectURL(blob),
fileName: `debug.${extension}`,
},
});
} else {
return uploadPhotoFromClient(
blob,
extension,
)
.then(async url => {
if (isLastBlob) {
await onLastUpload?.();
shouldResetUploadStateAfterPending.current = true;
startTransition(() => hasMultipleUploads
? router.push(PATH_ADMIN_UPLOADS)
: router.push(pathForAdminUploadUrl(url)));
}
})
.catch(error => {
setUploadState?.({
isUploading: false,
uploadError: `Upload Error: ${error.message}`,
});
});
}
}}
showUploadStatus={false}
showUploadButton={false}
/>
{isUploading
? <div className={clsx('flex items-center gap-4')}>
{isFinalizing
? <span>
Finishing
</span>
: <span className="inline-block truncate">
{/* eslint-disable-next-line max-len */}
Uploading {fileUploadIndex + 1} of {filesLength}: {fileUploadName}
</span>}
<Spinner
className="text-dim translate-y-[1px]"
color="text"
size={14}
/>
</div>
: 'Initializing...'}
</div>
<LoaderButton
icon={<IoCloseSharp
size={18}
className="translate-y-[0.5px]"
/>}
/>
</div>
<LoaderButton
icon={<IoCloseSharp
size={18}
className="translate-y-[0.5px]"
/>}
/>
</div>
</Container>}
{debug && debugDownload &&
<a
className="block"
href={debugDownload.href}
download={debugDownload.fileName}
>
Download
</a>}
{uploadError &&
<div className="text-error">
{uploadError}
</div>}
</Container>}
/>
);
}

2
src/admin/upload/index.ts
View File

@ -6,6 +6,7 @@ export interface UploadState {
filesLength: number
fileUploadIndex: number
fileUploadName: string
hideUploadPanel: boolean
}
export const INITIAL_UPLOAD_STATE: UploadState = {
@ -14,4 +15,5 @@ export const INITIAL_UPLOAD_STATE: UploadState = {
fileUploadName: '',
filesLength: 0,
fileUploadIndex: 0,
hideUploadPanel: false,
};

53
src/components/ImageInput.tsx
View File

@ -1,7 +1,7 @@
'use client';
import { blobToImage } from '@/utility/blob';
import { useRef } from 'react';
import { useRef, RefObject } from 'react';
import { CopyExif } from '@/lib/CopyExif';
import exifr from 'exifr';
import { clsx } from 'clsx/lite';
@ -14,14 +14,17 @@ import { useAppState } from '@/state/AppState';
const INPUT_ID = 'file';
export default function ImageInput({
ref,
onStart,
onBlobReady,
shouldResize,
maxSize = MAX_IMAGE_SIZE,
quality = 0.8,
showUploadButton = true,
showUploadStatus = true,
debug,
}: {
ref?: RefObject<HTMLInputElement | null>
onStart?: () => void
onBlobReady?: (args: {
blob: Blob,
@ -32,6 +35,7 @@ export default function ImageInput({
shouldResize?: boolean
maxSize?: number
quality?: number
showUploadButton?: boolean
showUploadStatus?: boolean
debug?: boolean
}) {
@ -50,7 +54,7 @@ export default function ImageInput({
} = useAppState();
return (
<div className="space-y-4 min-w-0">
<div className="flex flex-col gap-4 min-w-0">
<div className="flex items-center gap-2 sm:gap-4">
<label
htmlFor={INPUT_ID}
@ -59,29 +63,30 @@ export default function ImageInput({
isUploading && 'pointer-events-none cursor-not-allowed',
)}
>
<ProgressButton
type="button"
isLoading={isUploading}
progress={filesLength > 1
? (fileUploadIndex + 1) / filesLength * 0.95
: undefined}
icon={<FiUploadCloud
size={18}
className="translate-x-[-0.5px] translate-y-[0.5px]"
/>}
aria-disabled={isUploading}
onClick={() => inputRef.current?.click()}
hideTextOnMobile={false}
primary
>
{isUploading
? filesLength > 1
? `Uploading ${fileUploadIndex + 1} of ${filesLength}`
: 'Uploading'
: 'Upload Photos'}
</ProgressButton>
{showUploadButton &&
<ProgressButton
type="button"
isLoading={isUploading}
progress={filesLength > 1
? (fileUploadIndex + 1) / filesLength * 0.95
: undefined}
icon={<FiUploadCloud
size={18}
className="translate-x-[-0.5px] translate-y-[0.5px]"
/>}
aria-disabled={isUploading}
onClick={() => inputRef.current?.click()}
hideTextOnMobile={false}
primary
>
{isUploading
? filesLength > 1
? `Uploading ${fileUploadIndex + 1} of ${filesLength}`
: 'Uploading'
: 'Upload Photos'}
</ProgressButton>}
<input
ref={inputRef}
ref={ref ?? inputRef}
id={INPUT_ID}
type="file"
className="hidden!"

2
src/components/more/MoreMenuItem.tsx
View File

@ -72,6 +72,8 @@ export default function MoreMenuItem({
setIsLoading(false);
dismissMenu?.();
});
} else {
dismissMenu?.();
}
}
if (href) {

1
src/photo/PhotoUpload.tsx
View File

@ -43,6 +43,7 @@ export default function PhotoUpload({
setUploadState?.({
isUploading: true,
uploadError: '',
hideUploadPanel: true,
});
}}
onBlobReady={async ({

12
src/state/AppState.ts
View File

@ -1,4 +1,10 @@
import { Dispatch, SetStateAction, createContext, useContext } from 'react';
import {
Dispatch,
SetStateAction,
createContext,
useContext,
RefObject,
} from 'react';
import { AnimationConfig } from '@/components/AnimateItems';
import { ShareModalProps } from '@/share';
import { InsightIndicatorStatus } from '@/admin/insights';
@ -16,7 +22,9 @@ export interface AppStateContext {
clearNextPhotoAnimation?: () => void
shouldRespondToKeyboardCommands?: boolean
setShouldRespondToKeyboardCommands?: Dispatch<SetStateAction<boolean>>
// UPLOADS
// UPLOAD
startUpload?: () => void
uploadInputRef?: RefObject<HTMLInputElement | null>
uploadState: UploadState
setUploadState?: (uploadState: Partial<UploadState>) => void
resetUploadState?: () => void

11
src/state/AppStateProvider.tsx
View File

@ -1,6 +1,6 @@
'use client';
import { useState, useEffect, ReactNode, useCallback } from 'react';
import { useState, useEffect, ReactNode, useCallback, useRef } from 'react';
import { AppStateContext } from './AppState';
import { AnimationConfig } from '@/components/AnimateItems';
import usePathnames from '@/utility/usePathnames';
@ -43,6 +43,8 @@ export default function AppStateProvider({
useState<AnimationConfig>();
const [shouldRespondToKeyboardCommands, setShouldRespondToKeyboardCommands] =
useState(true);
// UPLOAD
const uploadInputRef = useRef<HTMLInputElement>(null);
const [uploadState, _setUploadState] =
useState(INITIAL_UPLOAD_STATE);
// MODAL
@ -88,6 +90,9 @@ export default function AppStateProvider({
const [shouldDebugRecipeOverlays, setShouldDebugRecipeOverlays] =
useState(false);
const startUpload = useCallback(() => {
uploadInputRef.current?.click();
}, []);
const setUploadState = useCallback((uploadState: Partial<UploadState>) => {
_setUploadState(prev => ({ ...prev, ...uploadState }));
}, []);
@ -165,7 +170,9 @@ export default function AppStateProvider({
clearNextPhotoAnimation: () => setNextPhotoAnimation?.(undefined),
shouldRespondToKeyboardCommands,
setShouldRespondToKeyboardCommands,
// UPLOADS
// UPLOAD
uploadInputRef,
startUpload,
uploadState,
setUploadState,
resetUploadState,