https://github.com/a179346/nextjs-chunk-upload-action
Uploading large files with chunking using server action in Next.js
https://github.com/a179346/nextjs-chunk-upload-action
chunk chunk-upload chunked file-upload nextjs react server-action server-actions typescript upload
Last synced: 2 months ago
JSON representation
Uploading large files with chunking using server action in Next.js
- Host: GitHub
- URL: https://github.com/a179346/nextjs-chunk-upload-action
- Owner: a179346
- License: mit
- Created: 2024-02-28T12:46:57.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-01T09:45:52.000Z (about 1 year ago)
- Last Synced: 2025-03-11T03:37:58.654Z (2 months ago)
- Topics: chunk, chunk-upload, chunked, file-upload, nextjs, react, server-action, server-actions, typescript, upload
- Language: TypeScript
- Homepage: https://github.com/a179346/nextjs-chunk-upload-action
- Size: 284 KB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
⭕ nextjs-chunk-upload-action ⭕
)
> Uploading large files with chunking using server action in Next.js
## 🔗 Link
+ [Github](https://github.com/a179346/nextjs-chunk-upload-action#readme)
+ [npm](https://www.npmjs.com/package/nextjs-chunk-upload-action)
+ [API Reference](https://github.com/a179346/nextjs-chunk-upload-action/blob/main/docs/api-reference.md)
## 📥 Install
```sh
npm i nextjs-chunk-upload-action
```
## 📖 Example
Example: [nextjs-chunk-upload-action-example](https://github.com/a179346/nextjs-chunk-upload-action-example)
```ts
// upload-form.tsx
'use client';
import { ChunkUploader } from 'nextjs-chunk-upload-action';
import { chunkUploadAction } from './chunk-upload-action';
export function UploadForm() {
const handleFormAction = (formData: FormData) => {
const file = formData.get('file') as File;
if (!file) return;
const uploader = new ChunkUploader({
file,
onChunkUpload: chunkUploadAction,
metadata: { name: file.name },
onChunkComplete: (bytesAccepted, bytesTotal) => {
console.log('Progress:', `${bytesAccepted} / ${bytesTotal}`);
},
onError: error => {
console.error(error);
},
onSuccess: () => {
console.log('Upload complete');
},
});
uploader.start();
};
return (
Upload
);
}
```
```ts
// chunk-upload-action.ts
'use server';
import type { FileHandle } from 'fs/promises';
import { open } from 'fs/promises';
import { join } from 'path';
import type { ChunkUploadHandler } from 'nextjs-chunk-upload-action';
export const chunkUploadAction: ChunkUploadHandler<{ name: string }> = async (
chunkFormData,
metadata
) => {
const blob = chunkFormData.get('blob');
const offset = Number(chunkFormData.get('offset'));
const buffer = Buffer.from(await blob.arrayBuffer());
const filePath = join('./uploads', metadata.name);
let fileHandle: FileHandle | undefined;
try {
fileHandle = await open(filePath, offset === 0 ? 'w' : 'r+');
await fileHandle.write(buffer, 0, buffer.length, offset);
} finally {
await fileHandle?.close();
}
};
```
## 🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/a179346/nextjs-chunk-upload-action/issues).
## 🌟 Show your support
Give a ⭐️ if this project helped you!
## 📝 License
Copyright © 2024 [a179346](https://github.com/a179346).
This project is [MIT](https://github.com/a179346/nextjs-chunk-upload-action/blob/master/LICENSE) licensed.
***
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_