fix: ui crashes editing doc with deleted upload (#8526)

fix #8133

UI of a deleted item (will need another iteration).

![clear-upload-state](https://github.com/user-attachments/assets/2d9baebe-9a12-4905-9449-457972f4505b)

packages/ui/src/fields/Upload/HasOne/index.tsx

@@ -24,7 +24,7 @@ type Props = {
 export function UploadComponentHasOne(props: Props) {
   const { className, fileDoc, onRemove, readonly, serverURL } = props
   const { relationTo, value } = fileDoc
-  const id = String(value.id)
+  const id = String(value?.id)
 
   const url: string = value.thumbnailURL || value.url
   let src: string

packages/ui/src/fields/Upload/Input.tsx

@@ -411,7 +411,10 @@ export function UploadInput(props: UploadInputProps) {
   const showDropzone =
     !readOnly &&
     (!value ||
-      (hasMany && Array.isArray(value) && (typeof maxRows !== 'number' || value.length < maxRows)))
+      (hasMany &&
+        Array.isArray(value) &&
+        (typeof maxRows !== 'number' || value.length < maxRows)) ||
+      (!hasMany && populatedDocs?.[0] && typeof populatedDocs[0].value === 'undefined'))
 
   return (
     <div
@@ -470,13 +473,17 @@ export function UploadInput(props: UploadInputProps) {
 
         {!hasMany && value ? (
           <>
-            {populatedDocs && populatedDocs?.length > 0 ? (
+            {populatedDocs && populatedDocs?.length > 0 && populatedDocs[0].value ? (
               <UploadComponentHasOne
                 fileDoc={populatedDocs[0]}
                 onRemove={onRemove}
                 readonly={readOnly}
                 serverURL={serverURL}
               />
+            ) : populatedDocs && value && !populatedDocs?.[0]?.value ? (
+              <>
+                {t('general:untitled')} - ID: {value}
+              </>
             ) : (
               <ShimmerEffect height="62px" />
             )}