I wrote a quick thing that kinda mimicks this

// filetypes(other than images) to readable format, you can expand this 
const fileTypes = {
  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX",
  "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
    "DOCX",
  "application/vnd.ms-excel": "XLS",
  "application/pdf": "PDF",
  "application/octet-stream": "RAW",
  "application/vnd.ms-excel.sheet.macroenabled.12": "XLSM",
  "application/vnd.ms-excel.template.macroenabled.12": "XLSM",
  "application/vnd.ms-excel.addin.macroenabled.12": "XLSM",
  "application/vnd.ms-excel.sheet.binary.macroenabled.12": "XLSB",
  "application/vnd.ms-excel.template.binary.macroenabled.12": "XLSB",
};

...

<div className="size-16 relative rounded-md bg-gray-100 flex items-center justify-center">
    <div className="relative">
      <FileIcon className="size-8" />
      <div className="absolute bottom-0 -right-2 font-semibold bg-gray-100 text-black text-[10px] px-1 rounded-sm">
        {/* if there is a file type, show it otherwise show nothing */}
        {fileTypes[file.type as keyof typeof fileTypes]
          ? fileTypes[file.type as keyof typeof fileTypes]
          : ""}
      </div>
    </div>
  </div>

result

Icon Request: PDF File #321

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions