සැහැල්ලු
මූලික බණ්ඩලය gzip කළ විට 10KB ට අඩුයි. ප්රශස්ත ප්රමාණය සඳහා Tree-shakeable.
TypeScript
සම්පූර්ණ වර්ග නිර්වචන සහිතව TypeScript වලින් ලියා ඇත.
පරායත්තතා නැත
ධාවන කාල පරායත්තතා නැත. peer dependency ලෙස React පමණක් අවශ්යයි.
විශේෂාංග
Headless නිර්මාණය
ගොඩනඟන ලද UI සංරචක නැත. පෙනුම සහ හැඟීම පිළිබඳ ඔබට සම්පූර්ණ පාලනය ඇත. ඔබට අවශ්ය හරියටම උඩුගත කිරීමේ අත්දැකීම ගොඩනඟන්න.
ඇදගෙන දමන්න
ඇදීමේදී වලංගු සහ අවලංගු ගොනු වර්ග සඳහා දෘශ්ය ප්රතිපෝෂණ සහිත බුද්ධිමත් ඇදගෙන-දැමීමේ ගොනු තේරීම.
උඩුගත ප්රගතිය
තනි ගොනු සහ සමස්ත උඩුගත ප්රගතිය සඳහා තත්ය කාලීන ප්රගති ලුහුබැඳීම. ලස්සන ප්රගති දර්ශක ගොඩනඟන්න.
ගොනු වලංගුකරණය
ගොනු වර්ග, ප්රමාණ සහ මාන සඳහා ගොඩනඟන ලද වලංගුකරණය. ඔබේ විශේෂිත අවශ්යතා සඳහා අභිරුචි වලංගුකරණ නීති එක් කරන්න.
වලාකුළු ගබඩාව
පෙර අත්සන් කළ URL භාවිතා කරමින් S3, Google Cloud Storage, Azure Blob සහ තවත් බොහෝ දේ වෙත කෙලින්ම උඩුගත කරන්න. සේවාදායක proxy අවශ්ය නැත.
ඛණ්ඩගත උඩුගත කිරීම්
විශ්වාසනීය උඩුගත කිරීම් සඳහා විශාල ගොනු කොටස් වලට බෙදන්න. tus ප්රොටොකෝලය සමඟ නැවත ආරම්භ කළ හැකි උඩුගත කිරීම් සඳහා සහාය.
රූප සැකසීම
උඩුගත කිරීමට පෙර රූප සම්පීඩනය, ප්රමාණය වෙනස් කිරීම සහ කැපීම. EXIF දිශානතිය ගැටළු ස්වයංක්රීයව නිවැරදි කරන්න.
React Native
native adapter සමඟ React 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>
);
}