@djangocfg/ui-tools 2.1.201 → 2.1.202

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.201",
+  "version": "2.1.202",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -78,8 +78,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.201",
-    "@djangocfg/ui-core": "^2.1.201",
+    "@djangocfg/i18n": "^2.1.202",
+    "@djangocfg/ui-core": "^2.1.202",
     "lucide-react": "^0.545.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -112,10 +112,10 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.201",
+    "@djangocfg/i18n": "^2.1.202",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.201",
-    "@djangocfg/ui-core": "^2.1.201",
+    "@djangocfg/typescript-config": "^2.1.202",
+    "@djangocfg/ui-core": "^2.1.202",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",

package/src/tools/Uploader/README.md

@@ -49,7 +49,32 @@ All-in-one component with dropzone and preview list.
 />
 ```
 
-### Custom Composition
+### Standalone — custom upload handler (no UploadProvider)
+
+If you handle uploads yourself (custom API hooks, multipart POST, etc.), pass `uploadFn` instead of wrapping with `UploadProvider`. Supports drag/drop, click, and Ctrl+V paste.
+
+```tsx
+import { UploadDropzone } from '@djangocfg/ui-tools/upload';
+
+function MyUploader() {
+  const { uploadAsset } = useAssets(); // your own API hook
+
+  return (
+    <UploadDropzone
+      accept={['image', 'video']}
+      maxSizeMB={50}
+      pasteEnabled
+      uploadFn={async (files) => {
+        for (const file of files) {
+          await uploadAsset({ file, name: file.name });
+        }
+      }}
+    />
+  );
+}
+```
+
+### Custom Composition (with rpldy)
 
 ```tsx
 import {
@@ -116,11 +141,11 @@ Custom overlay:
 
 ### Components
 
-| Component | Description |
-|-----------|-------------|
-| `Uploader` | All-in-one (Provider + Dropzone + Preview) |
-| `UploadProvider` | Context provider wrapping @rpldy/uploady |
-| `UploadDropzone` | Drag-drop zone with file input |
+| Component | Needs UploadProvider | Description |
+|-----------|---------------------|-------------|
+| `Uploader` | Yes | All-in-one (Provider + Dropzone + Preview) |
+| `UploadDropzone` | **Optional** | Drag-drop zone — use `uploadFn` for standalone mode |
+| `UploadProvider` | — | Context provider wrapping @rpldy/uploady |
 | `UploadPreviewList` | List of upload items with progress |
 | `UploadPreviewItem` | Single item (thumbnail, status, actions) |
 | `UploadAddButton` | Button to add files |

package/src/tools/Uploader/Uploader.story.tsx

@@ -369,3 +369,47 @@ export const PageDropCustomOverlay = () => (
     </UploadProvider>
   </div>
 );
+
+// Standalone — uploadFn instead of UploadProvider (custom API hooks, no rpldy)
+export const StandaloneWithUploadFn = () => {
+  const [files, setFiles] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-2xl space-y-4">
+      <Card>
+        <CardContent className="pt-4">
+          <p className="text-sm text-muted-foreground flex items-center gap-2">
+            <ClipboardPaste className="h-4 w-4" />
+            No <code className="text-xs bg-muted px-1 rounded">UploadProvider</code> needed.
+            Pass <code className="text-xs bg-muted px-1 rounded">uploadFn</code> to handle files yourself.
+            Drag, click, or paste (Ctrl+V).
+          </p>
+        </CardContent>
+      </Card>
+      <UploadDropzone
+        accept={['image', 'document']}
+        maxSizeMB={10}
+        pasteEnabled
+        uploadFn={(selected) => {
+          setFiles((prev) => [...prev, ...selected.map((f) => f.name)]);
+          logger.info('Custom uploadFn received: ' + selected.map((f) => f.name).join(', '));
+        }}
+        onPasteNoMatch={() => logger.info('Paste: no uploadable content found')}
+      />
+      {files.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">Received by uploadFn</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ul className="text-sm space-y-1">
+              {files.map((name, i) => (
+                <li key={i} className="text-muted-foreground">{name}</li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+};

package/src/tools/Uploader/components/UploadDropzone.tsx

@@ -9,6 +9,17 @@ import { buildAcceptString, logger } from '../utils';
 import { useClipboardPaste } from '../hooks/useClipboardPaste';
 import type { UploadDropzoneProps } from '../types';
 
+function useOptionalUploady(uploadFn?: (files: File[]) => void) {
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { upload } = useUploady();
+    return uploadFn ?? upload;
+  } catch {
+    // Not inside UploadProvider — use uploadFn if provided, otherwise noop
+    return uploadFn ?? (() => {});
+  }
+}
+
 export function UploadDropzone({
   accept = ['image', 'audio', 'video', 'document'],
   multiple = true,
@@ -18,11 +29,12 @@ export function UploadDropzone({
   className,
   children,
   onFilesSelected,
+  uploadFn,
   pasteEnabled = true,
   onPasteNoMatch,
 }: UploadDropzoneProps) {
   const t = useT();
-  const { upload } = useUploady();
+  const upload = useOptionalUploady(uploadFn);
   const inputRef = useRef<HTMLInputElement>(null);
   const [isDragging, setIsDragging] = useState(false);
   const dragCounter = useRef(0);

package/src/tools/Uploader/components/UploadPreviewItem.tsx

@@ -13,7 +13,7 @@ import {
   Skeleton,
 } from '@djangocfg/ui-core/components';
 import { useT } from '@djangocfg/i18n';
-import { formatFileSize } from '../utils';
+import { formatFileSize, truncateFilename } from '../utils';
 import type { UploadPreviewItemProps, AssetType, UploadStatus } from '../types';
 
 const ASSET_ICONS: Record<AssetType, typeof FileIcon> = {
@@ -53,6 +53,7 @@ export function UploadPreviewItem({
   }, [file.type]);
 
   const fileSize = useMemo(() => formatFileSize(file.size), [file.size]);
+  const shortName = useMemo(() => truncateFilename(file.name), [file.name]);
   const progressPercent = Math.round(progress);
 
   // Prepare visibility flags
@@ -144,11 +145,15 @@ export function UploadPreviewItem({
       <div className="flex-1 min-w-0">
         <Tooltip>
           <TooltipTrigger asChild>
-            <p className="text-sm font-medium truncate cursor-default">{file.name}</p>
+            <p className="text-sm font-medium cursor-default leading-tight">
+              {shortName}
+            </p>
           </TooltipTrigger>
-          <TooltipContent side="top" className="max-w-xs">
-            <p className="break-all">{file.name}</p>
-          </TooltipContent>
+          {shortName !== file.name && (
+            <TooltipContent side="top" className="max-w-xs">
+              <p className="break-all">{file.name}</p>
+            </TooltipContent>
+          )}
         </Tooltip>
 
         <p className="text-xs text-muted-foreground tabular-nums">{fileSize}</p>

package/src/tools/Uploader/index.ts

@@ -21,6 +21,7 @@ export {
   buildAcceptString,
   formatFileSize,
   formatDuration,
+  truncateFilename,
 } from './utils';
 
 // Types

package/src/tools/Uploader/types/index.ts

@@ -85,7 +85,14 @@ export interface UploadDropzoneProps {
   disabled?: boolean;
   className?: string;
   children?: React.ReactNode;
+  /** Called with validated files on drop/click/paste */
   onFilesSelected?: (files: File[]) => void;
+  /**
+   * Custom upload function. If provided, rpldy upload is skipped — files go only here.
+   * Use this when you handle uploads yourself (e.g. custom API hooks).
+   * Requires no UploadProvider ancestor.
+   */
+  uploadFn?: (files: File[]) => void;
   /** Enable Ctrl+V / Cmd+V paste-to-upload (default: true) */
   pasteEnabled?: boolean;
   /** Called when paste fires but no uploadable content was found */

package/src/tools/Uploader/utils/formatters.ts

@@ -1,3 +1,31 @@
+/**
+ * Middle-truncates a filename preserving the extension and a meaningful suffix.
+ *
+ * "telegram-cloud-photo-size-5-6152015652357607055-y.jpg"
+ *   → "telegram-cloud-photo-…7055-y.jpg"  (maxLength=32)
+ *
+ * Short names are returned as-is.
+ */
+export function truncateFilename(filename: string, maxLength = 32): string {
+  if (filename.length <= maxLength) return filename;
+
+  const dotIdx = filename.lastIndexOf('.');
+  const ext = dotIdx > 0 ? filename.slice(dotIdx) : '';          // ".jpg"
+  const base = dotIdx > 0 ? filename.slice(0, dotIdx) : filename; // without ext
+
+  // How many chars we can show from the start vs. end of the base
+  const available = maxLength - ext.length - 1; // 1 for '…'
+  if (available <= 2) return `…${ext}`;          // extreme edge case
+
+  const headLen = Math.ceil(available * 0.55);
+  const tailLen = available - headLen;
+
+  const head = base.slice(0, headLen);
+  const tail = tailLen > 0 ? base.slice(-tailLen) : '';
+
+  return `${head}…${tail}${ext}`;
+}
+
 export function formatFileSize(bytes: number): string {
   if (bytes === 0) return '0 B';
 

package/src/tools/Uploader/utils/index.ts

@@ -5,7 +5,7 @@ export {
   buildAcceptString,
 } from './assetTypes';
 
-export { formatFileSize, formatDuration } from './formatters';
+export { formatFileSize, formatDuration, truncateFilename } from './formatters';
 
 export { logger } from './logger';