Skip to main content

​
Overview

The options object can be passed to both the S3M constructor and the s3m() helper function to configure upload behavior.

​
Upload Configuration

​
chunk_size
number
default:"10485760"
Size of each chunk in bytes. Default is 10MB (10 * 1024 * 1024).
{
  chunk_size: 5 * 1024 * 1024 // 5MB chunks
}
​
max_concurrent_uploads
number
default:"5"
Maximum number of chunks to upload concurrently. Higher values can speed up uploads but use more resources.
{
  max_concurrent_uploads: 3
}
​
chunk_retries
number
default:"3"
Maximum number of retry attempts for a failed chunk upload.
{
  chunk_retries: 5
}
​
auto_complete
boolean
default:"true"
Whether to automatically complete the multipart upload after all chunks are uploaded.When set to false, the upload method returns the parts array and upload_id without calling the complete endpoint, allowing you to manually complete the upload later.
{
  auto_complete: false
}

​
Progress Tracking

​
progress
Function
Callback function that receives upload progress updates.Parameters:
  • percent (number): Upload progress from 0 to 100
{
  progress: (percent) => {
    console.log(`Upload progress: ${percent}%`);
    updateProgressBar(percent);
  }
}

​
HTTP Configuration

​
baseURL
string
Base URL for API requests. If not specified, requests use the current origin.
{
  baseURL: 'https://api.example.com'
}
​
headers
Object
Custom headers to include in API requests to your Laravel backend.
{
  headers: {
    'X-CSRF-TOKEN': csrfToken,
    'Authorization': 'Bearer ' + token
  }
}
​
httpClient
Object
Custom HTTP client to use instead of axios. Must implement the same interface as axios.
import customClient from './my-http-client';

{
  httpClient: customClient
}
​
options
Object
Additional axios configuration options to pass through to HTTP requests.
{
  options: {
    timeout: 30000,
    withCredentials: true
  }
}

​
Custom Data

​
data
Object
Additional data to send with the multipart upload requests. This data is merged with the request payload.Useful for passing metadata, user IDs, folder paths, or other custom fields to your Laravel backend.
{
  data: {
    folder: 'documents/2024',
    user_id: 123,
    visibility: 'private',
    metadata: {
      description: 'Important document'
    }
  }
}

​
Complete Example

import S3M from '@savannabits/s3m';

const file = document.getElementById('file-input').files[0];

const options = {
  // Upload configuration
  chunk_size: 5 * 1024 * 1024,      // 5MB chunks
  max_concurrent_uploads: 3,         // Upload 3 chunks at a time
  chunk_retries: 5,                  // Retry failed chunks up to 5 times
  auto_complete: true,               // Auto-complete the upload
  
  // Progress tracking
  progress: (percent) => {
    document.getElementById('progress').value = percent;
  },
  
  // HTTP configuration
  baseURL: 'https://api.example.com',
  headers: {
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
    'Authorization': 'Bearer ' + localStorage.getItem('token')
  },
  
  // Custom data
  data: {
    folder: 'uploads/documents',
    visibility: 'private',
    user_id: 42
  },
  
  // Additional axios options
  options: {
    timeout: 60000,
    withCredentials: true
  }
};

const uploader = new S3M(file, options);
const result = await uploader.upload();

Build docs developers (and LLMs) love

Get started for freeTalk to us