TypeScript வழிகாட்டி

Dropup TypeScript இல் எழுதப்பட்டது மற்றும் விரிவான வகை வரையறைகளை வழங்குகிறது.

அடிப்படை பயன்பாடு

import { useDropup } from '@samithahansaka/dropup';
import type { DropupFile, UseDropupOptions } from '@samithahansaka/dropup';

function Uploader() {
  const { files, actions, state } = useDropup({
    accept: 'image/*',
    maxSize: 10 * 1024 * 1024,
  });

  // files என்பது DropupFile[]
  // actions என்பது DropupActions
  // state என்பது DropupState

  return (
    // ...
  );
}

வகைகளை இறக்குமதி செய்தல்

import type {
  // முக்கிய வகைகள்
  DropupFile,
  DropupState,
  DropupActions,
  DropupError,

  // விருப்பங்கள் & கட்டமைப்பு
  UseDropupOptions,
  UploadConfig,
  CustomUploader,
  ValidationRule,

  // நிலை வகைகள்
  FileStatus,
  DropupStatus,

  // திரும்ப வகை
  UseDropupReturn,

  // சரிபார்ப்பு
  ValidationError,
} from '@samithahansaka/dropup';

வகைப்படுத்தப்பட்ட விருப்பங்கள்

const options: UseDropupOptions = {
  accept: ['image/*', 'application/pdf'],
  maxSize: 10 * 1024 * 1024,
  maxFiles: 5,

  upload: {
    url: '/api/upload',
    method: 'POST',
    headers: {
      'Authorization': 'Bearer token',
    },
  },

  onFilesAdded: (files: DropupFile[]) => {
    console.log('சேர்க்கப்பட்டது:', files);
  },

  onUploadComplete: (file: DropupFile, response: unknown) => {
    console.log('முடிந்தது:', file.uploadedUrl);
  },

  customRules: [
    (file: File): boolean | string => {
      if (file.name.length > 100) {
        return 'கோப்பு பெயர் மிக நீளமானது';
      }
      return true;
    },
  ],
};

const { files, actions, state } = useDropup(options);

வகை-பாதுகாப்பான கால்பேக்குகள்

import type { DropupFile, DropupError, ValidationError } from '@samithahansaka/dropup';

const options: UseDropupOptions = {
  onFilesAdded: (files: DropupFile[]) => {
    files.forEach(file => {
      console.log(file.id);     // string
      console.log(file.name);   // string
      console.log(file.size);   // number
      console.log(file.status); // FileStatus
    });
  },

  onValidationError: (errors: ValidationError[]) => {
    errors.forEach(({ file, errors }) => {
      console.log(file.name);   // File.name
      console.log(errors);      // string[]
    });
  },

  onUploadError: (file: DropupFile, error: DropupError) => {
    console.log(error.code);    // string
    console.log(error.message); // string
    console.log(error.cause);   // Error | undefined
  },
};

தனிப்பயன் பதிவேற்றி வகை

import type { CustomUploader, UploadOptions, UploadResult } from '@samithahansaka/dropup';

const myUploader: CustomUploader = async (
  file,    // DropupFile
  options  // UploadOptions
): Promise<UploadResult> => {
  const { signal, onProgress } = options;

  // பதிவேற்ற தர்க்கம் இங்கே...
  onProgress(50);

  return {
    url: 'https://example.com/uploaded-file',
    response: { id: '123' },
  };
};

useDropup({
  upload: myUploader,
});

சரிபார்ப்பு விதிகள் வகை

import type { ValidationRule } from '@samithahansaka/dropup';

// ஒத்திசைவு விதி
const checkFilename: ValidationRule = (file: File) => {
  if (file.name.includes('draft')) {
    return 'வரைவு கோப்புகள் அனுமதிக்கப்படவில்லை';
  }
  return true;
};

// அசின்க் விதி
const checkServer: ValidationRule = async (file: File) => {
  const exists = await fetch(`/api/check?name=${file.name}`);
  if (await exists.json()) {
    return 'கோப்பு ஏற்கனவே உள்ளது';
  }
  return true;
};

useDropup({
  customRules: [checkFilename, checkServer],
});

பொதுவான விடு மண்டல Props

import { useDropup } from '@samithahansaka/dropup';

