generator-pninja 2.0.0 → 2.0.2

package/generators/client/templates/react/src/components/BlobViewer.tsx.ejs

@@ -26,35 +26,40 @@ function base64ToUint8Array(base64: string): Uint8Array {
   return bytes;
 }
 
+const linkClass =
+  'inline-block rounded-sm  hover:outline-2 hover:outline-offset-2 hover:outline-blue-600 hover:dark:outline-sky-300 focus:outline-2 focus:outline-offset-2 focus:outline-blue-600 focus:dark:outline-sky-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 focus-visible:dark:outline-sky-300';
+
 // ─── Image viewer ────────────────────────────────────────────────────────────
 
 const ImageViewer: React.FC<{ objectUrl: string; name: string }> = ({ objectUrl, name }) => (
-  <div className="space-y-2">
-    <a href={objectUrl} target="_blank" rel="noopener noreferrer">
-      <img
-        src={objectUrl}
-        alt={name}
-        className="max-w-xs max-h-80 rounded border border-gray-200 dark:border-gray-700"
-      />
-    </a>
-  </div>
+  <a href={objectUrl} target="_blank" rel="noopener noreferrer" className={linkClass}>
+    <img
+      src={objectUrl}
+      alt={name}
+      className="max-w-xs max-h-80 rounded-sm border border-gray-200 dark:border-gray-700"
+    />
+  </a>
 );
 
 // ─── Video viewer ────────────────────────────────────────────────────────────
 
 const VideoViewer: React.FC<{ objectUrl: string; name: string }> = ({ objectUrl, name }) => (
-  <div className="space-y-2">
-    <a href={objectUrl} target="_blank" rel="noopener noreferrer" className="inline-block relative">
-      <video
-        src={objectUrl}
-        preload="metadata"
-        className="max-w-xs max-h-80 rounded border border-gray-200 dark:border-gray-700"
-      />
-      <div className="absolute inset-0 flex items-center justify-center bg-black/30">
-        <Icon icon="play_circle" size={12} className="text-white drop-shadow" />
-      </div>
-    </a>
-  </div>
+  <a
+    href={objectUrl}
+    target="_blank"
+    rel="noopener noreferrer"
+    // className="h-full inline-block relative"
+    className={`relative ${linkClass}`}
+  >
+    <video
+      src={objectUrl}
+      preload="metadata"
+      className="max-w-xs max-h-80 rounded-sm border border-gray-200 dark:border-gray-700"
+    />
+    <div className="absolute inset-0 flex items-center justify-center bg-black/30">
+      <Icon icon="play_circle" size={12} className="text-white drop-shadow" />
+    </div>
+  </a>
 );
 
 // ─── PDF viewer ──────────────────────────────────────────────────────────────
@@ -120,20 +125,20 @@ const PdfViewer: React.FC<{ blob: BlobValue; objectUrl: string }> = ({ blob, obj
   }, [blob.data]);
 
   return (
-    <div className="space-y-2">
+    <>
       {thumbnailUrl && !pdfError && (
-        <a href={objectUrl} target="_blank" rel="noopener noreferrer" className="block">
+        <a href={objectUrl} target="_blank" rel="noopener noreferrer" className={linkClass}>
           <img
             src={thumbnailUrl}
             alt={blob.name}
-            className="max-w-xs rounded border border-gray-200 dark:border-gray-700"
+            className="max-w-xs rounded-sm border border-gray-200 dark:border-gray-700"
           />
         </a>
       )}
       {(pdfError || !thumbnailUrl) && (
         <Icon icon="picture_as_pdf" size={10} className="text-red-500" />
       )}
-    </div>
+    </>
   );
 };
 
