From 86c894f2189c8a57e4455c3557e258d7a08bfd3f Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Mon, 13 Oct 2025 23:05:46 +1100
Subject: [PATCH] [UI] Enhance file-upload field (#10576)

- Add icon
- Add ability to clear input
- Add default placeholder
- Ref: https://github.com/inventree/inventree/issues/10548
---
 src/frontend/src/components/forms/fields/ApiFormField.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/frontend/src/components/forms/fields/ApiFormField.tsx b/src/frontend/src/components/forms/fields/ApiFormField.tsx
index 2034cff465..a1de487236 100644
--- a/src/frontend/src/components/forms/fields/ApiFormField.tsx
+++ b/src/frontend/src/components/forms/fields/ApiFormField.tsx
@@ -5,6 +5,7 @@ import { useCallback, useEffect, useMemo } from 'react';
 import { type Control, type FieldValues, useController } from 'react-hook-form';
 
 import type { ApiFormFieldSet, ApiFormFieldType } from '@lib/types/Forms';
+import { IconFileUpload } from '@tabler/icons-react';
 import { BooleanField } from './BooleanField';
 import { ChoiceField } from './ChoiceField';
 import DateField from './DateField';
@@ -221,7 +222,10 @@ export function ApiFormField({
         return (
           <FileInput
             {...reducedDefinition}
+            clearable={!definition.required}
             aria-label={`file-field-${fieldName}`}
+            placeholder={definition.placeholder ?? t`Select file to upload`}
+            leftSection={<IconFileUpload />}
             id={fieldId}
             ref={field.ref}
             radius='sm'