முக்கிய உள்ளடக்கத்திற்குச் செல்

Dropup

கோப்பு பதிவேற்றத்திற்கான இலகுவான, தலைப்பில்லா React நூலகம்

npm versionbundle sizelicense
10KB

இலகுவானது

முக்கிய தொகுப்பு சுருக்கப்பட்ட நிலையில் 10KB க்கும் குறைவு. உகந்த அளவுக்கு மரப் குலுக்கல் ஆதரவு.

TS

TypeScript

முழுமையான வகை வரையறைகளுடன் TypeScript இல் எழுதப்பட்டது.

0

சார்புகள் இல்லை

இயக்க நேர சார்புகள் இல்லை. React ஐ பியர் சார்புநிலையாக மட்டுமே தேவைப்படுகிறது.

அம்சங்கள்

🎨

தலைப்பில்லா வடிவமைப்பு

உள்ளமைக்கப்பட்ட UI கூறுகள் இல்லை. தோற்றம் மற்றும் உணர்வின் மீது உங்களுக்கு முழு கட்டுப்பாடு உள்ளது. நீங்கள் விரும்பும் பதிவேற்ற அனுபவத்தை கட்டமைக்கவும்.

📂

இழுத்து விடு

இழுக்கும் போது சரியான மற்றும் தவறான கோப்பு வகைகளுக்கான காட்சி கருத்துடன் உள்ளுணர்வான இழுத்து விடு கோப்பு தேர்வு.

📊

பதிவேற்ற முன்னேற்றம்

தனிப்பட்ட கோப்புகள் மற்றும் ஒட்டுமொத்த பதிவேற்ற முன்னேற்றத்தை நிகழ்நேரத்தில் கண்காணிக்கவும். அழகான முன்னேற்ற குறிகாட்டிகளை உருவாக்கவும்.

கோப்பு சரிபார்ப்பு

கோப்பு வகைகள், அளவுகள் மற்றும் பரிமாணங்களுக்கான உள்ளமைக்கப்பட்ட சரிபார்ப்பு. உங்கள் குறிப்பிட்ட தேவைகளுக்கு தனிப்பயன் சரிபார்ப்பு விதிகளை சேர்க்கவும்.

☁️

கிளவுட் சேமிப்பு

முன்கையொப்பமிடப்பட்ட URLகளைப் பயன்படுத்தி S3, Google Cloud Storage, Azure Blob மற்றும் பலவற்றிற்கு நேரடியாக பதிவேற்றவும். சேவையக ப்ராக்ஸி தேவையில்லை.

🔄

துண்டு துண்டான பதிவேற்றங்கள்

நம்பகமான பதிவேற்றத்திற்காக பெரிய கோப்புகளை துண்டுகளாக பிரிக்கவும். tus நெறிமுறையுடன் மீண்டும் தொடங்கக்கூடிய பதிவேற்ற ஆதரவு.

🖼️

படச் செயலாக்கம்

பதிவேற்றுவதற்கு முன் படங்களை சுருக்கவும், மறுஅளவிடவும், வெட்டவும். EXIF திசைதிருப்பல் சிக்கல்களை தானாக சரிசெய்யவும்.

📱

React Native

உள்ளூர் அடாப்டருடன் React Native இல் வேலை செய்கிறது. வெப் மற்றும் மொபைல் பயன்பாடுகளுக்கு ஒரே API.

🌐

SSR பாதுகாப்பானது

Next.js, Remix மற்றும் பிற SSR கட்டமைப்புகளுடன் தடையின்றி செயல்படுகிறது. நீரேற்ற சிக்கல்கள் இல்லை.

விரைவு தொடக்கம்

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