@smileid/web-components 11.0.3 → 11.2.0

package/lib/components/selfie/src/selfie-capture-wrapper/SelfieCaptureWrapper.tsx

@@ -3,7 +3,8 @@ import { IconLoader2 } from '@tabler/icons-preact';
 import register from 'preact-custom-element';
 import type { FunctionComponent } from 'preact';
 
-import { getBoolProp } from '@/utils/props';
+import { getBoolProp } from '../../../../utils/props';
+import { translate, translateHtml } from '../../../../domain/localisation';
 import SmartSelfieCapture from '../smartselfie-capture/SmartSelfieCapture';
 // Legacy web component fallback (used when Mediapipe isn't available)
 import '../selfie-capture/SelfieCapture';
@@ -17,6 +18,7 @@ interface Props {
   'theme-color'?: string;
   'show-navigation'?: string | boolean;
   'allow-agent-mode'?: string | boolean;
+  'allow-legacy-selfie-fallback'?: string | boolean;
   'show-agent-mode-for-tests'?: string | boolean;
   'hide-attribution'?: string | boolean;
   'disable-image-tests'?: string | boolean;
@@ -25,12 +27,16 @@ interface Props {
   hidden?: string | boolean;
 }
 
+const DEFAULT_MEDIAPIPE_WAIT_MS = 90 * 1000; // For when legacy fallback is NOT allowed, we wait the full 90s for mediapipe to load before showing an error.
+const DEFAULT_WAIT_MS = 20 * 1000; // default for when legacy fallback is allowed we wait for 20s
+
 // Wrapper component that decides whether to use the modern
 // SmartSelfieCapture (Mediapipe-based) or fallback to the legacy `selfie-capture`
-// web component after a timeout of 20 seconds.
+// web component after a timeout (default 90 seconds).
 const SelfieCaptureWrapper: FunctionComponent<Props> = ({
-  timeout = 20000,
+  timeout = DEFAULT_MEDIAPIPE_WAIT_MS,
   'start-countdown': startCountdownProp = false,
+  'allow-legacy-selfie-fallback': allowLegacySelfieFallbackProp = false,
   hidden: hiddenProp = false,
   ...props
 }) => {
@@ -54,6 +60,9 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
 
   const hidden = getBoolProp(hiddenProp);
   const startCountdown = getBoolProp(startCountdownProp);
+  const allowLegacySelfieFallback = getBoolProp(allowLegacySelfieFallbackProp);
+  const loadingTime = allowLegacySelfieFallback ? DEFAULT_WAIT_MS : timeout;
+
   // Component state:
   // - mediapipeReady: whether the mediapipe instance has successfully loaded
   // - loadingProgress: percentage used for the visible loading UI
@@ -96,12 +105,12 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
 
     const timer = setInterval(() => {
       setLoadingProgress((prev: number) => Math.min(prev + 1, 100));
-    }, timeout / 100);
+    }, loadingTime / 100);
 
     return () => {
       clearInterval(timer);
     };
-  }, [hidden, startCountdown, timeout, mediapipeReady]);
+  }, [hidden, startCountdown, loadingTime, mediapipeReady]);
 
   useEffect(() => {
     if (hidden || mediapipeReady || loadingProgress < 100) return undefined;
@@ -155,8 +164,22 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
     };
   }, [hidden, mediapipeReady, loadingProgress]);
 
+  // Dispatch allow_legacy_selfie_fallback config for observability
+  useEffect(() => {
+    if (hidden) return;
+
+    const smartCameraWeb = document.querySelector('smart-camera-web');
+    smartCameraWeb?.dispatchEvent(
+      new CustomEvent('metadata.allow-legacy-selfie-fallback', {
+        detail: {
+          allow_legacy_selfie_fallback: allowLegacySelfieFallback,
+        },
+      }),
+    );
+  }, [hidden, allowLegacySelfieFallback]);
+
   // Announce to any `smart-camera-web` element which liveness version is active.
