@spellix/file-dropzone/src/utils.ts

A component that gives ability to add convenient way to manipulate with files

import { type DropzoneOptions } from 'react-dropzone';
import { BYTES_IN_KB, BYTES_IN_MB, FILE_EXTENSION_TYPES_MAP, SYMBOLS_AFTER_DOT } from './constants.js';

export const getFileExtensionFromBlobType = (type: string) => {
  const isValidType = Object.values(FILE_EXTENSION_TYPES_MAP).includes(type);

  if (!isValidType) return type.split('/')[1] || 'unknown';

  return Object.keys(FILE_EXTENSION_TYPES_MAP).find(
    (key) => FILE_EXTENSION_TYPES_MAP[key as keyof typeof FILE_EXTENSION_TYPES_MAP] === type,
  );
};

export const getFileSize = (size: number) => {
  const isInKB = size >= BYTES_IN_KB && size < BYTES_IN_MB;

  if (isInKB) return `${(size / BYTES_IN_KB).toFixed(SYMBOLS_AFTER_DOT)} KB`;

  return `${(size / BYTES_IN_MB).toFixed(SYMBOLS_AFTER_DOT)} MB`;
};

export const getFormattedFileExtensions = (accept: DropzoneOptions['accept']) => {
  const lastIndex = -1;
  const extensions = Object.keys(accept || {}).map((ext) => getFileExtensionFromBlobType(ext)?.toUpperCase());

  if (extensions.length === 1) return extensions[0];

  return `${extensions.slice(0, lastIndex).join(', ')} and ${extensions.at(lastIndex)}`;
};