js upload large file

Installation

With npm

npm install upload-large-file

or pnpm

pnpm i upload-large-file

or yarn

yarn add upload-large-file

Example

import axios from 'axios'
import { uploadLargeFile } from 'upload-large-file'

const button = document.querySelector('#button')
const input = document.querySelector('#file')

const { upload, isUploading, progress, chunkUploaded } = uploadLargeFile({
    upload: async (data) => {
        const response = await axios.post('/upload', data, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })
        console.log(response.data)
    },
    chunkSize: 10 * 1024 * 1024 // 10MB
})

button.addEventListener('click', async () => {
    const file = input.files[0]
    await upload(file)
})

// get the upload progress
const uploadProgress = progress()

// get number of chunk uploaded
const totalChunkUploaded = chunkUploaded()

// get upload state
const uploadState = isUploading()

Options

interface IUploadLargeFileOptions {
  /**
   * Upload function (in chunk)
   * @param payload request payload
   * @returns
   */
  upload: (payload: IRequestPayload) => Promise<void>
  /**
   * Number of retries on error
   * 
   * @default 3
   */
  retryOnError?: number
  /**
   * Retry after in milliseconds
   * 
   * @default 1000 1s
   */
  retryAfter?: number
  /**
   * Size of each chunk
   * 
   * @default 5*1024*1024 5MB
   */
  chunkSize?: number
  /**
   * Limit the number of chunks to upload at a time
   * @default 1
   */
  chunkLimit?: number
  /**
   * Progress change event
   * @param progress progress in percentage
   * @returns
   */
  onProgress?: (progress: number) => void
}

interface IRequestPayload extends IChunkFile {
  /**
   * Unique identifier
   */
  uuid: string
  /**
   * File name
   */
  filename: string
  /**
   * Total size of the file
   */
  total_size: number
  /**
   * Total chunks of the file
   */
  total_chunks_file: number
}

interface IChunkFile {
  file: Blob
  size: number
}