@@ -14,21 +14,6 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
1414 const accept = fileField ?. accept ? fileField . accept . join ( ',' ) : undefined ;
1515 const [ isDragOver , setIsDragOver ] = useState ( false ) ;
1616
17- if ( readonly ) {
18- if ( ! value ) return < span className = "text-sm" > -</ span > ;
19-
20- const files = Array . isArray ( value ) ? value : [ value ] ;
21- return (
22- < div className = "flex flex-wrap gap-2" >
23- { files . map ( ( file : any , idx : number ) => (
24- < span key = { idx } className = "text-sm truncate max-w-xs" >
25- { file . name || file . original_name || 'File' }
26- </ span >
27- ) ) }
28- </ div >
29- ) ;
30- }
31-
3217 const files = value ? ( Array . isArray ( value ) ? value : [ value ] ) : [ ] ;
3318
3419 const processFiles = useCallback ( ( selectedFiles : File [ ] ) => {
@@ -50,10 +35,6 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
5035 }
5136 } , [ files , multiple , onChange ] ) ;
5237
53- const handleFileChange = ( e : React . ChangeEvent < HTMLInputElement > ) => {
54- processFiles ( Array . from ( e . target . files || [ ] ) ) ;
55- } ;
56-
5738 const handleDragOver = useCallback ( ( e : React . DragEvent ) => {
5839 e . preventDefault ( ) ;
5940 e . stopPropagation ( ) ;
@@ -73,11 +54,11 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
7354
7455 const droppedFiles = Array . from ( e . dataTransfer . files ) ;
7556 if ( accept ) {
76- const acceptedTypes = accept . split ( ',' ) . map ( t => t . trim ( ) . toLowerCase ( ) ) ;
57+ const acceptedTypes = accept . split ( ',' ) . map ( ( t : string ) => t . trim ( ) . toLowerCase ( ) ) ;
7758 const filtered = droppedFiles . filter ( file => {
7859 const parts = file . name . split ( '.' ) ;
7960 const ext = parts . length > 1 ? '.' + parts . pop ( ) ?. toLowerCase ( ) : '' ;
80- return acceptedTypes . some ( t =>
61+ return acceptedTypes . some ( ( t : string ) =>
8162 t === file . type || ( ext && t === ext ) || ( t . endsWith ( '/*' ) && file . type . startsWith ( t . replace ( '/*' , '/' ) ) )
8263 ) ;
8364 } ) ;
@@ -87,6 +68,25 @@ export function FileField({ value, onChange, field, readonly, ...props }: FieldW
8768 }
8869 } , [ accept , processFiles ] ) ;
8970
71+ if ( readonly ) {
72+ if ( ! value ) return < span className = "text-sm" > -</ span > ;
73+
74+ const readonlyFiles = Array . isArray ( value ) ? value : [ value ] ;
75+ return (
76+ < div className = "flex flex-wrap gap-2" >
77+ { readonlyFiles . map ( ( file : any , idx : number ) => (
78+ < span key = { idx } className = "text-sm truncate max-w-xs" >
79+ { file . name || file . original_name || 'File' }
80+ </ span >
81+ ) ) }
82+ </ div >
83+ ) ;
84+ }
85+
86+ const handleFileChange = ( e : React . ChangeEvent < HTMLInputElement > ) => {
87+ processFiles ( Array . from ( e . target . files || [ ] ) ) ;
88+ } ;
89+
9090 const handleRemove = ( index : number ) => {
9191 if ( multiple ) {
9292 const newFiles = files . filter ( ( _ : any , i : number ) => i !== index ) ;
0 commit comments