ການອ້າງອີງຄ່າທີ່ສົ່ງຄືນ

ທຸກຢ່າງທີ່ສົ່ງຄືນໂດຍ hook useDropup.

ພາບລວມ

const {
  files,          // ອາເຣຂອງອອບເຈັກໄຟລ໌
  state,          // ສະຖານະປັດຈຸບັນ
  actions,        // Actions ທີ່ມີຢູ່
  getDropProps,   // Props ສຳລັບພື້ນທີ່ວາງ
  getInputProps,  // Props ສຳລັບອົງປະກອບ input
  openFileDialog, // ເປີດຕົວເລືອກໄຟລ໌
} = useDropup();

files

ອາເຣຂອງອອບເຈັກ DropupFile ທີ່ເປັນຕົວແທນຂອງໄຟລ໌ທີ່ຖືກເພີ່ມທັງໝົດ.

const { files } = useDropup();

files.forEach(file => {
  console.log(file.id);          // "abc123"
  console.log(file.name);        // "photo.jpg"
  console.log(file.size);        // 1234567
  console.log(file.type);        // "image/jpeg"
  console.log(file.status);      // "idle" | "uploading" | "complete" | "error"
  console.log(file.progress);    // 0-100
  console.log(file.preview);     // "blob:http://..." (ຮູບພາບເທົ່ານັ້ນ)
  console.log(file.uploadedUrl); // "https://..." (ຫຼັງການອັບໂຫຼດ)
  console.log(file.error);       // DropupError (ຖ້າລົ້ມເຫຼວ)
});

ຄຸນສົມບັດ DropupFile

ຄຸນສົມບັດ	ປະເພດ	ຄຳອະທິບາຍ
id	string	ຕົວລະບຸທີ່ບໍ່ຊ້ຳກັນ
file	File	ອອບເຈັກ File ດັ້ງເດີມຂອງບຣາວເຊີ
name	string	ຊື່ໄຟລ໌
size	number	ຂະໜາດເປັນ bytes
type	string	ປະເພດ MIME
status	FileStatus	ສະຖານະປັດຈຸບັນ
progress	number	ຄວາມຄືບໜ້າການອັບໂຫຼດ (0-100)
preview	string | undefined	URL ຕົວຢ່າງສຳລັບຮູບພາບ
uploadedUrl	string | undefined	URL ຫຼັງການອັບໂຫຼດສຳເລັດ
response	unknown	ຂໍ້ມູນການຕອບກັບຈາກເຊີບເວີ
error	DropupError | undefined	ຂໍ້ຜິດພາດຖ້າການອັບໂຫຼດລົ້ມເຫຼວ
meta	Record<string, unknown>	Metadata ທີ່ກຳນົດເອງ

ຄ່າ FileStatus

ສະຖານະ	ຄຳອະທິບາຍ
'idle'	ເພີ່ມໄຟລ໌ແລ້ວ, ບໍ່ໄດ້ອັບໂຫຼດ
'uploading'	ການອັບໂຫຼດກຳລັງດຳເນີນ
'complete'	ອັບໂຫຼດສຳເລັດ
'error'	ອັບໂຫຼດລົ້ມເຫຼວ
'paused'	ຢຸດການອັບໂຫຼດຊົ່ວຄາວ (ການອັບໂຫຼດທີ່ສາມາດສືບຕໍ່ໄດ້)

state

ສະຖານະປັດຈຸບັນຂອງ dropzone.

const { state } = useDropup();

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

ຄຸນສົມບັດ State

ຄຸນສົມບັດ	ປະເພດ	ຄຳອະທິບາຍ
isDragging	boolean	ໄຟລ໌ກຳລັງຖືກລາກຜ່ານພື້ນທີ່ວາງ
isDragAccept	boolean	ໄຟລ໌ທີ່ລາກຜ່ານການກວດສອບ
isDragReject	boolean	ໄຟລ໌ທີ່ລາກການກວດສອບລົ້ມເຫຼວ
isUploading	boolean	ໄຟລ໌ໃດໜຶ່ງກຳລັງອັບໂຫຼດ
progress	number	ຄວາມຄືບໜ້າສະເລ່ຍຂອງໄຟລ໌ທັງໝົດ (0-100)
status	DropupStatus	ສະຖານະການອັບໂຫຼດໂດຍລວມ

ຄ່າ DropupStatus

ສະຖານະ	ຄຳອະທິບາຍ
'idle'	ບໍ່ມີການອັບໂຫຼດກຳລັງດຳເນີນ
'uploading'	ໜຶ່ງ ຫຼືຫຼາຍໄຟລ໌ກຳລັງອັບໂຫຼດ
'complete'	ການອັບໂຫຼດທັງໝົດສຳເລັດ
'error'	ໜຶ່ງ ຫຼືຫຼາຍການອັບໂຫຼດລົ້ມເຫຼວ

