ComponentPrivacy First

Masked Aadhaar Upload

A secure file upload component for masked Aadhaar cards. Features drag-and-drop support, automatic validation, privacy-focused preview with blur toggle, and support for images (JPG, PNG, WebP) and PDFs.

Installation

npx kesp-ui@latest add masked-aadhaar-upload

Or specify a custom path: npx kesp-ui@latest add masked-aadhaar-upload -p src/components/ui

Preview

Interactive

Default (Uncontrolled)

Upload Masked Aadhaar

Click or drag to upload

JPG, PNG, WebP or PDF · Max 5MB

Upload a masked Aadhaar card image (number partially hidden) max 5MB

Controlled Mode

Upload Masked Aadhaar

Click or drag to upload

JPG, PNG, WebP or PDF · Max 5MB

Upload a masked Aadhaar card image (number partially hidden) max 5MB

Custom Max Size (2MB)

Upload Document (Max 2MB)

Click or drag to upload

JPG, PNG, WebP or PDF · Max 2MB

Upload a masked Aadhaar card image (number partially hidden) max 2MB

Custom Label

आधार कार्ड अपलोड करें (मास्क किया हुआ)

Click or drag to upload

JPG, PNG, WebP or PDF · Max 5MB

Upload a masked Aadhaar card image (number partially hidden) max 5MB

Usage

Basic Usage (Uncontrolled)

import MaskedAadhaarUpload from "@/components/ui/masked-aadhaar-upload"

function MyForm() {
  const handleFileSelect = (file: File | null) => {
    if (file) {
      console.log("File selected:", file.name)
      // Upload to your backend
      uploadToServer(file)
    }
  }

  return (
    <MaskedAadhaarUpload onFileSelect={handleFileSelect} />
  )
}

Controlled Mode

import MaskedAadhaarUpload from "@/components/ui/masked-aadhaar-upload"

function ControlledForm() {
  const [file, setFile] = useState<File | null>(null)

  const handleSubmit = async (): Promise<void> => {
    if (!file) return
    
    const formData = new FormData()
    formData.append("aadhaar", file)
    
    await fetch("/api/upload", {
      method: "POST",
      body: formData
    })
  }

  return (
    <div>
      <MaskedAadhaarUpload
        value={file}
        onChange={setFile}
      />
      <button onClick={handleSubmit}>Submit</button>
      <button onClick={() => setFile(null)}>Clear</button>
    </div>
  )
}

With Custom Validation

import MaskedAadhaarUpload from "@/components/ui/masked-aadhaar-upload"

function ValidatedUpload() {
  const [file, setFile] = useState<File | null>(null)
  const [validationError, setValidationError] = useState<string>("")

  const handleFileChange = (newFile: File | null): void => {
    setFile(newFile)
    
    if (newFile) {
      // Custom validation
      if (!newFile.type.startsWith("image/")) {
        setValidationError("Please upload an image file")
        return
      }
      
      setValidationError("")
      // Process the file
      processFile(newFile)
    }
  }

  return (
    <div>
      <MaskedAadhaarUpload
        value={file}
        onChange={handleFileChange}
        maxSizeMB={10}
      />
      {validationError && (
        <p className="text-red-500 text-xs mt-1">{validationError}</p>
      )}
    </div>
  )
}

Custom Size Limit

<MaskedAadhaarUpload
  maxSizeMB={2}
  label="Upload Masked Aadhaar (Max 2MB)"
  onFileSelect={(file: File | null) => {
    if (file) uploadFile(file)
  }}
/>

Security Features

Privacy-First Preview

Uploaded images are blurred by default with a shield icon overlay. Users can toggle visibility with the eye icon, ensuring sensitive information stays protected during upload.

File Validation

Automatically validates file type (JPG, PNG, WebP, PDF) and size. Shows clear error messages when validation fails, with customizable size limits.

Drag & Drop

Full drag-and-drop support with visual feedback. The upload area highlights when a file is dragged over, making it easy and intuitive for users.

File Handling

The component accepts the following file formats:

Images: JPEG (.jpg, .jpeg), PNG (.png), WebP (.webp)
Documents: PDF (.pdf)

Default maximum file size: 5MB (configurable via maxSizeMB prop)

Props

Prop	Type	Default	Description
`value`	File \| null	`undefined`	Controlled value for the uploaded file
`onChange`	(file: File \| null) => void	`undefined`	Called when file changes in controlled mode
`defaultValue`	File	`undefined`	Initial file in uncontrolled mode
`onFileSelect`	(file: File \| null) => void	`undefined`	Called when file is selected or removed
`label`	string	`"Upload Masked Aadhaar"`	Label text above the upload area
`maxSizeMB`	number	`5`	Maximum file size in megabytes
`className`	string	`""`	Additional CSS classes on the wrapper

valueFile | null

Default:undefined

Controlled value for the uploaded file

onChange(file: File | null) => void

Default:undefined

Called when file changes in controlled mode

defaultValueFile

Default:undefined

Initial file in uncontrolled mode

onFileSelect(file: File | null) => void

Default:undefined

Called when file is selected or removed

labelstring

Default:"Upload Masked Aadhaar"

Label text above the upload area

maxSizeMBnumber

Default:5

Maximum file size in megabytes

classNamestring

Default:""

Additional CSS classes on the wrapper

Controlled vs Uncontrolled

Uncontrolled Mode

Component manages its own state internally. Use onFileSelect to get notified when files change.

<MaskedAadhaarUpload
  onFileSelect={(file: File | null) => console.log(file)}
/>

Controlled Mode

Parent component controls the state. Use value and onChange props for full control.

const [file, setFile] = useState<File | null>(null)

<MaskedAadhaarUpload
  value={file}
  onChange={setFile}
/>

CLI Reference

Install component

npx kesp-ui@latest add masked-aadhaar-upload

Custom path

npx kesp-ui@latest add masked-aadhaar-upload -p src/components/ui

List components

npx kesp-ui@latest list

Check version

npx kesp-ui --version

Help

npx kesp-ui --help