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

Dropup

ໄລບຣາຣີ React ທີ່ມີນ້ຳໜັກເບົາ ແລະບໍ່ມີສ່ວນຕິດຕໍ່ຜູ້ໃຊ້ສຳເລັດຮູບ ສຳລັບການອັບໂຫຼດໄຟລ໌

npm versionbundle sizelicense
10KB

ນ້ຳໜັກເບົາ

ແພັກເກດຫຼັກມີນ້ຳໜັກຕ່ຳກວ່າ 10KB ເມື່ອບີບອັດ. ສາມາດແບ່ງແຍກໄດ້ເພື່ອຂະໜາດທີ່ດີທີ່ສຸດ.

TS

TypeScript

ຂຽນດ້ວຍ TypeScript ພ້ອມຄຳນິຍາມປະເພດທີ່ສົມບູນ.

0

ບໍ່ມີການອີງອາໄສ

ບໍ່ມີການອີງອາໄສໃນເວລາແລ່ນ. ຕ້ອງການພຽງແຕ່ React ເປັນການອີງອາໄສແບບ peer ເທົ່ານັ້ນ.

ຄຸນສົມບັດ

🎨

ການອອກແບບແບບບໍ່ມີສ່ວນຕິດຕໍ່ຜູ້ໃຊ້

ບໍ່ມີອົງປະກອບສ່ວນຕິດຕໍ່ຜູ້ໃຊ້ທີ່ກຳນົດໄວ້ແລ້ວ. ທ່ານມີການຄວບຄຸມລັກສະນະ ແລະຄວາມຮູ້ສຶກຢ່າງສົມບູນ. ສ້າງປະສົບການການອັບໂຫຼດທີ່ທ່ານຕ້ອງການຢ່າງແທ້ຈິງ.

📂

ລາກ ແລະວາງ

ການເລືອກໄຟລ໌ທີ່ໃຊ້ງ່າຍດ້ວຍການລາກ ແລະວາງ ພ້ອມຄຳຕິຊົມທາງສາຍຕາສຳລັບປະເພດໄຟລ໌ທີ່ຖືກຕ້ອງ ແລະບໍ່ຖືກຕ້ອງໃນລະຫວ່າງການລາກ.

📊

ສະຖານະການອັບໂຫຼດ

ຕິດຕາມຄວາມຄືບໜ້າແບບເວລາຈິງສຳລັບໄຟລ໌ແຕ່ລະອັນ ແລະຄວາມຄືບໜ້າໂດຍລວມຂອງການອັບໂຫຼດ. ສ້າງຕົວຊີ້ວັດສະຖານະທີ່ສວຍງາມ.

ການກວດສອບໄຟລ໌

ການກວດສອບປະເພດໄຟລ໌, ຂະໜາດ, ແລະຂະໜາດພາບທີ່ມີຢູ່ແລ້ວ. ເພີ່ມກົດລະບຽບການກວດສອບທີ່ກຳນົດເອງສຳລັບຄວາມຕ້ອງການສະເພາະຂອງທ່ານ.

☁️

ການເກັບຂໍ້ມູນຄລາວ

อັບໂຫຼດໂດຍກົງໄປຫາ S3, Google Cloud Storage, Azure Blob ແລະອື່ນໆ ດ້ວຍ URL ທີ່ລົງນາມລ່ວງໜ້າ. ບໍ່ຈຳເປັນຕ້ອງມີພຣັອກຊີຂອງເຊີບເວີ.

🔄

ການອັບໂຫຼດແບບແບ່ງສ່ວນ

ແບ່ງໄຟລ໌ຂະໜາດໃຫຍ່ອອກເປັນສ່ວນໆເພື່ອການອັບໂຫຼດທີ່ເຊື່ອຖືໄດ້. ສະໜັບສະໜູນການອັບໂຫຼດທີ່ສາມາດສືບຕໍ່ໄດ້ດ້ວຍໂປຣໂຕຄອນ tus.

🖼️

ການປຸງແຕ່ງຮູບພາບ

ບີບອັດ, ປັບຂະໜາດ, ແລະຕັດຮູບພາບກ່ອນການອັບໂຫຼດ. ແກ້ໄຂບັນຫາທິດທາງ EXIF ໂດຍອັດຕະໂນມັດ.

📱

React Native

ເຮັດວຽກໃນ React Native ດ້ວຍອະແດັບເຕີ native. API ດຽວກັນສຳລັບແອັບເວັບ ແລະມືຖື.

🌐

ປອດໄພກັບ SSR

ເຮັດວຽກຢ່າງລຽບງ່າຍກັບ Next.js, Remix ແລະເຟຣມເວີກ SSR ອື່ນໆ. ບໍ່ມີບັນຫາກ່ຽວກັບການ hydration.

ເລີ່ມຕົ້ນໄວ

1. ການຕິດຕັ້ງ

npm install @samithahansaka/dropup

2. ການນຳໃຊ້

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

function Uploader() {
const { files, actions, getDropProps, getInputProps } = useDropup({
accept: 'image/*',
upload: { url: '/api/upload' },
});

return (
<div {...getDropProps()}>
<input {...getInputProps()} />
<p>Drop files here</p>

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

<button onClick={() => actions.upload()}>Upload</button>
</div>
);
}