-  // The old capture users 0.0.1, the new one 1.0.0.
+  // The old capture uses 0.0.1, the new one 1.0.0.
   useEffect(() => {
     if (hidden || mediapipeLoading) return;
 
@@ -185,52 +208,71 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
   }
 
   if (loadingProgress >= 100) {
-    // When loading completes without Mediapipe becoming ready, mount the legacy
-    // `selfie-capture` web component. We also set `usingSelfieCapture` so other
-    // effects can react (e.g. metadata dispatch).
-    if (!usingSelfieCapture) {
-      setUsingSelfieCapture(true);
-    }
+    // When loading completes without Mediapipe becoming ready, check if legacy
+    // fallback is allowed. Legacy is allowed if:
+    // 1. allow-legacy-selfie-fallback attribute is set to true, OR
+    // 2. Running under Cypress (to keep existing test behavior)
+    const legacyFallbackAllowed = allowLegacySelfieFallback || isCypress;
+
+    if (legacyFallbackAllowed) {
+      // Mount the legacy `selfie-capture` web component. We also set
+      // `usingSelfieCapture` so other effects can react (e.g. metadata dispatch).
+      if (!usingSelfieCapture) {
+        setUsingSelfieCapture(true);
+      }
+
+      const propsWithoutHidden = { ...props };
+      delete (propsWithoutHidden as any).hidden;
+
+      return (
+        // @ts-expect-error --- preact-custom-element doesn't have proper types for refs
+        <selfie-capture
+          {...propsWithoutHidden}
+          ref={(el: HTMLElement) => {
+            if (el && !el.hasAttribute('data-events-setup')) {
+              el.setAttribute('data-events-setup', 'true');
 
-    const propsWithoutHidden = { ...props };
-    delete (propsWithoutHidden as any).hidden;
+              const forwardEvent = (event: Event) => {
+                const customEvent = event as CustomEvent;
 
+                if (
+                  customEvent.type === 'selfie-capture.publish' ||
+                  customEvent.type === 'selfie-capture.cancelled' ||
+                  customEvent.type === 'selfie-capture.close'
+                ) {
+                  setInitialSessionCompleted(true);
+                }
+
+                window.dispatchEvent(
+                  new CustomEvent(customEvent.type, {
+                    detail: customEvent.detail,
+                    bubbles: true,
+                  }),
+                );
+              };
+
+              el.addEventListener('selfie-capture.publish', forwardEvent);
+              el.addEventListener('selfie-capture.cancelled', forwardEvent);
+              el.addEventListener('selfie-capture.close', forwardEvent);
+            }
+          }}
+        />
+      );
+    }
+
+    // Legacy fallback is NOT allowed: show error message
     return (
-      // @ts-ignore
-      <selfie-capture
-        {...propsWithoutHidden}
-        ref={(el: HTMLElement) => {
-          if (el && !el.hasAttribute('data-events-setup')) {
-            el.setAttribute('data-events-setup', 'true');
-
-            const forwardEvent = (event: Event) => {
-              const customEvent = event as CustomEvent;
-
-              if (
-                customEvent.type === 'selfie-capture.publish' ||
-                customEvent.type === 'selfie-capture.cancelled' ||
-                customEvent.type === 'selfie-capture.close'
-              ) {
-                setInitialSessionCompleted(true);
-              }
-
-              window.dispatchEvent(
-                new CustomEvent(customEvent.type, {
-                  detail: customEvent.detail,
-                  bubbles: true,
-                }),
-              );
-            };
-
-            el.addEventListener('selfie-capture.publish', forwardEvent);
-            el.addEventListener('selfie-capture.cancelled', forwardEvent);
-            el.addEventListener('selfie-capture.close', forwardEvent);
-          }
-        }}
-      />
+      <div style={{ textAlign: 'center', marginTop: '20%', padding: '0 20px' }}>
+        <p style={{ fontSize: '1.2rem', color: '#333' }}>
+          {translate('selfie.capture.loading.connectionError')}
+        </p>
+      </div>
     );
   }
 
+  // Midpoint threshold (40s out of 90s ≈ 44%)
+  const SLOW_CONNECTION_THRESHOLD = 44;
+
   return (
     <div style={{ textAlign: 'center', marginTop: '20%' }}>
       <div
@@ -245,7 +287,15 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
           style={{ animation: 'spin 1s linear infinite' }}
         />
       </div>
-      <p>Loading... {loadingProgress}%</p>
+      {loadingProgress >= SLOW_CONNECTION_THRESHOLD ? (
+        <p>{translate('selfie.capture.loading.slowConnection')}</p>
+      ) : (
+        <p>
+          {translateHtml('selfie.capture.loading.progress', {
+            progress: loadingProgress,
+          })}
+        </p>
+      )}
       <style>{`
         @keyframes spin {
           from { transform: rotate(0deg); }
@@ -267,6 +317,7 @@ if (!customElements.get('selfie-capture-wrapper')) {
       'theme-color',
       'show-navigation',
       'allow-agent-mode',
+      'allow-legacy-selfie-fallback',
       'show-agent-mode-for-tests',
       'hide-attribution',
       'disable-image-tests',

package/lib/components/selfie/src/smartselfie-capture/SmartSelfieCapture.tsx

@@ -152,7 +152,7 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
   return (
     <div className="smartselfie-capture">
       {showNavigation && (
-        // @ts-ignore
+        // @ts-expect-error --- preact-custom-element doesn't have proper types for refs
         <smileid-navigation ref={navigationRef} theme-color={themeColor} />
       )}
 
@@ -188,7 +188,7 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
           />
         )}
 
-      {/* @ts-ignore */}
+      {/* @ts-expect-error -- preact-custom-element doesn't have proper types for refs */}
       {!hideAttribution && <powered-by-smile-id />}
 
       <style>{`

package/lib/components/selfie/src/smartselfie-capture/components/CaptureControls.tsx

@@ -1,4 +1,5 @@
 import type { FunctionComponent } from 'preact';
+import { t } from '../../../../../domain/localisation';
 
 interface CaptureControlsProps {
   isCapturing: boolean;
@@ -33,7 +34,7 @@ export const CaptureControls: FunctionComponent<CaptureControlsProps> = ({
         onClick={onStartCapture}
         disabled={isCapturing || hasFinishedCapture || !isReadyToCapture}
       >
-        Start Capture
+        {t('selfie.capture.button.startCapture')}
       </button>
 
       {allowAgentMode && (agentSupported || showAgentModeForTests) && (
@@ -43,7 +44,9 @@ export const CaptureControls: FunctionComponent<CaptureControlsProps> = ({
           className="agent-mode-btn"
           disabled={isCapturing || hasFinishedCapture}
         >
-          {facingMode === 'user' ? 'Agent Mode Off' : 'Agent Mode On'}
+          {facingMode === 'user'
+            ? t('selfie.capture.agentMode.off')
+            : t('selfie.capture.agentMode.on')}
         </button>
       )}
     </div>

package/lib/components/selfie/src/smartselfie-capture/hooks/useCamera.ts

@@ -110,7 +110,7 @@ export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
       }
 
       await startCamera(newFacingMode);
-    } catch (error) {
+    } catch {
       setFacingMode(previousFacingMode);
       isSwitchingCameraRef.current = false;
 
@@ -180,7 +180,7 @@ export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
         userCameraId =
           userStream.getVideoTracks()[0].getSettings().deviceId ?? null;
         userStream.getTracks().forEach((track) => track.stop());
-      } catch (error) {
+      } catch {
         // no user-facing camera available
       }
 
@@ -192,7 +192,7 @@ export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
         environmentCameraId =
           envStream.getVideoTracks()[0].getSettings().deviceId ?? null;
         envStream.getTracks().forEach((track) => track.stop());
-      } catch (error) {
+      } catch {
         // no environment-facing camera available
       }
 
@@ -207,7 +207,7 @@ export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
       }
 
       setAgentSupported(!isGecko);
-    } catch (error) {
+    } catch {
       setAgentSupported(false);
     }
   };

package/lib/components/selfie/src/smartselfie-capture/hooks/useFaceCapture.ts

@@ -17,6 +17,7 @@ import { captureImageFromVideo } from '../utils/imageCapture';
 import { ImageType } from '../constants';
 import { MESSAGES, type MessageKey } from '../utils/alertMessages';
 import { getMediapipeInstance } from '../utils/mediapipeManager';
+import { t } from '../../../../../domain/localisation';
 import packageJson from '../../../../../../package.json';
 
 const COMPONENTS_VERSION = packageJson.version;
@@ -88,7 +89,7 @@ export const useFaceCapture = ({
 
   const updateAlertImmediate = (messageKey: MessageKey | null) => {
     if (messageKey && MESSAGES[messageKey]) {
-      alertTitle.value = MESSAGES[messageKey];
+      alertTitle.value = MESSAGES[messageKey]?.();
     } else {
       alertTitle.value = '';
     }
@@ -141,7 +142,7 @@ export const useFaceCapture = ({
     const isInSmileZone = capturesTaken.value >= smileCheckpoint.value;
 
     if (isInNeutralZone) {
-      alertTitle.value = 'Capturing...';
+      alertTitle.value = t('selfie.smart.status.capturing');
     } else if (isInSmileZone) {
       const timeSinceSmile = Date.now() - lastSmileTime.value;
       if (timeSinceSmile > smileCooldown) {
@@ -154,7 +155,7 @@ export const useFaceCapture = ({
           updateAlert('smile-required');
         }
       } else {
-        alertTitle.value = 'Keep smiling!';
+        alertTitle.value = t('selfie.smart.status.keepSmiling');
       }
     } else {
       updateAlert(null);
@@ -177,7 +178,7 @@ export const useFaceCapture = ({
     } else if (isCapturing.value) {
       updateCaptureAlerts();
     } else {
-      alertTitle.value = 'Ready to capture';
+      alertTitle.value = t('selfie.smart.status.readyToCapture');
     }
   };
 
@@ -330,7 +331,7 @@ export const useFaceCapture = ({
       }
 
       updateAlerts();
-    } catch (error) {
+    } catch {
       faceDetected.value = false;
       faceInBounds.value = false;
       multipleFaces.value = false;

package/lib/components/selfie/src/smartselfie-capture/utils/alertMessages.ts

@@ -1,13 +1,15 @@
+import { t } from '../../../../../domain/localisation';
+
 export const MESSAGES = {
-  'multiple-faces': 'Ensure only one face is visible',
-  'no-face': 'Position your face in the oval',
-  'out-of-bounds': 'Position your face in the oval',
-  'too-close': 'Move farther away',
-  'too-far': 'Move closer',
-  'neutral-expression': 'Neutral expression',
-  'smile-required': 'Smile!',
-  'open-mouth-smile': 'Wider smile - teeth visible',
-  initializing: 'Initializing...',
+  'multiple-faces': () => t('selfie.smart.alert.multipleFaces'),
+  'no-face': () => t('selfie.smart.alert.noFace'),
+  'out-of-bounds': () => t('selfie.smart.alert.outOfBounds'),
+  'too-close': () => t('selfie.smart.alert.tooClose'),
+  'too-far': () => t('selfie.smart.alert.tooFar'),
+  'neutral-expression': () => t('selfie.smart.alert.neutralExpression'),
+  'smile-required': () => t('selfie.smart.alert.smileRequired'),
+  'open-mouth-smile': () => t('selfie.smart.alert.openMouthSmile'),
+  initializing: () => t('selfie.smart.alert.initializing'),
 };
 
 export type MessageKey = keyof typeof MESSAGES;

package/lib/components/selfie/src/smartselfie-capture/utils/imageCapture.ts

@@ -1,3 +1,5 @@
+import { JPEG_QUALITY } from '../../../../../domain/constants/src/Constants';
+
 export const captureImageFromVideo = (
   videoElement: HTMLVideoElement,
   isReference: boolean = false,
@@ -60,5 +62,5 @@ export const captureImageFromVideo = (
     canvas.height,
   );
 
-  return canvas.toDataURL('image/jpeg');
+  return canvas.toDataURL('image/jpeg', JPEG_QUALITY);
 };

package/lib/components/signature-pad/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/signature-pad",
-  "version": "11.0.3",
+  "version": "11.2.0",
   "private": "true",
   "exports": {
     ".": "./index.js"

package/lib/components/smart-camera-web/src/SmartCameraWeb.js

@@ -20,7 +20,7 @@ function scwTemplateString() {
   <div style="height: 100%;">
     <camera-permission ${this.applyComponentThemeColor} ${this.title} ${this.showNavigation} ${this.hideInstructions ? '' : 'hidden'} ${this.hideAttribution}></camera-permission>
     <selfie-capture-screens ${this.applyComponentThemeColor} ${this.title} ${this.showNavigation} ${this.disableImageTests} ${this.hideAttribution} ${this.hideInstructions} hidden
-      ${this.hideBackToHost} ${this.allowAgentMode} ${this.allowAgentModeTests}
+      ${this.hideBackToHost} ${this.allowAgentMode} ${this.allowAgentModeTests} ${this.allowLegacySelfieFallback}
     ></selfie-capture-screens>
     <document-capture-screens ${this.applyComponentThemeColor} document-type=${this.documentType} ${this.title} ${this.documentCaptureModes} ${this.showNavigation}  ${this.hideAttribution}
      ${this.hideBackOfId} ${this.applyComponentThemeColor} hidden></document-capture-screens>
@@ -69,6 +69,7 @@ class SmartCameraWeb extends HTMLElement {
   static get observedAttributes() {
     return [
       'allow-agent-mode',
+      'allow-legacy-selfie-fallback',
       'disable-image-tests',
       'document-capture-modes',
       'document-type',
@@ -83,6 +84,7 @@ class SmartCameraWeb extends HTMLElement {
   attributeChangedCallback(name) {
     switch (name) {
       case 'allow-agent-mode':
+      case 'allow-legacy-selfie-fallback':
       case 'disable-image-tests':
       case 'document-capture-modes':
       case 'document-type':
@@ -266,6 +268,12 @@ class SmartCameraWeb extends HTMLElement {
       : '';
   }
 
+  get allowLegacySelfieFallback() {
+    return this.hasAttribute('allow-legacy-selfie-fallback')
+      ? `allow-legacy-selfie-fallback='${this.getAttribute('allow-legacy-selfie-fallback')}'`
+      : '';
+  }
+
   get hideAttribution() {
     return this.hasAttribute('hide-attribution') ? 'hide-attribution' : '';
   }

package/lib/components/totp-consent/src/TotpConsent.js

@@ -1,4 +1,5 @@
 import validate from 'validate.js';
+import { getDirection } from '../../../domain/localisation';
 
 function postData(url, data) {
   return fetch(url, {
@@ -284,7 +285,7 @@ function markup() {
             }
         </style>
 
-        <div class='flow center' id='id-entry'>
+        <div class='flow center' id='id-entry' dir='${this.direction}'>
             <div class="nav">
                 <div class="back-wrapper">
                     <button type='button' data-type='icon' id="back-button" class="back-button">
@@ -331,7 +332,7 @@ function markup() {
             </form>
         </div>
 
-        <div hidden class='flow center' id='select-mode'>
+        <div hidden class='flow center' id='select-mode' dir='${this.direction}'>
             <div class="nav">
                 <div class="back-wrapper">
                     <button type='button' data-type='icon' id="back-to-entry-button" class="back-button">
@@ -459,7 +460,7 @@ function markup() {
             </form>
         </div>
 
-        <div hidden class='flow center' id='otp-verification'>
+        <div hidden class='flow center' id='otp-verification' dir='${this.direction}'>
             <div class="nav justify-right">
                 <button data-type='icon' type='button' class='close-iframe'>
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
@@ -899,6 +900,10 @@ class TotpConsent extends HTMLElement {
     return this.getAttribute('theme-color') || '#001096';
   }
 
+  get direction() {
+    return this.getAttribute('dir') || getDirection() || 'ltr';
+  }
+
   get hideBack() {
     return this.hasAttribute('hide-back');
   }

package/lib/domain/camera/src/SmartCamera.js

@@ -1,3 +1,5 @@
+import { t } from '../../localisation';
+
 class SmartCamera {
   static stream = null;
 
@@ -74,32 +76,15 @@ class SmartCamera {
     switch (e.name) {
       case 'NotAllowedError':
       case 'SecurityError':
-        return `
-              Looks like camera access was not granted, or was blocked by a browser
-              level setting / extension. Please follow the prompt from the URL bar,
-              or extensions, and enable access.
-              You may need to refresh to start all over again
-            `;
+        return t('camera.error.notAllowed');
       case 'AbortError':
-        return `
-              Oops! Something happened, and we lost access to your stream.
-              Please refresh to start all over again
-            `;
+        return t('camera.error.abort');
       case 'NotReadableError':
-        return `
-              There seems to be a problem with your device's camera, or its connection.
-              Please check this, and when resolved, try again. Or try another device.
-            `;
+        return t('camera.error.notReadable');
       case 'NotFoundError':
-        return `
-              We are unable to find a video stream.
-              You may need to refresh to start all over again
-            `;
+        return t('camera.error.notFound');
       case 'TypeError':
-        return `
-              This site is insecure, and as such cannot have access to your camera.
-              Try to navigate to a secure version of this page, or contact the owner.
-            `;
+        return t('camera.error.insecure');
       default:
         return e.message;
     }

package/lib/domain/constants/src/Constants.js

@@ -23,5 +23,33 @@ export const IMAGE_TYPE = {
 };
 
 export const DEFAULT_NO_OF_LIVENESS_FRAMES = 8;
+
+/**
+ * JPEG compression quality for captured images (selfies, liveness frames, ID documents).
+ *
+ * Value: 0.92 (92% quality)
+ *
+ * This value is optimized for identity verification and biometric matching:
+ * - Preserves fine facial details needed for accurate facial recognition
+ * - Maintains skin tone gradients without JPEG blocking artifacts
+ * - Ensures ID document text remains readable for OCR processing
+ * - Provides minimal compression artifacts that could affect liveness detection
+ *
+ * Quality comparison:
+ * - 1.0:  No compression, very large files
+ * - 0.95: Virtually lossless, larger files
+ * - 0.92: Good quality, reasonable file size
+ * - 0.85: Visible artifacts in gradients and skin tones
+ * - 0.80: Noticeable blocking artifacts that hurt matching accuracy
+ *
+ * WARNING: DO NOT LOWER THIS VALUE BELOW 0.92
+ * Reducing JPEG quality can negatively impact downstream systems:
+ * - Facial recognition matching accuracy may decrease
+ * - Liveness detection anti-spoofing checks may fail
+ * - ID document OCR text extraction may produce errors
+ * - Overall verification success rates may drop
+ *
+ */
+export const JPEG_QUALITY = 0.92;
 export const PORTRAIT_ID_PREVIEW_WIDTH = 396;
 export const PORTRAIT_ID_PREVIEW_HEIGHT = 527;

package/lib/domain/file-upload/src/SmartFileUpload.js

@@ -1,3 +1,5 @@
+import { t, tHtml } from '../../localisation';
+
 class SmartFileUpload {
   static memoryLimit = 10240000;
 
@@ -27,11 +29,7 @@ class SmartFileUpload {
         resolve(e.target.result);
       };
       reader.onerror = () => {
-        reject(
-          new Error(
-            'An error occurred reading the file. Please check the file, and try again',
-          ),
-        );
+        reject(new Error(t('fileUpload.error.readingFile')));
       };
       reader.readAsDataURL(file);
     });
@@ -39,20 +37,21 @@ class SmartFileUpload {
 
   static async retrieve(files) {
     if (files.length > 1) {
-      throw new Error('Only one file upload is permitted at a time');
+      throw new Error(t('fileUpload.error.multipleFiles'));
     }
 
     const file = files[0];
 
     if (!SmartFileUpload.supportedTypes.includes(file.type)) {
-      throw new Error(
-        'Unsupported file format. Please ensure that you are providing a JPG or PNG image',
-      );
+      throw new Error(t('fileUpload.error.unsupportedFormat'));
     }
 
     if (file.size > SmartFileUpload.memoryLimit) {
       throw new Error(
-        `${file.name} is too large. Please ensure that the file is less than ${SmartFileUpload.getHumanSize(SmartFileUpload.memoryLimit)}.`,
+        tHtml('fileUpload.error.fileTooLarge', {
+          filename: file.name,
+          size: SmartFileUpload.getHumanSize(SmartFileUpload.memoryLimit),
+        }),
       );
     }