@thetechfossil/upfiles 0.1.0 → 0.1.1
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 +33 -26
- package/dist/index.d.mts +5 -3
- package/dist/index.d.ts +5 -3
- package/dist/index.js +5 -3
- package/dist/index.mjs +5 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# @upfiles
|
|
1
|
+
# @thetechfossil/upfiles
|
|
2
2
|
|
|
3
|
-
Lightweight JavaScript client and React component to upload files
|
|
3
|
+
Lightweight JavaScript client and React component to upload files via a presigned S3 flow. Similar to UploadThing-like DX.
|
|
4
4
|
|
|
5
5
|
- Client: get presigned URLs and PUT to S3
|
|
6
6
|
- React `<Uploader />`: drag/drop, progress, single/multiple, accepts/types, size limits
|
|
@@ -8,11 +8,17 @@ Lightweight JavaScript client and React component to upload files to an UpFiles
|
|
|
8
8
|
## Installation
|
|
9
9
|
|
|
10
10
|
```bash
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
#
|
|
15
|
-
|
|
11
|
+
# Bun (recommended)
|
|
12
|
+
bun add @thetechfossil/upfiles
|
|
13
|
+
|
|
14
|
+
# npm
|
|
15
|
+
npm install @thetechfossil/upfiles
|
|
16
|
+
|
|
17
|
+
# pnpm
|
|
18
|
+
pnpm add @thetechfossil/upfiles
|
|
19
|
+
|
|
20
|
+
# yarn
|
|
21
|
+
yarn add @thetechfossil/upfiles
|
|
16
22
|
```
|
|
17
23
|
|
|
18
24
|
## Server prerequisites
|
|
@@ -20,27 +26,22 @@ yarn add @upfiles/uploader
|
|
|
20
26
|
Your server must expose a presign endpoint compatible with:
|
|
21
27
|
|
|
22
28
|
- Method: `POST`
|
|
23
|
-
- Path: `/api/upload/presigned-url` (configurable
|
|
29
|
+
- Path: `/api/upload/presigned-url` (default; configurable)
|
|
24
30
|
- Body: `{ fileName, fileType, fileSize? }`
|
|
25
31
|
- Response: `{ presignedUrl, fileKey, publicUrl }`
|
|
26
32
|
|
|
27
|
-
This repository already provides
|
|
33
|
+
This repository already provides a Next.js route at `src/app/api/upload/presigned-url/route.ts`.
|
|
28
34
|
|
|
29
|
-
If your server requires auth,
|
|
35
|
+
If your server requires auth, you may need cookies (`withCredentials`) or an Authorization header.
|
|
30
36
|
|
|
31
37
|
## Basic usage (React)
|
|
32
38
|
|
|
33
39
|
```tsx
|
|
34
|
-
import { Uploader } from '@upfiles
|
|
40
|
+
import { Uploader } from '@thetechfossil/upfiles';
|
|
35
41
|
|
|
36
42
|
export default function Page() {
|
|
37
43
|
return (
|
|
38
44
|
<Uploader
|
|
39
|
-
clientOptions={{
|
|
40
|
-
baseUrl: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:4000',
|
|
41
|
-
// headers: { Authorization: `Bearer ${token}` },
|
|
42
|
-
withCredentials: true, // if your server uses NextAuth session cookies
|
|
43
|
-
}}
|
|
44
45
|
multiple
|
|
45
46
|
accept={["image/*", "application/pdf"]}
|
|
46
47
|
maxFileSize={100 * 1024 * 1024}
|
|
@@ -60,11 +61,14 @@ export default function Page() {
|
|
|
60
61
|
## Basic usage (vanilla JS)
|
|
61
62
|
|
|
62
63
|
```ts
|
|
63
|
-
import { UpfilesClient } from '@upfiles
|
|
64
|
+
import { UpfilesClient } from '@thetechfossil/upfiles';
|
|
64
65
|
|
|
66
|
+
// Same-origin by default; only set these when needed:
|
|
65
67
|
const client = new UpfilesClient({
|
|
66
|
-
|
|
67
|
-
|
|
68
|
+
// presignUrl: 'https://api.example.com/api/upload/presigned-url', // full override
|
|
69
|
+
// baseUrl: 'https://api.example.com', // used with presignPath
|
|
70
|
+
// presignPath: '/api/upload/presigned-url', // default
|
|
71
|
+
// withCredentials: true,
|
|
68
72
|
});
|
|
69
73
|
|
|
70
74
|
async function upload(file) {
|
|
@@ -82,15 +86,17 @@ async function upload(file) {
|
|
|
82
86
|
## API
|
|
83
87
|
|
|
84
88
|
- `new UpfilesClient(options)`
|
|
85
|
-
- `
|
|
86
|
-
- `
|
|
87
|
-
- `
|
|
88
|
-
- `
|
|
89
|
+
- `presignUrl` (optional): full absolute URL to presign endpoint. Highest priority.
|
|
90
|
+
- `baseUrl` (optional): API base origin. Used with `presignPath`.
|
|
91
|
+
- `presignPath` (optional): relative path, default `/api/upload/presigned-url`.
|
|
92
|
+
- `headers` (optional): headers for your server, e.g. Authorization.
|
|
93
|
+
- `withCredentials` (optional): `true` to send cookies.
|
|
94
|
+
- Defaults: same-origin requests to `/api/upload/presigned-url`.
|
|
89
95
|
- `client.getPresignedUrl({ fileName, fileType, fileSize? })`
|
|
90
96
|
- `client.uploadToS3(presignedUrl, file)`
|
|
91
97
|
|
|
92
98
|
- `<Uploader />` props
|
|
93
|
-
- `clientOptions
|
|
99
|
+
- `clientOptions` (optional): same as `UpfilesClient` options (only needed for cross-origin or auth customization)
|
|
94
100
|
- `multiple` (default true)
|
|
95
101
|
- `accept` (array of MIME patterns)
|
|
96
102
|
- `maxFileSize` (bytes, default 100MB)
|
|
@@ -101,6 +107,7 @@ async function upload(file) {
|
|
|
101
107
|
|
|
102
108
|
## Notes
|
|
103
109
|
|
|
104
|
-
-
|
|
105
|
-
-
|
|
110
|
+
- Dev with Vite: configure a proxy so `/api/*` maps to your backend (e.g., `http://localhost:4000`), then `<Uploader />` works with no config.
|
|
111
|
+
- Ensure CORS where applicable (S3 bucket CORS; server CORS only when using cross-origin calls).
|
|
112
|
+
- For cross-origin with cookies (NextAuth), set `withCredentials: true` and configure your server to allow credentials.
|
|
106
113
|
- Consider adding API token auth if distributing the SDK publicly.
|
package/dist/index.d.mts
CHANGED
|
@@ -6,14 +6,16 @@ type PresignResponse = {
|
|
|
6
6
|
publicUrl: string;
|
|
7
7
|
};
|
|
8
8
|
type UpfilesClientOptions = {
|
|
9
|
-
baseUrl
|
|
9
|
+
baseUrl?: string;
|
|
10
10
|
presignPath?: string;
|
|
11
|
+
presignUrl?: string;
|
|
11
12
|
headers?: Record<string, string>;
|
|
12
13
|
withCredentials?: boolean;
|
|
13
14
|
};
|
|
14
15
|
declare class UpfilesClient {
|
|
15
|
-
private baseUrl
|
|
16
|
+
private baseUrl?;
|
|
16
17
|
private presignPath;
|
|
18
|
+
private presignUrl?;
|
|
17
19
|
private headers?;
|
|
18
20
|
private withCredentials?;
|
|
19
21
|
constructor(opts: UpfilesClientOptions);
|
|
@@ -40,7 +42,7 @@ type UploaderFile = {
|
|
|
40
42
|
fileKey?: string;
|
|
41
43
|
};
|
|
42
44
|
type UploaderProps = {
|
|
43
|
-
clientOptions
|
|
45
|
+
clientOptions?: UpfilesClientOptions;
|
|
44
46
|
multiple?: boolean;
|
|
45
47
|
accept?: string[];
|
|
46
48
|
maxFileSize?: number;
|
package/dist/index.d.ts
CHANGED
|
@@ -6,14 +6,16 @@ type PresignResponse = {
|
|
|
6
6
|
publicUrl: string;
|
|
7
7
|
};
|
|
8
8
|
type UpfilesClientOptions = {
|
|
9
|
-
baseUrl
|
|
9
|
+
baseUrl?: string;
|
|
10
10
|
presignPath?: string;
|
|
11
|
+
presignUrl?: string;
|
|
11
12
|
headers?: Record<string, string>;
|
|
12
13
|
withCredentials?: boolean;
|
|
13
14
|
};
|
|
14
15
|
declare class UpfilesClient {
|
|
15
|
-
private baseUrl
|
|
16
|
+
private baseUrl?;
|
|
16
17
|
private presignPath;
|
|
18
|
+
private presignUrl?;
|
|
17
19
|
private headers?;
|
|
18
20
|
private withCredentials?;
|
|
19
21
|
constructor(opts: UpfilesClientOptions);
|
|
@@ -40,7 +42,7 @@ type UploaderFile = {
|
|
|
40
42
|
fileKey?: string;
|
|
41
43
|
};
|
|
42
44
|
type UploaderProps = {
|
|
43
|
-
clientOptions
|
|
45
|
+
clientOptions?: UpfilesClientOptions;
|
|
44
46
|
multiple?: boolean;
|
|
45
47
|
accept?: string[];
|
|
46
48
|
maxFileSize?: number;
|
package/dist/index.js
CHANGED
|
@@ -28,13 +28,15 @@ module.exports = __toCommonJS(index_exports);
|
|
|
28
28
|
// src/client.ts
|
|
29
29
|
var UpfilesClient = class {
|
|
30
30
|
constructor(opts) {
|
|
31
|
-
this.baseUrl = opts.baseUrl
|
|
31
|
+
this.baseUrl = opts.baseUrl?.replace(/\/$/, "");
|
|
32
32
|
this.presignPath = opts.presignPath ?? "/api/upload/presigned-url";
|
|
33
|
+
this.presignUrl = opts.presignUrl;
|
|
33
34
|
this.headers = opts.headers;
|
|
34
35
|
this.withCredentials = opts.withCredentials;
|
|
35
36
|
}
|
|
36
37
|
async getPresignedUrl(params) {
|
|
37
|
-
const
|
|
38
|
+
const target = this.presignUrl ? this.presignUrl : this.baseUrl ? `${this.baseUrl}${this.presignPath}` : this.presignPath;
|
|
39
|
+
const res = await fetch(target, {
|
|
38
40
|
method: "POST",
|
|
39
41
|
headers: {
|
|
40
42
|
"Content-Type": "application/json",
|
|
@@ -84,7 +86,7 @@ var Uploader = ({
|
|
|
84
86
|
folderPath
|
|
85
87
|
}) => {
|
|
86
88
|
const inputRef = (0, import_react.useRef)(null);
|
|
87
|
-
const client = (0, import_react.useMemo)(() => new UpfilesClient(clientOptions), [clientOptions]);
|
|
89
|
+
const client = (0, import_react.useMemo)(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
|
|
88
90
|
const [files, setFiles] = (0, import_react.useState)([]);
|
|
89
91
|
const [isUploading, setIsUploading] = (0, import_react.useState)(false);
|
|
90
92
|
const [isDragOver, setIsDragOver] = (0, import_react.useState)(false);
|
package/dist/index.mjs
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
// src/client.ts
|
|
2
2
|
var UpfilesClient = class {
|
|
3
3
|
constructor(opts) {
|
|
4
|
-
this.baseUrl = opts.baseUrl
|
|
4
|
+
this.baseUrl = opts.baseUrl?.replace(/\/$/, "");
|
|
5
5
|
this.presignPath = opts.presignPath ?? "/api/upload/presigned-url";
|
|
6
|
+
this.presignUrl = opts.presignUrl;
|
|
6
7
|
this.headers = opts.headers;
|
|
7
8
|
this.withCredentials = opts.withCredentials;
|
|
8
9
|
}
|
|
9
10
|
async getPresignedUrl(params) {
|
|
10
|
-
const
|
|
11
|
+
const target = this.presignUrl ? this.presignUrl : this.baseUrl ? `${this.baseUrl}${this.presignPath}` : this.presignPath;
|
|
12
|
+
const res = await fetch(target, {
|
|
11
13
|
method: "POST",
|
|
12
14
|
headers: {
|
|
13
15
|
"Content-Type": "application/json",
|
|
@@ -57,7 +59,7 @@ var Uploader = ({
|
|
|
57
59
|
folderPath
|
|
58
60
|
}) => {
|
|
59
61
|
const inputRef = useRef(null);
|
|
60
|
-
const client = useMemo(() => new UpfilesClient(clientOptions), [clientOptions]);
|
|
62
|
+
const client = useMemo(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
|
|
61
63
|
const [files, setFiles] = useState([]);
|
|
62
64
|
const [isUploading, setIsUploading] = useState(false);
|
|
63
65
|
const [isDragOver, setIsDragOver] = useState(false);
|