Skip to content

Cómo mostrar el tamaño de archivo en un formato legible en Javascript

Al trabajar con archivos, generalmente es beneficioso presentar el tamaño del archivo en un formato comprensible. Por defecto, los tamaños de archivo se dan en bytes, lo que puede confundir a la mayoría de los usuarios. Para hacer que el tamaño del archivo sea más legible, podemos modificarlo a un formato fácilmente digerible como kilobytes o megabytes.

La función readableFileSize

Un método para transformar el tamaño del archivo en un formato fácilmente comprensible implica desarrollar una función que acepta un valor numérico como entrada, lo que significa el tamaño del archivo en bytes. Esta función posteriormente altera el tamaño del archivo en kilobytes o megabytes, según las dimensiones del archivo. En última instancia, la función genera una representación textual del tamaño del archivo en kilobytes o megabytes.

La siguiente es la implementación de la función readableFileSize:

js
export function readableFileSize(attachmentSize) {
  const DEFAULT_SIZE = 0;
  const fileSize = attachmentSize ?? DEFAULT_SIZE;

  if (!fileSize) {
    return `${DEFAULT_SIZE} kb`;
  }

  const sizeInKb = fileSize / 1024;

  if (sizeInKb > 1024) {
    return `${(sizeInKb / 1024).toFixed(2)} mb`;
  } else {
    return `${sizeInKb.toFixed(2)} kb`;
  }
}

Ahora diseccionemos la implementación de la función y examinemos su funcionamiento interno.

Valor por defecto

La función comienza asignando un valor predeterminado al tamaño del archivo. Si el parámetro attachmentSize es undefined, se utiliza un tamaño predeterminado de 0 bytes. Esto se logra utilizando el operador de fusión nula (??), que devuelve el operando del lado derecho si el operando del lado izquierdo es nulo o indefinido.

js
const DEFAULT_SIZE = 0;
const fileSize = attachmentSize ?? DEFAULT_SIZE;

Comprobar tamaño vacío

A continuación, la función examina si el tamaño del archivo es 0 o undefined. Si el tamaño del archivo es 0 o undefined, se devuelve el tamaño predeterminado en kilobytes.

js
if (!fileSize) {
  return `${DEFAULT_SIZE} kb`;
}

Convertir a kilobytes o megabytes

Posteriormente, la función ajusta el tamaño del archivo a kilobytes o megabytes, según el tamaño del archivo. Si el tamaño del archivo es menor o igual a 1024 kilobytes, se devuelve el tamaño del archivo en kilobytes. Alternativamente, el tamaño del archivo se convierte a megabytes y se devuelve en ese formato.

js
const sizeInKb = fileSize / 1024;

if (sizeInKb > 1024) {
  return `${(sizeInKb / 1024).toFixed(2)} mb`;
} else {
  return `${sizeInKb.toFixed(2)} kb`;
}

Para convertir el tamaño del archivo a kilobytes, la función divide el tamaño del archivo por 1024. Si el tamaño del archivo excede los 1024 kilobytes (es decir, 1 megabyte o más), el tamaño del archivo se divide nuevamente por 1024 para convertirlo a megabytes. El método toFixed redondea el tamaño del archivo a dos decimales.

Ejemplo de uso

Aquí hay una muestra que demuestra la utilización de la función readableFileSize:

js
const fileSizeInBytes = 256640;
const fileSize = readableFileSize(fileSizeInBytes); // Salida: "250.31 kb"

En este caso, el tamaño del archivo en bytes (256640) se pasa a la función readableFileSize, que devuelve una representación de cadena del tamaño del archivo en kilobytes (250.31 kb).

Conclusión

La función readableFileSize es una función de utilidad sencilla pero práctica para convertir el tamaño del archivo a un formato más legible. Al mostrar el tamaño del archivo en kilobytes o megabytes, los usuarios pueden comprender más fácilmente la cantidad de datos que están manejando. Esto es particularmente útil cuando se trabaja con archivos grandes, donde el tamaño del archivo en bytes puede ser difícil de comprender.