मुख्य सामग्री पर जाएं

TypeScript टाइप्स

Dropup से निर्यात किए गए सभी टाइप्स।

टाइप्स आयात करें​

import type {
  DropupFile,
  DropupState,
  DropupActions,
  DropupError,
  UseDropupOptions,
  UseDropupReturn,
  FileStatus,
  DropupStatus,
  ValidationRule,
  ValidationError,
  UploadConfig,
  CustomUploader,
  UploadOptions,
  UploadResult,
} from '@samithahansaka/dropup';

मुख्य टाइप्स​

DropupFile​

अपलोड कतार में एक फाइल का प्रतिनिधित्व करता है।

interface DropupFile {
  /** अद्वितीय पहचानकर्ता */
  id: string;

  /** मूल ब्राउज़र File ऑब्जेक्ट */
  file: File;

  /** फाइल का नाम */
  name: string;

  /** बाइट्स में फाइल आकार */
  size: number;

  /** MIME प्रकार */
  type: string;

  /** वर्तमान अपलोड स्थिति */
  status: FileStatus;

  /** अपलोड प्रगति 0-100 */
  progress: number;

  /** छवियों के लिए प्रीव्यू URL (Object URL) */
  preview?: string;

  /** सफल अपलोड के बाद URL */
  uploadedUrl?: string;

  /** कच्ची सर्वर प्रतिक्रिया */
  response?: unknown;

  /** विफल होने पर त्रुटि विवरण */
  error?: DropupError;

  /** कस्टम मेटाडेटा */
  meta?: Record<string, unknown>;
}

FileStatus​

संभावित फाइल स्थिति मान।

type FileStatus = 'idle' | 'uploading' | 'complete' | 'error' | 'paused';

DropupState​

ड्रॉपजोन की वर्तमान स्थिति।

interface DropupState {
  /** फाइलें ड्रैग की जा रही हैं */
  isDragging: boolean;

  /** ड्रैग की गई फाइलें सत्यापन पास करती हैं */
  isDragAccept: boolean;

  /** ड्रैग की गई फाइलें सत्यापन में विफल */
  isDragReject: boolean;

  /** कोई फाइल वर्तमान में अपलोड हो रही है */
  isUploading: boolean;

  /** सभी फाइलों की औसत प्रगति (0-100) */
  progress: number;

  /** समग्र स्थिति */
  status: DropupStatus;
}

DropupStatus​

समग्र अपलोड स्थिति।

type DropupStatus = 'idle' | 'uploading' | 'complete' | 'error';

DropupActions​

अपलोडर को नियंत्रित करने के लिए उपलब्ध क्रियाएं।

interface DropupActions {
  /** फाइलें अपलोड शुरू करें */
  upload: (fileIds?: string[]) => void;

  /** अपलोड रद्द करें */
  cancel: (fileId?: string) => void;

  /** एक फाइल हटाएं */
  remove: (fileId: string) => void;

  /** सभी फाइलें हटाएं और स्टेट रीसेट करें */
  reset: () => void;

  /** विफल अपलोड पुनः प्रयास करें */
  retry: (fileIds?: string[]) => void;

  /** प्रोग्रामेटिकली फाइलें जोड़ें */
  addFiles: (files: File[] | FileList) => void;

  /** फाइल मेटाडेटा अपडेट करें */
  updateFileMeta: (fileId: string, meta: Record<string, unknown>) => void;
}

DropupError​

विफल अपलोड के लिए Error ऑब्जेक्ट।

interface DropupError {
  /** त्रुटि कोड */
  code: string;

  /** मानव-पठनीय संदेश */
  message: string;

  /** उपलब्ध होने पर मूल त्रुटि */
  cause?: Error;
}

विकल्प टाइप्स​

UseDropupOptions​

हुक के लिए कॉन्फ़िगरेशन विकल्प।

