https://github.com/a179346/nextjs-chunk-upload-action-example

An example of utilizing the nextjs-chunk-upload-action library
https://github.com/a179346/nextjs-chunk-upload-action-example

chunk-upload next-js nextjs-chunk-upload-action server-action

Last synced: 17 days ago
JSON representation

An example of utilizing the nextjs-chunk-upload-action library

• Host: GitHub
• URL: https://github.com/a179346/nextjs-chunk-upload-action-example
• Owner: a179346
• Created: 2024-02-28T13:52:40.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-04-04T17:18:21.000Z (8 months ago)
• Last Synced: 2024-10-11T06:21:58.853Z (about 1 month ago)
• Topics: chunk-upload, next-js, nextjs-chunk-upload-action, server-action
• Language: TypeScript
• Homepage:
• Size: 515 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## nextjs-chunk-upload-action-example

> An example of utilizing the [nextjs-chunk-upload-action](https://github.com/a179346/nextjs-chunk-upload-action) library.

## Start

```sh

npm run dev

```

## Usage

```ts

// upload-form.tsx

'use client';

import { ChunkUploader } from 'nextjs-chunk-upload-action';

import { chunkUploadAction } from '@/server/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();

  }

};

```