function TypedDropZone() {
  const { getDropProps, getInputProps } = useDropup();

  // getDropProps க்கு உறுப்பு வகையை குறிப்பிடவும்
  const dropProps = getDropProps<HTMLDivElement>({
    className: 'dropzone',
    'data-testid': 'upload-zone',
  });

  return (
    <div {...dropProps}>
      <input {...getInputProps()} />
    </div>
  );
}

கோப்பு நிலை வகை காவலர்கள்

import type { DropupFile, FileStatus } from '@samithahansaka/dropup';

// வகை காவலர் செயல்பாடுகள்
function isUploading(file: DropupFile): file is DropupFile & { status: 'uploading' } {
  return file.status === 'uploading';
}

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

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

// பயன்பாடு
function FileList({ files }: { files: DropupFile[] }) {
  const uploading = files.filter(isUploading);
  const completed = files.filter(isComplete);
  const failed = files.filter(hasError);

  return (
    <>
      {uploading.map(file => (
        <div key={file.id}>
          {file.name} - {file.progress}%
        </div>
      ))}
    </>
  );
}

DropupFile மெட்டாடேட்டாவை நீட்டித்தல்

import type { DropupFile } from '@samithahansaka/dropup';

// உங்கள் மெட்டாடேட்டா வகையை வரையறுக்கவும்
interface CustomMeta {
  category: string;
  tags: string[];
  description?: string;
}

// வகை உறுதிப்படுத்தலுடன் பயன்படுத்தவும்
const { files, actions } = useDropup();

// வகைப்படுத்தப்பட்ட மெட்டாடேட்டாவுடன் புதுப்பிக்கவும்
actions.updateFileMeta(files[0].id, {
  category: 'documents',
  tags: ['important', 'work'],
} as CustomMeta);

// வகை உறுதிப்படுத்தலுடன் அணுகவும்
const meta = files[0].meta as CustomMeta | undefined;
console.log(meta?.category);

Dropup உடன் கூறு Props

import type { DropupFile, DropupState, DropupActions } from '@samithahansaka/dropup';

interface UploaderProps {
  onUploadComplete?: (files: DropupFile[]) => void;
  maxFiles?: number;
  accept?: string | string[];
}

function Uploader({ onUploadComplete, maxFiles, accept }: UploaderProps) {
  const { files, state, actions, getDropProps, getInputProps } = useDropup({
    maxFiles,
    accept,
    onAllComplete: onUploadComplete,
  });

  return (
    // ...
  );
}

// கோப்பு முன்னோட்ட கூறு
interface FilePreviewProps {
  file: DropupFile;
  onRemove: (id: string) => void;
}

function FilePreview({ file, onRemove }: FilePreviewProps) {
  return (
    <div>
      <span>{file.name}</span>
      <span>{file.status}</span>
      <button onClick={() => onRemove(file.id)}>நீக்கு</button>
    </div>
  );
}

கிளவுட் பதிவேற்றி வகைகள்

import { createS3Uploader } from '@samithahansaka/dropup/cloud/s3';
import type { DropupFile } from '@samithahansaka/dropup';

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

const s3Uploader = createS3Uploader({
  getPresignedUrl: async (file: DropupFile): Promise<PresignedUrlResponse> => {
    const response = await fetch('/api/presign', {
      method: 'POST',
      body: JSON.stringify({
        filename: file.name,
        contentType: file.type,
      }),
    });
    return response.json();
  },
});

கடுமையான பயன்முறை கட்டமைப்பு

அதிகபட்ச வகை பாதுகாப்புக்கு:

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUncheckedIndexedAccess": true
  }
}

அறிவிப்பு கோப்புகள்

Dropup வகைகளை நீட்டிக்க வேண்டுமானால்:

// types/dropup.d.ts
import '@samithahansaka/dropup';

declare module '@samithahansaka/dropup' {
  interface DropupFile {
    // தனிப்பயன் பண்புகளைச் சேர்க்கவும்
    customField?: string;
  }
}

React கூறு வகைகள்

import type { ReactNode, CSSProperties } from 'react';
import type { UseDropupReturn } from '@samithahansaka/dropup';

interface DropZoneProps {
  children?: ReactNode;
  style?: CSSProperties;
  className?: string;
  dropup: UseDropupReturn;
}

function DropZone({ children, style, className, dropup }: DropZoneProps) {
  const { getDropProps, getInputProps, state } = dropup;

  return (
    <div
      {...getDropProps({ style, className })}
      data-dragging={state.isDragging}
    >
      <input {...getInputProps()} />
      {children}
    </div>
  );
}