interface UseDropupOptions {
  // सत्यापन
  accept?: string | string[];
  maxSize?: number;
  minSize?: number;
  maxFiles?: number;
  maxWidth?: number;
  maxHeight?: number;
  minWidth?: number;
  minHeight?: number;
  customRules?: ValidationRule[];

  // व्यवहार
  multiple?: boolean;
  disabled?: boolean;
  autoUpload?: boolean;
  generatePreviews?: boolean;

  // अपलोड
  upload?: UploadConfig | CustomUploader;

  // कॉलबैक
  onFilesAdded?: (files: DropupFile[]) => void;
  onFileRemoved?: (file: DropupFile) => void;
  onValidationError?: (errors: ValidationError[]) => void;
  onUploadStart?: (file: DropupFile) => void;
  onUploadProgress?: (file: DropupFile, progress: number) => void;
  onUploadComplete?: (file: DropupFile, response: unknown) => void;
  onUploadError?: (file: DropupFile, error: DropupError) => void;
  onAllComplete?: (files: DropupFile[]) => void;
}

UploadConfig​

URL-आधारित अपलोड कॉन्फ़िगरेशन।

interface UploadConfig {
  /** अपलोड एंडपॉइंट URL */
  url: string;

  /** HTTP मेथड */
  method?: 'POST' | 'PUT' | 'PATCH';

  /** रिक्वेस्ट हेडर्स */
  headers?: Record<string, string>;

  /** फाइल के लिए फॉर्म फील्ड नाम */
  fieldName?: string;

  /** क्रेडेंशियल्स/कुकीज़ शामिल करें */
  withCredentials?: boolean;

  /** मिलीसेकंड में रिक्वेस्ट टाइमआउट */
  timeout?: number;

  /** अतिरिक्त फॉर्म डेटा */
  data?: Record<string, unknown>;
}

CustomUploader​

कस्टम अपलोड फंक्शन प्रकार।

type CustomUploader = (
  file: DropupFile,
  options: UploadOptions
) => Promise<UploadResult>;

UploadOptions​

कस्टम अपलोडर को पास किए गए विकल्प।

interface UploadOptions {
  /** रद्द करने के लिए Abort signal */
  signal: AbortSignal;

  /** प्रगति कॉलबैक */
  onProgress: (progress: number) => void;
}

UploadResult​

अपलोड से लौटाया गया परिणाम।

interface UploadResult {
  /** अपलोड की गई फाइल URL */
  url?: string;

  /** कच्ची सर्वर प्रतिक्रिया */
  response?: unknown;
}

सत्यापन टाइप्स​

ValidationRule​

कस्टम सत्यापन फंक्शन।

type ValidationRule = (file: File) =>
  | boolean
  | string
  | Promise<boolean | string>;

रिटर्न वैल्यूज:

  • true - सत्यापन पास
  • false - सत्यापन विफल (सामान्य त्रुटि)
  • string - कस्टम संदेश के साथ सत्यापन विफल

ValidationError​

एक फाइल के लिए सत्यापन त्रुटि।

interface ValidationError {
  /** सत्यापन में विफल फाइल */
  file: File;

  /** त्रुटि संदेशों की सरणी */
  errors: string[];
}

रिटर्न टाइप्स​

UseDropupReturn​

हुक का पूर्ण रिटर्न प्रकार।

interface UseDropupReturn {
  /** फाइलों की सरणी */
  files: DropupFile[];

  /** वर्तमान स्थिति */
  state: DropupState;

  /** उपलब्ध क्रियाएं */
  actions: DropupActions;

  /** ड्रॉप जोन के लिए Props गेटर */
  getDropProps: <E extends HTMLElement = HTMLDivElement>(
    props?: React.HTMLAttributes<E>
  ) => DropZoneProps<E>;

  /** इनपुट एलिमेंट के लिए Props गेटर */
  getInputProps: (
    props?: React.InputHTMLAttributes<HTMLInputElement>
  ) => InputProps;

  /** प्रोग्रामेटिकली फाइल डायलॉग खोलें */
  openFileDialog: () => void;
}

