ຂ້າມໄປຫາເນື້ອຫາຫຼັກ

ຄຳຖາມທີ່ຖາມເລື້ອຍໆ

ຄຳຖາມ ແລະຄຳຕອບທົ່ວໄປກ່ຽວກັບ Dropup.

ທົ່ວໄປ​

Dropup ແມ່ນຫຍັງ?​

Dropup ແມ່ນໄລບຣາຣີ React ທີ່ມີນ້ຳໜັກເບົາ ແລະບໍ່ມີສ່ວນຕິດຕໍ່ຜູ້ໃຊ້ສຳເລັດຮູບ ສຳລັບການອັບໂຫຼດໄຟລ໌. ມັນໃຫ້ການລາກ ແລະວາງ, ການກວດສອບໄຟລ໌, ການຕິດຕາມຄວາມຄືບໜ້າການອັບໂຫຼດ, ແລະການຮອງຮັບການເກັບຂໍ້ມູນຄລາວ - ທັງໝົດໃນແພັກເກດທີ່ມີຂະໜາດຕ່ຳກວ່າ 10KB ເມື່ອບີບອັດ.

ເປັນຫຍັງຈຶ່ງເອີ້ນວ່າ "headless"?​

Headless ໝາຍຄວາມວ່າ Dropup ບໍ່ໄດ້ລວມເອົາອົງປະກອບ UI ໃດໆ. ມັນໃຫ້ຕາລະກະ ແລະການຈັດການສະຖານະ, ໃນຂະນະທີ່ທ່ານສ້າງ UI ຕາມທີ່ທ່ານຕ້ອງການ. ນີ້ໃຫ້ການຄວບຄຸມລັກສະນະ ແລະຄວາມຮູ້ສຶກຢ່າງສົມບູນ.

ຂະໜາດ bundle ແມ່ນເທົ່າໃດ?​

  • Core (@samithahansaka/dropup): < 10KB ເມື່ອບີບອັດ
  • ກັບການຮອງຮັບຄລາວ: +2KB ຕໍ່ຜູ້ໃຫ້ບໍລິການ
  • ກັບການປຸງແຕ່ງຮູບພາບ: +5KB
  • ກັບໂປຣໂຕຄອນ tus: +3KB (ຕ້ອງການ tus-js-client ເປັນ peer)

ຮອງຮັບ TypeScript ບໍ?​

ແມ່ນແລ້ວ! Dropup ຖືກຂຽນດ້ວຍ TypeScript ແລະລວມເອົາຄຳນິຍາມປະເພດທີ່ສົມບູນ. ບໍ່ຕ້ອງການແພັກເກດ @types.

ຕ້ອງການ React ເວີຊັນໃດ?​

React 16.8+ (ຕ້ອງການການຮອງຮັບ hooks).

ການນຳໃຊ້​

ຂ້ອຍຈະອັບໂຫຼດໄຟລ໌ແນວໃດ?​

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

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

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

ຂ້ອຍຈະຈັດການກັບຂໍ້ຜິດພາດການກວດສອບແນວໃດ?​

useDropup({
  accept: 'image/*',
  maxSize: 5 * 1024 * 1024,

  onValidationError: (errors) => {
    errors.forEach(({ file, errors }) => {
      console.log(`${file.name}: ${errors.join(', ')}`);
    });
  },
});

ຂ້ອຍສາມາດໃຊ້ຕາລະກະການອັບໂຫຼດແບບກຳນົດເອງໄດ້ບໍ?​

ໄດ້! ສົ່ງຟັງຊັນແທນອອບເຈັກການຕັ້ງຄ່າ:

useDropup({
  upload: async (file, options) => {
    const { signal, onProgress } = options;

    // ຕາລະກະການອັບໂຫຼດແບບກຳນົດເອງຂອງທ່ານ
    const response = await customUpload(file.file, {
      signal,
      onProgress,
    });

    return { url: response.url };
  },
});

ຂ້ອຍຈະເພີ່ມໄຟລ໌ດ້ວຍໂປຣແກຣມແນວໃດ?​

const { actions } = useDropup();

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

ຂ້ອຍສາມາດມີຫຼາຍພື້ນທີ່ວາງໄດ້ບໍ?​

