រំលងទៅមាតិកាមេ

Dropup

បណ្ណាល័យ React ដែលស្រាលនិងគ្មានចំណុចប្រទាក់សម្រាប់ការផ្ទុកឯកសារឡើង

npm versionbundle sizelicense
10KB

ស្រាលទម្ងន់

កញ្ចប់ស្នូលតូចជាង 10KB ដែលបានបង្ហាប់។ អាចបំបែកបានសម្រាប់ទំហំល្អបំផុត។

TS

TypeScript

សរសេរជាមួយ TypeScript ជាមួយនឹងការកំណត់ប្រភេទពេញលេញ។

0

គ្មានភាពអាស្រ័យ

គ្មានភាពអាស្រ័យពេលដំណើរការ។ តម្រូវតែ React ជាភាពអាស្រ័យកម្រិតដូចគ្នាប៉ុណ្ណោះ។

លក្ខណៈពិសេស

🎨

ការរចនាគ្មានចំណុចប្រទាក់

គ្មានសមាសភាគចំណុចប្រទាក់ដែលបានបង្កើតទុក។ អ្នកមានការគ្រប់គ្រងពេញលេញលើរូបរាងនិងការស្ទាបអារម្មណ៍។ បង្កើតបទពិសោធន៍ការផ្ទុកឡើងដែលអ្នកចង់បានពិតប្រាកដ។

📂

អូស និងទម្លាក់

ការជ្រើសរើសឯកសារដោយវិចារណញាណដោយការអូសនិងទម្លាក់ ជាមួយនឹងមតិកែលម្អដោយមើលឃើញសម្រាប់ប្រភេទឯកសារត្រឹមត្រូវនិងមិនត្រឹមត្រូវក្នុងអំឡុងពេលអូស។

📊

វឌ្ឍនភាពការផ្ទុកឡើង

តាមដានវឌ្ឍនភាពតាមពេលវេលាជាក់ស្តែងសម្រាប់ឯកសារនីមួយៗនិងវឌ្ឍនភាពសរុបនៃការផ្ទុកឡើង។ បង្កើតរបារវឌ្ឍនភាពដ៏ស្រស់ស្អាត។

ការផ្ទៀងផ្ទាត់ឯកសារ

ការផ្ទៀងផ្ទាត់ប្រភេទឯកសារ ទំហំ និងវិមាត្រដែលបានបង្កើតទុក។ បន្ថែមច្បាប់ផ្ទៀងផ្ទាត់ផ្ទាល់ខ្លួនសម្រាប់តម្រូវការពិសេសរបស់អ្នក។

☁️

ការផ្ទុកលើពពក

ផ្ទុកឡើងដោយផ្ទាល់ទៅ S3, Google Cloud Storage, Azure Blob និងច្រើនទៀតដោយប្រើ URL ដែលបានចុះហត្ថលេខាមុន។ មិនចាំបាច់មានម៉ាស៊ីនមេប្រូកស៊ីទេ។

🔄

ការផ្ទុកឡើងជាបំណែក

បំបែកឯកសារធំៗទៅជាបំណែកសម្រាប់ការផ្ទុកឡើងប្រកបដោយភាពជឿជាក់។ ការគាំទ្រសម្រាប់ការផ្ទុកឡើងដែលអាចបន្តបានជាមួយពិធីការ tus។

🖼️

ការដំណើរការរូបភាព

បង្ហាប់ ផ្លាស់ប្តូរទំហំ និងច្រឹបរូបភាពមុនពេលផ្ទុកឡើង។ ជួសជុលបញ្ហាទិសដៅ EXIF ដោយស្វ័យប្រវត្តិ។

📱

React Native

ដំណើរការក្នុង React Native ជាមួយនឹងអាដាប់ទ័រដើម។ ចំណុចប្រទាក់ API ដូចគ្នាសម្រាប់កម្មវិធីគេហទំព័រនិងទូរសព្ទ។

🌐

សុវត្ថិភាពសម្រាប់ SSR

ដំណើរការដោយរលូនជាមួយ Next.js, Remix និងក្របខ័ណ្ឌ SSR ផ្សេងទៀត។ គ្មានបញ្ហាក្នុងការធ្វើជលាតប្រាស។

ការចាប់ផ្តើមរហ័ស

១. ការដំឡើង

npm install @samithahansaka/dropup

២. ការប្រើប្រាស់

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>
);
}