Skip to main content

Files

It is a collection of hooks and helpers to simplify the work with files in c9z apps.


useCsvExporter​

Purpose​

  • Generate and download a new .csv file with the data you provide.

Usage​

const exportToCsv = useCsvExporter();

const data = [
  ["Name", "Age", "Email"],
  ["John Doe", 28, "john.doe@example.com"],
  ["Jane Smith", 34, "jane.smith@example.com"]
];

exportToCsv({ filename: "users", data });

Example​

import { useCsvExporter } from '@shared/files'

export const SuperComponent = () => {
  const exportToCsv = useCsvExporter()

  const downloadCSVTemplate = () => {
    exportToCsv({
      filename: 'Example_CSV',
      data: [
        ['group_name', 'group_parent'],
        ['grandchild', 'parent'],
        ['parent', 'grandparent'],
        ['grandparent', ''],
      ],
    })
  }

  return (
    <Button
      size="sm"
      variant="primary"
      appearance="ghost"
      width="min-content"
      onClick={downloadCSVTemplate}
    >
      {messages.downloadCSVTemplate}
    </Button>
  )
}


useFilePicker​

Purpose​

  • Custom hook to handle file selection

Usage​

  const { openFilePicker, selectedFiles, error } = useFilePicker({
    accept: '.pdf, .png, image/*',
  })

Example​

import { useFilePicker } from '@shared/files'

export const FileUploadComponent = () => {
  const { openFilePicker, selectedFiles, error } = useFilePicker({
    accept: '.csv',
    maxSize: 5000000, // Bytes
    validateFile: (file) => file.size >= 10,
  })

  return (
    <div>
      <button onClick={openFilePicker}>Select File</button>
      {error && <p>{error}</p>}
      {selectedFiles.length > 0 && (
        <ul>
          {selectedFiles.map((file) => (
            <li key={file.name}>{file.name}</li>
          ))}
        </ul>
      )}
    </div>
  )
}