ໄດ້! ແຕ່ລະການເອີ້ນ useDropup ສ້າງ instance ທີ່ເປັນອິດສະຫຼະ:

const images = useDropup({ accept: 'image/*' });
const documents = useDropup({ accept: '.pdf' });

// ໃຊ້ແຍກກັນ
<div {...images.getDropProps()}>...</div>
<div {...documents.getDropProps()}>...</div>

ການອັບໂຫຼດ​

ຂ້ອຍຈະສະແດງຄວາມຄືບໜ້າການອັບໂຫຼດແນວໃດ?​

const { files } = useDropup({ upload: { url: '/api/upload' } });

{files.map(file => (
  <div key={file.id}>
    {file.name}: {file.progress}%
  </div>
))}

ຂ້ອຍຈະຍົກເລີກການອັບໂຫຼດແນວໃດ?​

const { actions } = useDropup();

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

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

ຂ້ອຍຈະລອງໃໝ່ການອັບໂຫຼດທີ່ລົ້ມເຫຼວແນວໃດ?​

const { actions } = useDropup();

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

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

ຮອງຮັບການອັບໂຫຼດແບບແບ່ງສ່ວນບໍ?​

ແມ່ນແລ້ວ! ໃຊ້ createChunkedUploader:

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

useDropup({
  upload: createChunkedUploader({
    url: '/api/upload/chunk',
    chunkSize: 5 * 1024 * 1024, // 5MB
  }),
});

ຂ້ອຍສາມາດອັບໂຫຼດໄປ S3 ໂດຍກົງໄດ້ບໍ?​

ໄດ້! ໃຊ້ cloud uploader:

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

useDropup({
  upload: createS3Uploader({
    getPresignedUrl: async (file) => {
      const res = await fetch('/api/s3/presign', {
        method: 'POST',
        body: JSON.stringify({ filename: file.name }),
      });
      return res.json();
    },
  }),
});

ການກວດສອບ​

ຂ້ອຍຈະຈຳກັດປະເພດໄຟລ໌ແນວໃດ?​

// ໂດຍປະເພດ MIME
useDropup({ accept: 'image/*' });

// ໂດຍນາມສະກຸນ
useDropup({ accept: '.pdf, .doc' });

// ຫຼາຍປະເພດ
useDropup({ accept: ['image/*', 'application/pdf'] });

ຂ້ອຍຈະຕັ້ງຄ່າຂີດຈຳກັດຂະໜາດແນວໃດ?​

useDropup({
  maxSize: 10 * 1024 * 1024, // ສູງສຸດ 10MB
  minSize: 1024,             // ຕ່ຳສຸດ 1KB
});

ຂ້ອຍຈະຈຳກັດຈຳນວນໄຟລ໌ແນວໃດ?​

useDropup({
  maxFiles: 5,
});

ຂ້ອຍສາມາດເພີ່ມການກວດສອບແບບກຳນົດເອງໄດ້ບໍ?​

ໄດ້! ໃຊ້ customRules:

useDropup({
  customRules: [
    (file) => {
      if (file.name.includes('draft')) {
        return 'ບໍ່ອະນຸຍາດໄຟລ໌ຮ່າງ';
      }
      return true;
    },
  ],
});

ການສະແດງຕົວຢ່າງ​

ຂ້ອຍຈະສະແດງຕົວຢ່າງຮູບພາບແນວໃດ?​

ຕົວຢ່າງຖືກເປີດໃຊ້ງານໂດຍຄ່າເລີ່ມຕົ້ນ:

const { files } = useDropup();

{files.map(file => (
  file.preview && <img src={file.preview} alt="" />
))}

ຂ້ອຍຕ້ອງລ້າງ URL ຕົວຢ່າງບໍ?​

ບໍ່ຕ້ອງ! Dropup ຖອນ Object URLs ໂດຍອັດຕະໂນມັດເມື່ອໄຟລ໌ຖືກລຶບ ຫຼືອົງປະກອບຖືກ unmount.

ຂ້ອຍສາມາດປິດການສະແດງຕົວຢ່າງໄດ້ບໍ?​

useDropup({ generatePreviews: false });