DropZoneProps​

getDropProps द्वारा लौटाए गए Props।

interface DropZoneProps<E extends HTMLElement>
  extends React.HTMLAttributes<E> {
  onDragEnter: React.DragEventHandler<E>;
  onDragOver: React.DragEventHandler<E>;
  onDragLeave: React.DragEventHandler<E>;
  onDrop: React.DragEventHandler<E>;
  onClick: React.MouseEventHandler<E>;
  role: string;
  tabIndex: number;
}

InputProps​

getInputProps द्वारा लौटाए गए Props।

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  type: 'file';
  accept?: string;
  multiple?: boolean;
  onChange: React.ChangeEventHandler<HTMLInputElement>;
  style: React.CSSProperties;
}

क्लाउड टाइप्स​

S3UploaderConfig​

S3 अपलोडर के लिए कॉन्फ़िगरेशन।

interface S3UploaderConfig {
  getPresignedUrl: (file: DropupFile) => Promise<PresignedUrlResponse>;
}

interface PresignedUrlResponse {
  url: string;
  fields?: Record<string, string>;
}

GCSUploaderConfig​

Google Cloud Storage अपलोडर के लिए कॉन्फ़िगरेशन।

interface GCSUploaderConfig {
  getSignedUrl: (file: DropupFile) => Promise<SignedUrlResponse>;
}

interface SignedUrlResponse {
  url: string;
  headers?: Record<string, string>;
}

AzureUploaderConfig​

Azure Blob Storage अपलोडर के लिए कॉन्फ़िगरेशन।

interface AzureUploaderConfig {
  getSasUrl: (file: DropupFile) => Promise<SasUrlResponse>;
}

interface SasUrlResponse {
  url: string;
  headers?: Record<string, string>;
}

खंडित अपलोड टाइप्स​

ChunkedUploaderConfig​

खंडित अपलोड के लिए कॉन्फ़िगरेशन।

interface ChunkedUploaderConfig {
  /** अपलोड एंडपॉइंट URL */
  url: string;

  /** बाइट्स में खंड आकार (डिफ़ॉल्ट: 5MB) */
  chunkSize?: number;

  /** अधिकतम समवर्ती खंड */
  concurrency?: number;

  /** रिक्वेस्ट हेडर्स */
  headers?: Record<string, string>;
}

छवि प्रसंस्करण टाइप्स​

CompressOptions​

छवि संपीड़न विकल्प।

interface CompressOptions {
  /** अधिकतम चौड़ाई */
  maxWidth?: number;

  /** अधिकतम ऊंचाई */
  maxHeight?: number;

  /** गुणवत्ता 0-1 (डिफ़ॉल्ट: 0.8) */
  quality?: number;

  /** आउटपुट फॉर्मैट */
  type?: 'image/jpeg' | 'image/png' | 'image/webp';
}

टाइप उपयोगिताएं​

जेनेरिक टाइप्स​

// फाइल स्थिति निकालें
type IdleFile = DropupFile & { status: 'idle' };
type UploadingFile = DropupFile & { status: 'uploading' };
type CompletedFile = DropupFile & { status: 'complete' };
type FailedFile = DropupFile & { status: 'error' };

// टाइप गार्ड फंक्शन
function isIdle(file: DropupFile): file is IdleFile {
  return file.status === 'idle';
}

function isUploading(file: DropupFile): file is UploadingFile {
  return file.status === 'uploading';
}

function isComplete(file: DropupFile): file is CompletedFile {
  return file.status === 'complete';
}

function isFailed(file: DropupFile): file is FailedFile {
  return file.status === 'error';
}

टाइप गार्ड्स के साथ उपयोग​

const { files } = useDropup();

// टाइप सेफ्टी के साथ फ़िल्टर करें
const uploadingFiles = files.filter(isUploading);
// uploadingFiles है UploadingFile[]

const completedFiles = files.filter(isComplete);
// completedFiles है CompletedFile[]