actions

ອອບເຈັກທີ່ມີ actions ທັງໝົດທີ່ມີຢູ່.

const { actions } = useDropup();

// ເລີ່ມການອັບໂຫຼດ
actions.upload();              // ອັບໂຫຼດໄຟລ໌ idle ທັງໝົດ
actions.upload(['id1', 'id2']); // ອັບໂຫຼດໄຟລ໌ສະເພາະ

// ຍົກເລີກການອັບໂຫຼດ
actions.cancel();              // ຍົກເລີກການອັບໂຫຼດທັງໝົດ
actions.cancel('file-id');     // ຍົກເລີກໄຟລ໌ສະເພາະ

// ລຶບໄຟລ໌
actions.remove('file-id');     // ລຶບໄຟລ໌ສະເພາະ
actions.reset();               // ລຶບໄຟລ໌ທັງໝົດ

// ລອງໃໝ່ການອັບໂຫຼດທີ່ລົ້ມເຫຼວ
actions.retry();               // ລອງໃໝ່ທັງໝົດທີ່ລົ້ມເຫຼວ
actions.retry(['id1']);        // ລອງໃໝ່ໄຟລ໌ສະເພາະ

// ເພີ່ມໄຟລ໌ດ້ວຍໂປຣແກຣມ
actions.addFiles(fileList);    // ເພີ່ມ File[] ຫຼື FileList

// ອັບເດດ metadata ໄຟລ໌
actions.updateFileMeta('file-id', { tag: 'important' });

ເມທອດ Action

upload(fileIds?)

ເລີ່ມການອັບໂຫຼດໄຟລ໌.

// ອັບໂຫຼດໄຟລ໌ idle ທັງໝົດ
actions.upload();

// ອັບໂຫຼດໄຟລ໌ສະເພາະ
actions.upload(['file-id-1', 'file-id-2']);

ພາລາມິເຕີ	ປະເພດ	ຄຳອະທິບາຍ
fileIds	string[] (ເປັນທາງເລືອກ)	ID ໄຟລ໌ສະເພາະທີ່ຈະອັບໂຫຼດ

cancel(fileId?)

ຍົກເລີກການອັບໂຫຼດທີ່ກຳລັງດຳເນີນຢູ່.

// ຍົກເລີກການອັບໂຫຼດທັງໝົດ
actions.cancel();

// ຍົກເລີກໄຟລ໌ສະເພາະ
actions.cancel('file-id');

ພາລາມິເຕີ	ປະເພດ	ຄຳອະທິບາຍ
fileId	string (ເປັນທາງເລືອກ)	ID ໄຟລ໌ສະເພາະທີ່ຈະຍົກເລີກ

remove(fileId)

ລຶບໄຟລ໌ອອກຈາກລາຍການ.

actions.remove('file-id');

ພາລາມິເຕີ	ປະເພດ	ຄຳອະທິບາຍ
fileId	string	ID ໄຟລ໌ທີ່ຈະລຶບ

reset()

ລຶບໄຟລ໌ທັງໝົດ ແລະຣີເຊັດສະຖານະ.

actions.reset();

retry(fileIds?)

ລອງໃໝ່ການອັບໂຫຼດທີ່ລົ້ມເຫຼວ.

// ລອງໃໝ່ການອັບໂຫຼດທີ່ລົ້ມເຫຼວທັງໝົດ
actions.retry();

// ລອງໃໝ່ໄຟລ໌ສະເພາະ
actions.retry(['file-id-1']);

ພາລາມິເຕີ	ປະເພດ	ຄຳອະທິບາຍ
fileIds	string[] (ເປັນທາງເລືອກ)	ID ໄຟລ໌ສະເພາະທີ່ຈະລອງໃໝ່

addFiles(files)

ເພີ່ມໄຟລ໌ດ້ວຍໂປຣແກຣມ.

// ຈາກ clipboard
document.addEventListener('paste', (e) => {
  const files = e.clipboardData?.files;
  if (files) {
    actions.addFiles(files);
  }
});

// ຈາກແຫຼ່ງອື່ນ
actions.addFiles([file1, file2]);

ພາລາມິເຕີ	ປະເພດ	ຄຳອະທິບາຍ
files	File[] | FileList	ໄຟລ໌ທີ່ຈະເພີ່ມ

updateFileMeta(fileId, meta)

ອັບເດດ metadata ໄຟລ໌.

actions.updateFileMeta('file-id', {
  description: 'ຮູບຂອງຂ້ອຍ',
  tags: ['vacation', '2024'],
});

ພາລາມິເຕີ	ປະເພດ	ຄຳອະທິບາຍ
fileId	string	ID ໄຟລ໌ທີ່ຈະອັບເດດ
meta	Record<string, unknown>	Metadata ທີ່ຈະລວມ

