diff --git a/src/photo/actions.ts b/src/photo/actions.ts index 37df3350..e5e22502 100644 --- a/src/photo/actions.ts +++ b/src/photo/actions.ts @@ -50,14 +50,13 @@ export const createPhotoAction = async (formData: FormData) => const photo = convertFormDataToPhotoDbInsert(formData, true); const updatedUrl = await convertUploadToPhoto(photo.url); - - if (updatedUrl) { photo.url = updatedUrl; } - - await sqlInsertPhoto(photo); - - revalidateAllKeysAndPaths(); - - redirect(PATH_ADMIN_PHOTOS); + + if (updatedUrl) { + photo.url = updatedUrl; + await sqlInsertPhoto(photo); + revalidateAllKeysAndPaths(); + redirect(PATH_ADMIN_PHOTOS); + } }); export const updatePhotoAction = async (formData: FormData) => diff --git a/src/photo/form/PhotoForm.tsx b/src/photo/form/PhotoForm.tsx index af82e858..aa938bcf 100644 --- a/src/photo/form/PhotoForm.tsx +++ b/src/photo/form/PhotoForm.tsx @@ -30,6 +30,7 @@ import UpdateBlurDataButton from '../UpdateBlurDataButton'; import { getNextImageUrlForManipulation } from '@/services/next-image'; import { BLUR_ENABLED } from '@/site/config'; import { PhotoDbInsert } from '..'; +import ErrorNote from '@/components/ErrorNote'; const THUMBNAIL_SIZE = 300; @@ -58,6 +59,7 @@ export default function PhotoForm({ useState>(initialPhotoForm); const [formErrors, setFormErrors] = useState(getFormErrors(initialPhotoForm)); + const [formActionErrorMessage, setFormActionErrorMessage] = useState(''); const { invalidateSwr, shouldDebugImageFallbacks } = useAppState(); @@ -272,9 +274,18 @@ export default function PhotoForm({ + {formActionErrorMessage && + {formActionErrorMessage}}
blur()} + action={data => (type === 'create' + ? createPhotoAction + : updatePhotoAction + )(data) + .catch(e => setFormActionErrorMessage(e.message))} + onSubmit={() => { + setFormActionErrorMessage(''); + (document.activeElement as HTMLElement)?.blur?.(); + }} > {/* Fields */}
diff --git a/src/services/storage/index.ts b/src/services/storage/index.ts index 481cff36..5e575ed9 100644 --- a/src/services/storage/index.ts +++ b/src/services/storage/index.ts @@ -182,7 +182,7 @@ const moveFile = async ( export const convertUploadToPhoto = async ( urlOrigin: string, -): Promise => { +) => { const fileName = `${PREFIX_PHOTO}-${generateStorageId()}`; const fileExtension = getExtensionFromStorageUrl(urlOrigin); const photoPath = `${fileName}.${fileExtension || 'jpg'}`;