@signskart/uploader 2.0.1 → 2.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +170 -32
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,21 +1,27 @@
|
|
|
1
|
-
# @signskart/uploader
|
|
1
|
+
# 🚀 @signskart/uploader
|
|
2
2
|
|
|
3
|
-
Production-grade Upload Manager SDK by Signskart
|
|
3
|
+
Production-grade Upload Manager SDK by **Signskart**.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
A powerful, fully-typed file upload SDK with queue management, retry logic, cancellation support, concurrency control, and multi-provider architecture (S3 + Cloudinary).
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## ✨ Features
|
|
10
|
+
|
|
11
|
+
* 🚀 Upload queue system
|
|
12
|
+
* 🔁 Automatic retry with exponential backoff
|
|
13
|
+
* 📊 Real-time progress tracking
|
|
14
|
+
* ❌ Cancel uploads (AbortController support)
|
|
15
|
+
* ⚡ Concurrency control
|
|
16
|
+
* ☁ Multi-provider support (Amazon S3, Cloudinary)
|
|
17
|
+
* 🧠 Fully typed (TypeScript)
|
|
18
|
+
* 🌍 Works with React, Vue, Next.js, Vite, vanilla JS
|
|
19
|
+
* 🔐 Secure S3 presigned upload support
|
|
20
|
+
* 🖥 Optional server helper included
|
|
15
21
|
|
|
16
22
|
---
|
|
17
23
|
|
|
18
|
-
|
|
24
|
+
# 📦 Installation
|
|
19
25
|
|
|
20
26
|
```bash
|
|
21
27
|
npm install @signskart/uploader
|
|
@@ -29,19 +35,37 @@ yarn add @signskart/uploader
|
|
|
29
35
|
|
|
30
36
|
---
|
|
31
37
|
|
|
38
|
+
# 🏗 Architecture
|
|
39
|
+
|
|
40
|
+
For **Amazon S3**, uploads require a backend to generate presigned URLs.
|
|
41
|
+
|
|
42
|
+
Flow:
|
|
43
|
+
|
|
44
|
+
Frontend → Backend (presign) → S3 → Frontend uploads directly
|
|
45
|
+
|
|
46
|
+
Your AWS credentials NEVER reach the browser.
|
|
47
|
+
|
|
48
|
+
Cloudinary does NOT require backend if using unsigned preset.
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
32
52
|
# 🚀 Quick Start
|
|
33
53
|
|
|
34
|
-
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
# ☁ Using Amazon S3
|
|
57
|
+
|
|
58
|
+
## 1️⃣ Frontend Setup
|
|
35
59
|
|
|
36
60
|
```ts
|
|
37
61
|
import { UploadManager, S3Uploader } from '@signskart/uploader';
|
|
38
62
|
|
|
39
63
|
const uploader = new S3Uploader({
|
|
40
|
-
|
|
64
|
+
presignEndpoint: '/api/s3/presign-upload',
|
|
41
65
|
publicUrl: 'https://cdn.yoursite.com'
|
|
42
66
|
});
|
|
43
67
|
|
|
44
|
-
const manager = new UploadManager(uploader, 2);
|
|
68
|
+
const manager = new UploadManager(uploader, 2);
|
|
45
69
|
|
|
46
70
|
const task = manager.add({
|
|
47
71
|
file,
|
|
@@ -55,7 +79,70 @@ task.events.subscribe((state) => {
|
|
|
55
79
|
|
|
56
80
|
---
|
|
57
81
|
|
|
58
|
-
##
|
|
82
|
+
## 2️⃣ Backend Setup (Next.js Example)
|
|
83
|
+
|
|
84
|
+
```ts
|
|
85
|
+
// app/api/s3/presign-upload/route.ts
|
|
86
|
+
|
|
87
|
+
import { NextRequest, NextResponse } from 'next/server';
|
|
88
|
+
import { createS3PresignHandler } from '@signskart/uploader/server';
|
|
89
|
+
|
|
90
|
+
const generatePresignedUpload = createS3PresignHandler({
|
|
91
|
+
region: process.env.AWS_REGION!,
|
|
92
|
+
accessKeyId: process.env.AWS_KEY!,
|
|
93
|
+
secretAccessKey: process.env.AWS_SECRET!,
|
|
94
|
+
bucket: process.env.AWS_S3_BUCKET!,
|
|
95
|
+
publicUrl: process.env.NEXT_PUBLIC_S3_PUBLIC_URL!,
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
export async function POST(req: NextRequest) {
|
|
99
|
+
try {
|
|
100
|
+
const body = await req.json();
|
|
101
|
+
const result = await generatePresignedUpload(body);
|
|
102
|
+
return NextResponse.json(result);
|
|
103
|
+
} catch (error) {
|
|
104
|
+
return NextResponse.json(
|
|
105
|
+
{ error: 'Failed to generate presigned URL' },
|
|
106
|
+
{ status: 500 }
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
---
|
|
113
|
+
|
|
114
|
+
## 3️⃣ Backend Setup (Express Example)
|
|
115
|
+
|
|
116
|
+
```ts
|
|
117
|
+
import express from 'express';
|
|
118
|
+
import { createS3PresignHandler } from '@signskart/uploader/server';
|
|
119
|
+
|
|
120
|
+
const app = express();
|
|
121
|
+
app.use(express.json());
|
|
122
|
+
|
|
123
|
+
const generatePresignedUpload = createS3PresignHandler({
|
|
124
|
+
region: process.env.AWS_REGION!,
|
|
125
|
+
accessKeyId: process.env.AWS_KEY!,
|
|
126
|
+
secretAccessKey: process.env.AWS_SECRET!,
|
|
127
|
+
bucket: process.env.AWS_S3_BUCKET!,
|
|
128
|
+
publicUrl: process.env.S3_PUBLIC_URL!,
|
|
129
|
+
});
|
|
130
|
+
|
|
131
|
+
app.post('/api/s3/presign-upload', async (req, res) => {
|
|
132
|
+
try {
|
|
133
|
+
const result = await generatePresignedUpload(req.body);
|
|
134
|
+
res.json(result);
|
|
135
|
+
} catch (error) {
|
|
136
|
+
res.status(500).json({ error: 'Failed to generate presigned URL' });
|
|
137
|
+
}
|
|
138
|
+
});
|
|
139
|
+
|
|
140
|
+
app.listen(3000);
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
145
|
+
# ☁ Using Cloudinary (No Backend Required)
|
|
59
146
|
|
|
60
147
|
```ts
|
|
61
148
|
import { UploadManager, CloudinaryUploader } from '@signskart/uploader';
|
|
@@ -77,18 +164,20 @@ const task = manager.add({
|
|
|
77
164
|
|
|
78
165
|
# 🧠 API Reference
|
|
79
166
|
|
|
167
|
+
---
|
|
168
|
+
|
|
80
169
|
## UploadManager
|
|
81
170
|
|
|
82
171
|
```ts
|
|
83
172
|
new UploadManager(uploader, concurrency?)
|
|
84
173
|
```
|
|
85
174
|
|
|
86
|
-
### Parameters
|
|
175
|
+
### Parameters
|
|
87
176
|
|
|
88
|
-
| Parameter
|
|
89
|
-
|
|
90
|
-
| uploader
|
|
91
|
-
| concurrency | number
|
|
177
|
+
| Parameter | Type | Default |
|
|
178
|
+
| ----------- | ------------ | -------- |
|
|
179
|
+
| uploader | BaseUploader | required |
|
|
180
|
+
| concurrency | number | 3 |
|
|
92
181
|
|
|
93
182
|
---
|
|
94
183
|
|
|
@@ -100,12 +189,12 @@ Returned from:
|
|
|
100
189
|
const task = manager.add(options);
|
|
101
190
|
```
|
|
102
191
|
|
|
103
|
-
### Properties
|
|
192
|
+
### Properties
|
|
104
193
|
|
|
105
|
-
|
|
106
|
-
|
|
194
|
+
* `task.state`
|
|
195
|
+
* `task.events.subscribe()`
|
|
107
196
|
|
|
108
|
-
### Methods
|
|
197
|
+
### Methods
|
|
109
198
|
|
|
110
199
|
```ts
|
|
111
200
|
task.start()
|
|
@@ -129,9 +218,10 @@ task.cancel()
|
|
|
129
218
|
|
|
130
219
|
# 🔁 Retry Logic
|
|
131
220
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
221
|
+
* Automatic retry
|
|
222
|
+
* Exponential backoff
|
|
223
|
+
* Default max retries: 2
|
|
224
|
+
* Cancels if AbortController triggered
|
|
135
225
|
|
|
136
226
|
---
|
|
137
227
|
|
|
@@ -147,13 +237,25 @@ task.cancel();
|
|
|
147
237
|
|
|
148
238
|
```ts
|
|
149
239
|
task.events.subscribe((state) => {
|
|
150
|
-
console.log(state.progress);
|
|
240
|
+
console.log(state.progress, state.status);
|
|
151
241
|
});
|
|
152
242
|
```
|
|
153
243
|
|
|
244
|
+
State structure:
|
|
245
|
+
|
|
246
|
+
```ts
|
|
247
|
+
{
|
|
248
|
+
id: string;
|
|
249
|
+
progress: number;
|
|
250
|
+
status: 'queued' | 'uploading' | 'success' | 'error' | 'cancelled';
|
|
251
|
+
error?: string;
|
|
252
|
+
response?: UploadResponse;
|
|
253
|
+
}
|
|
254
|
+
```
|
|
255
|
+
|
|
154
256
|
---
|
|
155
257
|
|
|
156
|
-
#
|
|
258
|
+
# ⚛ Example React Usage
|
|
157
259
|
|
|
158
260
|
```tsx
|
|
159
261
|
const handleUpload = (file: File) => {
|
|
@@ -167,10 +269,46 @@ const handleUpload = (file: File) => {
|
|
|
167
269
|
|
|
168
270
|
---
|
|
169
271
|
|
|
272
|
+
# 🔐 Security Notes (Important)
|
|
273
|
+
|
|
274
|
+
* AWS credentials must NEVER be exposed to frontend.
|
|
275
|
+
* Always generate presigned URLs server-side.
|
|
276
|
+
* Cloudinary unsigned preset must have restricted permissions.
|
|
277
|
+
* Set proper S3 bucket CORS configuration.
|
|
278
|
+
|
|
279
|
+
---
|
|
280
|
+
|
|
170
281
|
# 🛠 Requirements
|
|
171
282
|
|
|
172
|
-
|
|
173
|
-
|
|
283
|
+
* Modern browser (AbortController support)
|
|
284
|
+
* Node.js 18+ for server helper
|
|
285
|
+
* Backend endpoint for S3 presign (if using S3)
|
|
286
|
+
|
|
287
|
+
---
|
|
288
|
+
|
|
289
|
+
# 📦 Package Exports
|
|
290
|
+
|
|
291
|
+
Client:
|
|
292
|
+
|
|
293
|
+
```ts
|
|
294
|
+
import { UploadManager } from '@signskart/uploader';
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
Server helper:
|
|
298
|
+
|
|
299
|
+
```ts
|
|
300
|
+
import { createS3PresignHandler } from '@signskart/uploader/server';
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
---
|
|
304
|
+
|
|
305
|
+
# 📈 Roadmap
|
|
306
|
+
|
|
307
|
+
* Multipart uploads (100MB+)
|
|
308
|
+
* Image compression plugin
|
|
309
|
+
* Validation middleware
|
|
310
|
+
* Signed download URLs
|
|
311
|
+
* React hooks wrapper
|
|
174
312
|
|
|
175
313
|
---
|
|
176
314
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@signskart/uploader",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.6",
|
|
4
4
|
"description": "Production-grade upload manager SDK with queue, progress tracking, retry logic, cancellation, and multi-provider support (S3, Cloudinary).",
|
|
5
5
|
"author": "Signskart",
|
|
6
6
|
"license": "MIT",
|