Overview
Provides formatting utilities for numbers, file sizes, time durations, dates, and file extensions used across the Dify frontend.
Description
This module contains a collection of pure formatting functions that transform raw numeric and string values into human-readable display strings. formatNumber adds comma separators to numbers while correctly handling very small numbers that would otherwise render in scientific notation. formatFileSize converts byte counts into standard units (KB, MB, GB, etc.). formatTime converts seconds into readable time strings (sec, min, h). formatNumberAbbreviated produces compact representations using k, M, and B suffixes. formatToLocalTime wraps dayjs to format timestamps using locale-specific conventions, supporting over 20 languages via pre-imported dayjs locale modules. getFileExtension extracts the file extension from a filename, handling edge cases like hidden files and multi-dot names.
Usage
Use these functions whenever displaying numeric metrics, file sizes, durations, or dates in the UI. They are designed as stateless, side-effect-free utilities suitable for use in React components, table renderers, and tooltip formatters.
Code Reference
Source Location
Signature
export const formatNumber = (num: number | string) => string | number
export const formatFileSize = (fileSize: number) => string | number
export const formatTime = (seconds: number) => string | number
export const formatNumberAbbreviated = (num: number) => string
export const formatToLocalTime = (time: Dayjs, local: Locale, format: string) => string
export const getFileExtension = (fileName: string) => string
Import
import {
formatNumber,
formatFileSize,
formatTime,
formatNumberAbbreviated,
formatToLocalTime,
getFileExtension,
} from '@/utils/format'
I/O Contract
Inputs (formatNumber)
| Name |
Type |
Required |
Description
|
| num |
string |
Yes |
The number to format with comma separators
|
Inputs (formatFileSize)
| Name |
Type |
Required |
Description
|
| fileSize |
number |
Yes |
File size in bytes
|
Inputs (formatTime)
| Name |
Type |
Required |
Description
|
| seconds |
number |
Yes |
Duration in seconds
|
Inputs (formatNumberAbbreviated)
| Name |
Type |
Required |
Description
|
| num |
number |
Yes |
The number to abbreviate with k/M/B suffixes
|
Inputs (formatToLocalTime)
| Name |
Type |
Required |
Description
|
| time |
Dayjs |
Yes |
A dayjs instance representing the time to format
|
| local |
Locale |
Yes |
The locale identifier for localized formatting
|
| format |
string |
Yes |
The dayjs format string (e.g., "YYYY-MM-DD HH:mm")
|
Inputs (getFileExtension)
| Name |
Type |
Required |
Description
|
| fileName |
string |
Yes |
The file name from which to extract the extension
|
Outputs
| Function |
Type |
Description
|
| formatNumber |
number |
Comma-separated number string, or the original falsy value
|
| formatFileSize |
number |
Human-readable file size (e.g., "1.00 MB"), or the original falsy value
|
| formatTime |
number |
Human-readable time duration (e.g., "1.00 min"), or the original falsy value
|
| formatNumberAbbreviated |
string |
Abbreviated number string (e.g., "1.5M", "2B")
|
| formatToLocalTime |
string |
Locale-formatted date/time string
|
| getFileExtension |
string |
Lowercase file extension without the leading dot, or empty string
|
Usage Examples
Format a Large Number
import { formatNumber } from '@/utils/format'
formatNumber(1234567) // '1,234,567'
formatNumber(1234567.89) // '1,234,567.89'
formatNumber(0.0000008) // '0.0000008'
Format File Sizes
import { formatFileSize } from '@/utils/format'
formatFileSize(1024) // '1.00 KB'
formatFileSize(1024 * 1024) // '1.00 MB'
formatFileSize(500) // '500.00 bytes'
Abbreviate Numbers
import { formatNumberAbbreviated } from '@/utils/format'
formatNumberAbbreviated(950) // '950'
formatNumberAbbreviated(1200) // '1.2k'
formatNumberAbbreviated(1500000) // '1.5M'
formatNumberAbbreviated(2000000000) // '2B'
import { getFileExtension } from '@/utils/format'
getFileExtension('document.pdf') // 'pdf'
getFileExtension('archive.tar.gz') // 'gz'
getFileExtension('.gitignore') // ''
getFileExtension('.hidden.txt') // 'txt'
Related Pages
