> Uploading large files with chunking using server action in Next.js

## 🔗 Link
+ Github
+ npm
+ API Reference

📥 Install

``sh
npm i nextjs-chunk-upload-action
`

📖 Example

Example: 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.

🌟 Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2024 a179346.

This project is MIT licensed.

*
_This README was generated with ❤️ by readme-md-generator_