Hook useDropup

Hook ຫຼັກສຳລັບການອັບໂຫຼດໄຟລ໌ພ້ອມການຮອງຮັບການລາກ ແລະວາງ.

ການນຳເຂົ້າ

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

ການນຳໃຊ້ພື້ນຖານ

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

ພາລາມິເຕີ

options (ເປັນທາງເລືອກ)

ເບິ່ງ ຕົວເລືອກ ສຳລັບລາຍລະອຽດເຕັມ.

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;

  // Callbacks
  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;
}

ຄ່າທີ່ສົ່ງຄືນ

ເບິ່ງ ຄ່າທີ່ສົ່ງຄືນ ສຳລັບລາຍລະອຽດເຕັມ.

interface UseDropupReturn {
  // ສະຖານະ
  files: DropupFile[];
  state: DropupState;

  // Actions
  actions: DropupActions;

  // Prop getters
  getDropProps: <E extends HTMLElement>(props?: HTMLAttributes<E>) => DropZoneProps<E>;
  getInputProps: (props?: InputHTMLAttributes) => InputProps;

  // ຕົວຊ່ວຍ
  openFileDialog: () => void;
}

ການອ້າງອີງໄວ

ອາເຣ Files

const { files } = useDropup();

// ແຕ່ລະໄຟລ໌ມີ:
files[0].id          // ID ທີ່ບໍ່ຊ້ຳກັນ
files[0].file        // ອອບເຈັກ File ດັ້ງເດີມ
files[0].name        // ຊື່ໄຟລ໌
files[0].size        // ຂະໜາດເປັນ bytes
files[0].type        // ປະເພດ MIME
files[0].preview     // URL ຕົວຢ່າງ (ຮູບພາບ)
files[0].status      // 'idle' | 'uploading' | 'complete' | 'error'
files[0].progress    // 0-100
files[0].uploadedUrl // URL ຫຼັງການອັບໂຫຼດ
files[0].error       // ຂໍ້ຜິດພາດຖ້າລົ້ມເຫຼວ

ອອບເຈັກ State

const { state } = useDropup();

state.isDragging     // ໄຟລ໌ກຳລັງຖືກລາກຜ່ານ
state.isDragAccept   // ໄຟລ໌ທີ່ລາກຖືກຕ້ອງ
state.isDragReject   // ໄຟລ໌ທີ່ລາກບໍ່ຖືກຕ້ອງ
state.isUploading    // ໄຟລ໌ໃດໜຶ່ງກຳລັງອັບໂຫຼດ
state.progress       // ຄວາມຄືບໜ້າໂດຍລວມ 0-100
state.status         // 'idle' | 'uploading' | 'complete' | 'error'

ອອບເຈັກ Actions

const { actions } = useDropup();

actions.upload(fileIds?)     // ເລີ່ມການອັບໂຫຼດ
actions.cancel(fileId?)      // ຍົກເລີກການອັບໂຫຼດ
actions.remove(fileId)       // ລຶບໄຟລ໌
actions.reset()              // ລ້າງທັງໝົດ
actions.retry(fileIds?)      // ລອງໃໝ່ທີ່ລົ້ມເຫຼວ
actions.addFiles(files)      // ເພີ່ມໄຟລ໌ດ້ວຍໂປຣແກຣມ
actions.updateFileMeta(id, meta)  // ອັບເດດ metadata

Prop Getters

const { getDropProps, getInputProps } = useDropup();

// ນຳໃຊ້ໃສ່ພື້ນທີ່ວາງຂອງທ່ານ
<div {...getDropProps()}>
  <input {...getInputProps()} />
  ວາງທີ່ນີ້
</div>

// ກັບ props ທີ່ກຳນົດເອງ
<div {...getDropProps({ className: 'my-dropzone', onClick: handleClick })}>
  ...
</div>

ຕົວຢ່າງ

ຕົວຢ່າງຂັ້ນຕ່ຳ

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

  return (
    <div {...getDropProps()}>
      <input {...getInputProps()} />
      <p>ວາງໄຟລ໌ທີ່ນີ້</p>
      <ul>
        {files.map(f => <li key={f.id}>{f.name}</li>)}
      </ul>
    </div>
  );
}

ກັບການອັບໂຫຼດ

function Uploader() {
  const { files, actions, getDropProps, getInputProps } = useDropup({
    upload: {
      url: '/api/upload',
      method: 'POST',
      headers: { 'Authorization': 'Bearer token' },
    },
  });

  return (
    <div>
      <div {...getDropProps()}>
        <input {...getInputProps()} />
        <p>ວາງໄຟລ໌ທີ່ນີ້</p>
      </div>

      {files.map(f => (
        <div key={f.id}>
          {f.name} - {f.status}
          {f.status === 'uploading' && ` ${f.progress}%`}
        </div>
      ))}

      <button onClick={() => actions.upload()}>ອັບໂຫຼດທັງໝົດ</button>
    </div>
  );
}

ກັບຕົວເລືອກທັງໝົດ

function FullFeaturedUploader() {
  const {
    files,
    state,
    actions,
    getDropProps,
    getInputProps,
  } = useDropup({
    // ການກວດສອບ
    accept: 'image/*',
    maxSize: 10 * 1024 * 1024,
    maxFiles: 5,

    // ພຶດຕິກຳ
    multiple: true,
    autoUpload: true,
    generatePreviews: true,

    // ການອັບໂຫຼດ
    upload: {
      url: '/api/upload',
      method: 'POST',
    },

    // Callbacks
    onFilesAdded: (files) => console.log('ເພີ່ມແລ້ວ:', files),
    onUploadComplete: (file) => console.log('ສຳເລັດ:', file.uploadedUrl),
    onUploadError: (file, err) => console.error('ຂໍ້ຜິດພາດ:', err),
    onAllComplete: () => console.log('ການອັບໂຫຼດທັງໝົດສຳເລັດ!'),
  });

  return (
    <div>
      <div
        {...getDropProps()}
        style={{
          border: `2px dashed ${state.isDragAccept ? 'green' : state.isDragReject ? 'red' : 'gray'}`,
          padding: 40,
        }}
      >
        <input {...getInputProps()} />
        <p>ວາງຮູບພາບທີ່ນີ້ (ສູງສຸດ 5, 10MB ຕໍ່ອັນ)</p>
      </div>

      {files.map(file => (
        <div key={file.id}>
          {file.preview && <img src={file.preview} width={50} />}
          <span>{file.name}</span>
          <span>{file.status}</span>
          {file.status === 'uploading' && <span>{file.progress}%</span>}
          <button onClick={() => actions.remove(file.id)}>×</button>
        </div>
      ))}

      {state.isUploading && <p>ກຳລັງອັບໂຫຼດ... {state.progress}%</p>}
    </div>
  );
}