ການແກ້ໄຂບັນຫາ​

ໄຟລ໌ບໍ່ໄດ້ອັບໂຫຼດ​

  1. ກວດສອບວ່າ upload ຖືກຕັ້ງຄ່າແລ້ວ:

    useDropup({ upload: { url: '/api/upload' } });

  2. ໃຫ້ແນ່ໃຈວ່າທ່ານເອີ້ນ actions.upload() (ເວັ້ນເສຍແຕ່ autoUpload: true)

  3. ກວດສອບ console ຂອງບຣາວເຊີສຳລັບຂໍ້ຜິດພາດເຄືອຂ່າຍ

URL ຕົວຢ່າງບໍ່ເຮັດວຽກ​

  1. ໃຫ້ແນ່ໃຈວ່າໄຟລ໌ແມ່ນຮູບພາບ
  2. ກວດສອບວ່າ generatePreviews ບໍ່ແມ່ນ false
  3. ຢືນຢັນວ່າອອບເຈັກໄຟລ໌ມີຄຸນສົມບັດ preview ທີ່ຖືກຕ້ອງ

ການລາກ ແລະວາງບໍ່ເຮັດວຽກ​

  1. ໃຫ້ແນ່ໃຈວ່າທ່ານ spread getDropProps() ໃສ່ອົງປະກອບ container
  2. ລວມ input ທີ່ເຊື່ອງໄວ້: <input {...getInputProps()} />
  3. ກວດສອບວ່າ disabled ບໍ່ແມ່ນ true

ຂໍ້ຜິດພາດ TypeScript​

  1. ອັບເດດເປັນ Dropup ເວີຊັນຫຼ້າສຸດ
  2. ໃຫ້ແນ່ໃຈວ່າ tsconfig.json ມີ moduleResolution ທີ່ເໝາະສົມ
  3. ກວດສອບວ່າ @samithahansaka/dropup ຢູ່ໃນ dependencies, ບໍ່ແມ່ນ devDependencies

ການຮົ່ວໄຫຼຂອງໜ່ວຍຄວາມຈຳ​

  1. ໃຫ້ແນ່ໃຈວ່າອົງປະກອບທີ່ໃຊ້ useDropup ຖືກ unmount ຢ່າງຖືກຕ້ອງ
  2. ເອີ້ນ actions.reset() ກ່ອນການ unmount ຖ້າຈຳເປັນ
  3. ບໍ່ຄວນເກັບໄຟລ໌ໃນ state ພາຍນອກໂດຍບໍ່ມີການລ້າງ

ຄວາມເຂົ້າກັນໄດ້​

ເຮັດວຽກກັບ Next.js ບໍ?​

ແມ່ນແລ້ວ! ໃຊ້ directive 'use client':

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

ເຮັດວຽກກັບ React Native ບໍ?​

ແມ່ນແລ້ວ! ໃຊ້ native adapter:

import { NativeAdapter } from '@samithahansaka/dropup/native';

useDropup({ adapter: NativeAdapter });

ຮອງຮັບ SSR ບໍ?​

ແມ່ນແລ້ວ! Dropup ປອດໄພກັບ SSR. ມັນໃຊ້ API ຂອງບຣາວເຊີພຽງແຕ່ເມື່ອມັນມີຢູ່.

ຮອງຮັບບຣາວເຊີໃດ?​

ບຣາວເຊີທັນສະໄໝທັງໝົດ:

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

ການປະກອບສ່ວນ​

ຂ້ອຍຈະປະກອບສ່ວນແນວໃດ?​

  1. Fork ບ່ອນເກັບຂໍ້ມູນ
  2. ສ້າງ branch ສຳລັບຄຸນສົມບັດ
  3. ສົ່ງ pull request

ເບິ່ງ CONTRIBUTING.md ສຳລັບລາຍລະອຽດ.

ຂ້ອຍຈະລາຍງານ bug ແນວໃດ?​

ເປີດ issue ທີ່ github.com/samithahansaka/dropup/issues.

ມີ roadmap ບໍ?​

ກວດສອບ issues ແລະ discussions ຂອງ GitHub ສຳລັບຄຸນສົມບັດທີ່ວາງແຜນໄວ້.