@@ -174,9 +179,11 @@ const AudioViewer: React.FC<{ objectUrl: string; name: string }> = ({ objectUrl,
 interface BlobViewerProps {
   blob: BlobValue | null | undefined;
   className?: string;
+  /** When true, suppresses the filename/size/link bar below the preview */
+  compact?: boolean;
 }
 
-const BlobViewer: React.FC<BlobViewerProps> = ({ blob, className }) => {
+const BlobViewer: React.FC<BlobViewerProps> = ({ blob, className, compact = false }) => {
   const { t } = useTranslation();
   const [objectUrl, setObjectUrl] = useState<string | null>(null);
 
@@ -196,15 +203,38 @@ const BlobViewer: React.FC<BlobViewerProps> = ({ blob, className }) => {
   const isAudio = blob.type.startsWith('audio/');
   const isPdf = blob.type === 'application/pdf';
 
-  return (
-    <div className={className}>
-      {objectUrl && isInlineImage && <ImageViewer objectUrl={objectUrl} name={blob.name} />}
-      {objectUrl && isVideo && <VideoViewer objectUrl={objectUrl} name={blob.name} />}
-      {objectUrl && isPdf && <PdfViewer blob={blob} objectUrl={objectUrl} />}
-      {objectUrl && isAudio && <AudioViewer objectUrl={objectUrl} name={blob.name} />}
-      {objectUrl && !isInlineImage && !isVideo && !isPdf && !isAudio && (
+  const preview = objectUrl && (
+    <>
+      {isInlineImage && <ImageViewer objectUrl={objectUrl} name={blob.name} />}
+      {isVideo && <VideoViewer objectUrl={objectUrl} name={blob.name} />}
+      {isPdf && <PdfViewer blob={blob} objectUrl={objectUrl} />}
+      {isAudio && <AudioViewer objectUrl={objectUrl} name={blob.name} />}
+      {!isInlineImage && !isVideo && !isPdf && !isAudio && (
         <GenericViewer objectUrl={objectUrl} name={blob.name} />
       )}
+    </>
+  );
+
+  if (compact && !isInlineImage && !isVideo && !isPdf) return null;
+
+  if (compact) {
+    return (
+      <div
+        className={[
+          'w-20 h-20 p-1 outline-2 -outline-offset-2 focus-within:outline-0 hover:outline-0 flex-shrink-0 rounded-md overflow-hidden bg-slate-200 dark:bg-slate-600 flex items-center justify-center [&_img]:w-full [&_img]:h-full [&_img]:object-cover [&_video]:w-full [&_video]:h-full [&_video]:object-cover [&_a]:w-full [&_a]:h-full',
+          className,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        {preview}
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      {preview}
       {objectUrl && (
         <div className="flex items-center gap-3 mt-1">
           <span className="text-xs text-gray-500 truncate max-w-xs">{blob.name}</span>

package/generators/client/templates/react/src/components/entities/EntityForm.tsx.ejs

@@ -207,6 +207,7 @@ export function <%= entity.name %>Form({ <%= to.camel(entity.name)%>, onSubmit,
       await onSubmit(data);
     } catch (error) {
       console.error('Form submission error:', error);
+    } finally {
       setDataSaving(false);
     }
   };

package/generators/client/templates/react/src/components/formElements/FileField.tsx.ejs

@@ -1,10 +1,12 @@
 import { useTranslation } from 'react-i18next';
 import prettyBytes from 'pretty-bytes';
 import { Icon } from '../Icon';
-import { useState, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useFormContext, useController, FieldError } from 'react-hook-form';
 import { FormLabel, FormFieldInfo } from './index';
 import { useId } from 'react-aria';
+import { DropZone as AriaDropZone, FileTrigger, Button } from 'react-aria-components';
+import { BlobViewer } from '../BlobViewer';
 
 type BlobValue = {
   data: string;
@@ -45,22 +47,170 @@ function fileToBase64(file: File): Promise<string> {
   });
 }
 
+const INLINE_IMAGE_TYPES = [
+  'image/jpeg',
+  'image/png',
+  'image/gif',
+  'image/webp',
+  'image/svg+xml',
+  'image/avif',
+  'image/apng',
+];
+
 const getFileIcon = (mimeType: string | undefined): JSX.Element => {
-  if (!mimeType) {
-    return <Icon icon="draft" size={6} fill />;
-  }
-  if (mimeType.startsWith('image/')) {
-    return <Icon icon="imagesmode" size={6} fill />;
-  }
-  if (mimeType.startsWith('video/')) {
-    return <Icon icon="video_file" size={6} fill />;
-  }
-  if (mimeType.startsWith('audio/')) {
-    return <Icon icon="audio_file" size={6} fill />;
-  }
+  if (!mimeType) return <Icon icon="draft" size={6} fill />;
+  if (mimeType.startsWith('image/')) return <Icon icon="imagesmode" size={6} fill />;
+  if (mimeType.startsWith('video/')) return <Icon icon="video_file" size={6} fill />;
+  if (mimeType.startsWith('audio/')) return <Icon icon="audio_file" size={6} fill />;
+  if (mimeType === 'application/pdf') return <Icon icon="picture_as_pdf" size={6} fill />;
   return <Icon icon="draft" size={6} fill />;
 };
 
+// ─── FilePreview ──────────────────────────────────────────────────────────────
+
+const FilePreview: React.FC<{
+  file: File;
+  onRemove: () => void;
+}> = ({ file, onRemove }) => {
+  const { t } = useTranslation();
+  const [blobValue, setBlobValue] = useState<{ data: string; type: string; name: string; size: number } | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const url = URL.createObjectURL(file);
+    // Convert to base64 for BlobViewer
+    fetch(url)
+      .then((r) => r.arrayBuffer())
+      .then((buf) => {
+        if (cancelled) return;
+        const bytes = new Uint8Array(buf);
+        let binary = '';
+        for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+        setBlobValue({
+          data: btoa(binary),
+          type: file.type,
+          name: file.name,
+          size: file.size,
+        });
+      })
+      .catch(() => { if (!cancelled) setBlobValue(null); });
+    URL.revokeObjectURL(url);
+    return () => { cancelled = true; };
+  }, [file]);
+
+  return (
+    <div className="flex items-center gap-3 p-3 bg-slate-100 dark:bg-slate-700 rounded-md border border-slate-300 dark:border-slate-600">
+      {blobValue ? (
+        <BlobViewer blob={blobValue} compact />
+      ) : (
+        <div className="w-20 h-20 flex-shrink-0 rounded bg-slate-200 dark:bg-slate-600 flex items-center justify-center">
+          {getFileIcon(file.type)}
+        </div>
+      )}
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium truncate">{file.name}</p>
+        <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{prettyBytes(file.size)}</p>
+      </div>
+      <button
+        type="button"
+        onClick={onRemove}
+        className="icon-text-button flex-shrink-0 flex items-center text-sm cursor-pointer font-medium gap-1 text-slate-600 dark:text-slate-300"
+        aria-label={t('actions.crud.file.removeSelection')}
+      >
+        <Icon icon="close" size={5} />
+      </button>
+    </div>
+  );
+};
+
+// ─── DropZone ─────────────────────────────────────────────────────────────────
+
+const DropZone: React.FC<{
+  accept?: string;
+  isDisabled?: boolean;
+  onFileSelected: (file: File) => void;
+  hasError: boolean;
+}> = ({ accept, isDisabled, onFileSelected, hasError }) => {
+  const { t } = useTranslation();
+  const [isFocused, setIsFocused] = useState(false);
+  const dropZoneRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!dropZoneRef.current) return;
+    // RAC renders an internal button with aria-label for screen reader accessibility.
+    // We remove it from the tab order since our FileTrigger Button handles keyboard interaction.
+    // Screen readers can still reach it via arrow key navigation.
+    const internalButton = dropZoneRef.current.querySelector<HTMLElement>(
+      'button[data-react-aria-pressable][aria-label]'
+    );
+    if (internalButton) internalButton.tabIndex = -1;
+  }, []);
+
+  const handleDrop = async (e: import('react-aria-components').DropEvent) => {
+    const droppedItem = e.items.find((item) => item.kind === 'file');
+    if (!droppedItem || droppedItem.kind !== 'file') return;
+    const file = await droppedItem.getFile();
+    onFileSelected(file);
+  };
+
+  return (
+    <AriaDropZone
+      ref={dropZoneRef}
+      onDrop={handleDrop}
+      isDisabled={isDisabled}
+      tabIndex={-1}
+      className={({ isDropTarget }) =>
+        [
+          'rounded-md border-2 border-dashed transition-colors',
+          isDropTarget || isFocused
+            ? hasError
+              ? 'border-red-400 bg-red-50 dark:bg-red-900/20'
+              : 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+            : hasError
+              ? 'border-red-400 bg-red-50/30 dark:bg-red-900/10'
+              : 'border-slate-300 dark:border-slate-600',
+          isDisabled ? 'opacity-50' : '',
+        ].join(' ')
+      }
+    >
+      {({ isDropTarget }) => (
+        <FileTrigger
+          acceptedFileTypes={accept ? [accept] : undefined}
+          isDisabled={isDisabled}
+          onSelect={(files) => {
+            const file = files?.[0];
+            if (file) onFileSelected(file);
+          }}
+        >
+          <Button
+            isDisabled={isDisabled}
+            isInvalid={hasError}
+            className="drop-zone-button flex flex-col items-center justify-center gap-2 p-6"
+            onFocusChange={setIsFocused}
+          >
+            <Icon
+              icon="cloud_upload"
+              size={8}
+              className={isDropTarget || isFocused
+                ? hasError ? 'text-red-400' : 'text-blue-500'
+                : 'text-slate-400'}
+            />
+            <span className={`text-sm text-center ${isDropTarget || isFocused
+              ? hasError ? 'text-red-600 dark:text-red-400' : 'text-blue-600 dark:text-blue-400'
+              : 'text-slate-600 dark:text-slate-400'}`}>
+              {isDropTarget
+                ? t('actions.crud.file.dropHere')
+                : t('actions.crud.file.dragOrClick')}
+            </span>
+          </Button>
+        </FileTrigger>
+      )}
+    </AriaDropZone>
+  );
+};
+
+// ─── FileField ────────────────────────────────────────────────────────────────
+
 const FileField: React.FC<FileFieldProps> = ({
   accept,
   className,
@@ -76,63 +226,48 @@ const FileField: React.FC<FileFieldProps> = ({
   const hasFile = !!existingBlob?.name;
   const [shouldShowInput, setShouldShowInput] = useState(!hasFile);
   const [isMarkedForDeletion, setIsMarkedForDeletion] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const { required, minbytes, maxbytes } = validations || {};
-  const inputRef = useRef<HTMLInputElement>(null);
   const {
     control,
-    register,
     setValue,
     trigger,
-    formState: { errors },
   } = useFormContext();
 
   const {
+    field: { ref: fieldRef },
     fieldState: { error },
   } = useController({
     name: fieldName,
     control,
-    rules: {},
+    rules: {
+      validate: (value: unknown | undefined) => {
+        const fileData = value as BlobValue | null;
+
+        if (fileData?.type && !fileData.type.startsWith(accept?.replace(/\/\*$/, '') ?? '')) {
+          return `errors.validations.file.invalidType:${accept}:${fileData.type}`;
+        }
+        if (typeof fileData?.size === 'number' && minbytes && fileData?.size < minbytes) {
+          return `errors.validations.file.minSize:${prettyBytes(minbytes)}:${prettyBytes(fileData?.size)}`;
+        }
+        if (typeof fileData?.size === 'number' && maxbytes && fileData?.size > maxbytes) {
+          return `errors.validations.file.maxSize:${prettyBytes(maxbytes)}:${prettyBytes(fileData?.size)}`;
+        }
+        if (required && (isMarkedForDeletion || (!fileData && !existingBlob?.name))) {
+          return 'errors.validations.file.required';
+        }
+        return true;
+      },
+    },
   });
 
   const markForDeletion = (mark: boolean) => {
     setIsMarkedForDeletion(mark);
     setValue(fieldName, mark ? null : existingBlob);
-    setTimeout(() => {
-      trigger(fieldName);
-    }, 0);
+    setTimeout(() => trigger(fieldName), 0);
   };
-
-  const registerProps = register(fieldName, {
-    validate: (value: unknown | undefined) => {
-      const fileData = value as BlobValue | null;
-
-      if (fileData?.type && !fileData.type.startsWith(accept?.replace(/\/\*$/, '') ?? '')) {
-        return `errors.validations.file.invalidType:${accept}:${fileData.type}`;
-      }
-      if (typeof fileData?.size === 'number' && minbytes && fileData?.size < minbytes) {
-        return `errors.validations.file.minSize:${prettyBytes(minbytes)}:${prettyBytes(fileData?.size)}`;
-      }
-      if (typeof fileData?.size === 'number' && maxbytes && fileData?.size > maxbytes) {
-        return `errors.validations.file.maxSize:${prettyBytes(maxbytes)}:${prettyBytes(fileData?.size)}`;
-      }
-      if (required && (isMarkedForDeletion || (!fileData && !existingBlob?.name))) {
-        return 'errors.validations.file.required';
-      }
-      return true;
-    },
-  });
-
-  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0] || null;
-
-    if (!file) {
-      setValue(fieldName, null);
-      setTimeout(() => {
-        trigger(fieldName);
-      }, 0);
-      return;
-    }
-
+  const processFile = async (file: File) => {
+    setSelectedFile(file);
     try {
       const fileData = await fileToBase64(file);
       const blobValue: BlobValue = {
@@ -141,60 +276,79 @@ const FileField: React.FC<FileFieldProps> = ({
         name: file.name,
         size: file.size,
       };
-
       setValue(fieldName, blobValue);
-      setTimeout(() => {
-        trigger(fieldName);
-      }, 0);
-    } catch (error) {
-      console.error('Error converting file to base64:', error);
+      setTimeout(() => trigger(fieldName), 0);
+    } catch (err) {
+      console.error('Error converting file to base64:', err);
+      setSelectedFile(null);
       setValue(fieldName, null);
-      setTimeout(() => {
-        trigger(fieldName);
-      }, 0);
+      setTimeout(() => trigger(fieldName), 0);
     }
   };
 
+  const removeSelection = () => {
+    setSelectedFile(null);
+    setValue(fieldName, hasFile ? existingBlob : null);
+    setTimeout(() => trigger(fieldName), 0);
+  };
+
   const undoEdit = () => {
     setShouldShowInput(false);
+    setSelectedFile(null);
     setValue(fieldName, existingBlob);
-    const input = document.querySelector(`[name=${fieldName}]`) as HTMLInputElement;
-    if (input) input.value = '';
-    setTimeout(() => {
-      trigger(fieldName);
-    }, 0);
+    setTimeout(() => trigger(fieldName), 0);
   };
 
+  const containerRef = useRef<HTMLDivElement>(null);
   const fieldId = useId();
   const labelId = useId();
   const errorId = useId();
   const descriptionId = useId();
 
+  const showDropZone = shouldShowInput && !isMarkedForDeletion;
+
   return (
-    <div className={className}>
+    <div className={className} ref={containerRef}>
       <FormLabel id={labelId} validations={validations}>
         {label}
       </FormLabel>
-      <div>
+      <div className="space-y-2">
+        {/* Focus anchor for RHF scroll-to-error */}
+        <span
+          ref={fieldRef}
+          tabIndex={-1}
+          className="sr-only"
+          aria-hidden="true"
+          onFocus={() => {
+            const firstButton = containerRef.current?.querySelector<HTMLElement>(
+              'button:not([tabindex="-1"]), [tabindex="0"]'
+            );
+            firstButton?.focus();
+          }}
+        />
+
+        {/* File esistente */}
         {hasFile && !shouldShowInput && !isMarkedForDeletion && (
-          <div className="p-3 bg-slate-200 text-slate-800 dark:bg-slate-600 dark:text-slate-200 rounded-md">
+          <div className="p-3 bg-slate-200 text-slate-800 dark:bg-slate-600 dark:text-slate-200 rounded-md space-y-2">
             <div className="flex items-center justify-between">
               <a
                 href={`${location.pathname.replace('entities', 'api').replace('edit/', '')}/${fieldName}/${existingBlob?.name}`}
-                className="hover:underline flex items-center gap-2"
+                className="icon-text-button hover:underline flex items-center gap-2 text-sm"
                 target="_blank"
                 rel="noopener noreferrer"
                 aria-label={`${t('actions.crud.file.viewOrDownload')} ${existingBlob?.name} (${t('common.opensInNewWindow')})`}
               >
                 {getFileIcon(existingBlob?.type)}
-                {t('actions.crud.file.viewOrDownload')}{' '}
-                {existingBlob?.name} ({t('common.opensInNewWindow')})
+                {existingBlob?.name}
+                {existingBlob?.size != null && (
+                  <span className="text-xs opacity-70">({prettyBytes(existingBlob.size)})</span>
+                )}
               </a>
               <div className="flex items-center gap-2">
                 <button
                   type="button"
                   onClick={() => setShouldShowInput(true)}
-                  className="flex items-center text-sm  cursor-pointer font-medium gap-1"
+                  className="icon-text-button flex items-center text-sm cursor-pointer font-medium gap-1"
                 >
                   <Icon icon="swap_horiz" size={5} />
                   {t('actions.crud.edit')}
@@ -202,16 +356,20 @@ const FileField: React.FC<FileFieldProps> = ({
                 <button
                   type="button"
                   onClick={() => markForDeletion(true)}
-                  className="flex items-center text-sm  cursor-pointer font-medium gap-1"
+                  className="icon-text-button flex items-center text-sm cursor-pointer font-medium gap-1"
                 >
                   <Icon icon="delete" size={5} />
                   {t('actions.crud.delete')}
                 </button>
               </div>
             </div>
+            {existingBlob && (
+              <BlobViewer blob={existingBlob} compact />
+            )}
           </div>
         )}
 
+        {/* Marcato per eliminazione */}
         {isMarkedForDeletion && (
           <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
             <div className="flex items-center justify-between">
@@ -224,7 +382,7 @@ const FileField: React.FC<FileFieldProps> = ({
               <button
                 type="button"
                 onClick={() => markForDeletion(false)}
-                className="flex items-center text-sm cursor-pointer font-medium gap-1"
+                className="icon-text-button flex items-center text-sm cursor-pointer font-medium gap-1"
               >
                 <Icon icon="undo" size={5} />
                 {t('common.undo')}
@@ -233,45 +391,44 @@ const FileField: React.FC<FileFieldProps> = ({
           </div>
         )}
 
-        <div className={shouldShowInput && !isMarkedForDeletion ? 'block' : 'hidden'}>
-          {hasFile && shouldShowInput && (
-            <div className="p-3 mb-1 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center text-yellow-800 dark:text-yellow-200 gap-2">
-                  <Icon icon="info" size={6} />
-                  <span className="text-sm font-medium">
-                    {t('actions.crud.file.replaceWarning')}
-                  </span>
-                </div>
-                <button
-                  type="button"
-                  onClick={() => undoEdit()}
-                  className="flex items-center text-sm cursor-pointer font-medium gap-1"
-                >
-                  <Icon icon="undo" size={5} />
-                  {t('common.cancel')}
-                </button>
+        {/* Warning sostituzione */}
+        {hasFile && shouldShowInput && (
+          <div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center text-yellow-800 dark:text-yellow-200 gap-2">
+                <Icon icon="info" size={6} />
+                <span className="text-sm font-medium">
+                  {t('actions.crud.file.replaceWarning')}
+                </span>
               </div>
+              <button
+                type="button"
+                onClick={undoEdit}
+                className="icon-text-button flex items-center text-sm cursor-pointer font-medium gap-1"
+              >
+                <Icon icon="undo" size={5} />
+                {t('common.cancel')}
+              </button>
             </div>
-          )}
-          <input
-            type="file"
-            disabled={props.isDisabled}
-            required={required && !hasFile && !isMarkedForDeletion}
-            aria-invalid={!!error}
-            aria-labelledby={labelId}
-            aria-describedby={
-              [validations ? descriptionId : '', error ? errorId : ''].join(' ').trim() || undefined
-            }
-            id={fieldId}
-            accept={accept ?? '*/*'}
-            {...registerProps}
-            onChange={handleFileChange}
-            ref={inputRef}
-            className={errors?.[fieldName]?.message ? 'form-field-error' : 'form-field'}
+          </div>
+        )}
+
+        {/* Preview file selezionato */}
+        {showDropZone && selectedFile && (
+          <FilePreview file={selectedFile} onRemove={removeSelection} />
+        )}
+
+        {/* Drop zone — nascosta se file già selezionato */}
+        {showDropZone && !selectedFile && (
+          <DropZone
+            accept={accept}
+            isDisabled={props.isDisabled}
+            onFileSelected={processFile}
+            hasError={!!error}
           />
-        </div>
+        )}
       </div>
+
       {!error && <FormFieldInfo id={descriptionId} validations={validations || {}} />}
       {error && <Error id={errorId} error={error} />}
     </div>

package/generators/client/templates/react/src/index.css.ejs

@@ -75,6 +75,14 @@
     focus:inset-ring-0 focus:outline-2 focus:outline-offset-2 focus:outline-red-600 dark:focus:outline-red-500
     inset-ring-2 inset-ring-red-600 dark:inset-ring-red-500;
   }
+  .drop-zone-button {
+    @apply outline-0 rounded-md w-full cursor-pointer transition-colors;
+  }
+  .icon-text-button {
+    @apply rounded-full cursor-pointer
+    focus:outline-2 focus:outline-offset-2 focus:outline-blue-600 focus:dark:outline-sky-300
+    focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 focus-visible:dark:outline-sky-300;
+  }
   .kdb-shortcut {
     @apply font-sans text-xs h-5 min-w-5 items-center justify-center rounded border px-1 hidden xl:inline-flex;
   }