getDropProps

ສົ່ງຄືນ props ທີ່ຈະ spread ໃສ່ອົງປະກອບພື້ນທີ່ວາງ.

const { getDropProps, getInputProps } = useDropup();

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

ກັບ Props ທີ່ກຳນົດເອງ

<div
  {...getDropProps({
    className: 'my-dropzone',
    onClick: (e) => {
      // ຕົວຈັດການຄລິກທີ່ກຳນົດເອງຂອງທ່ານ
      console.log('ຄລິກແລ້ວ!');
    },
  })}
>
  <input {...getInputProps()} />
</div>

Props ທີ່ສົ່ງຄືນ

ຄຸນສົມບັດ	ປະເພດ	ຄຳອະທິບາຍ
onDragEnter	function	ຕົວຈັດການ drag enter
onDragOver	function	ຕົວຈັດການ drag over
onDragLeave	function	ຕົວຈັດການ drag leave
onDrop	function	ຕົວຈັດການ drop
onClick	function	ຕົວຈັດການຄລິກ (ເປີດ dialog)
role	string	ບົດບາດສຳລັບ accessibility
tabIndex	number	Tab index ສຳລັບ focus

getInputProps

ສົ່ງຄືນ props ທີ່ຈະ spread ໃສ່ input ໄຟລ໌ທີ່ເຊື່ອງໄວ້.

const { getInputProps } = useDropup();

<input {...getInputProps()} />

ກັບ Props ທີ່ກຳນົດເອງ

<input
  {...getInputProps({
    id: 'file-input',
    name: 'files',
  })}
/>

Props ທີ່ສົ່ງຄືນ

ຄຸນສົມບັດ	ປະເພດ	ຄຳອະທິບາຍ
type	'file'	ປະເພດ input
accept	string	ປະເພດໄຟລ໌ທີ່ຍອมຮັບ
multiple	boolean	ອະນຸຍາດຫຼາຍໄຟລ໌
onChange	function	ຕົວຈັດການ change
style	object	ສະໄຕລ໌ທີ່ເຊື່ອງໄວ້

openFileDialog

ຟັງຊັນເພື່ອເປີດຕົວເລືອກໄຟລ໌ດ້ວຍໂປຣແກຣມ.

const { openFileDialog } = useDropup();

<button onClick={openFileDialog}>
  ຄົ້ນຫາໄຟລ໌
</button>

ຕົວຢ່າງການນຳໃຊ້

ລາຍການໄຟລ໌ສົມບູນ

function FileList() {
  const { files, actions, state } = useDropup({
    upload: { url: '/api/upload' },
  });

  return (
    <div>
      <h3>ໄຟລ໌ ({files.length})</h3>

      {files.map(file => (
        <div key={file.id}>
          {file.preview && (
            <img src={file.preview} alt="" width={50} />
          )}
          <span>{file.name}</span>
          <span>{(file.size / 1024).toFixed(1)} KB</span>
          <span>{file.status}</span>

          {file.status === 'uploading' && (
            <progress value={file.progress} max={100} />
          )}

          {file.status === 'error' && (
            <>
              <span style={{ color: 'red' }}>{file.error?.message}</span>
              <button onClick={() => actions.retry([file.id])}>ລອງໃໝ່</button>
            </>
          )}

          <button onClick={() => actions.remove(file.id)}>ລຶບ</button>
        </div>
      ))}

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

      <button
        onClick={() => actions.upload()}
        disabled={state.isUploading || files.length === 0}
      >
        ອັບໂຫຼດທັງໝົດ
      </button>

      <button onClick={() => actions.reset()}>
        ລ້າງທັງໝົດ
      </button>
    </div>
  );
}

ການຈັດສະໄຕລ໌ສະຖານະການລາກ

function StyledDropzone() {
  const { state, getDropProps, getInputProps } = useDropup({
    accept: 'image/*',
  });

  const getStyle = () => {
    if (state.isDragAccept) return { borderColor: 'green', backgroundColor: '#e8f5e9' };
    if (state.isDragReject) return { borderColor: 'red', backgroundColor: '#ffebee' };
    if (state.isDragging) return { borderColor: 'blue', backgroundColor: '#e3f2fd' };
    return { borderColor: 'gray', backgroundColor: 'white' };
  };

  return (
    <div
      {...getDropProps()}
      style={{
        border: '2px dashed',
        borderRadius: 8,
        padding: 40,
        textAlign: 'center',
        transition: 'all 0.2s',
        ...getStyle(),
      }}
    >
      <input {...getInputProps()} />
      {state.isDragReject ? (
        <p>ຍອມຮັບຮູບພາບເທົ່ານັ້ນ!</p>
      ) : (
        <p>ວາງຮູບພາບທີ່ນີ້</p>
      )}
    </div>
  );
}