Skip to content

InputFile Component

Description

The InputFile component allows users to upload files via a button-based interface. It supports: - File type validation (MIME types and extensions). - File size limit enforcement (default: 5MB). - Custom file input handling with a hidden input field. - Snackbar messages for validation feedback.

Props

Prop Type Default Description
onFileChange (e: React.ChangeEvent<HTMLInputElement>) => void - Callback triggered when a file is selected.
fileInputRef React.RefObject<HTMLInputElement | null> - Ref to access the file input element.
disabled boolean false Disables file selection.
accept string "" Specifies accepted file types (e.g., ".png,.jpg").

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { InputFile } from "@nomana-it/liberty-core"
import { useRef } from "react";

export const InputFileExample = () => {
  const fileInputRef = useRef<HTMLInputElement | null>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      alert(`Selected file: \${file.name}`);
    }
  };

  return (
    <InputFile
      onFileChange={handleFileChange}
      fileInputRef={fileInputRef}
      disabled={false}
      accept=".png,.jpg,.pdf"
    />
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core