Chunked browser uploads to Google storage with JavaScript

[
  {
    "origin": ["https://yourdomain.com"],
    "method": ["PUT"],
    "responseHeader": ["Content-Type", "Content-Length", "ETag"],
    "maxAgeSeconds": 3600
  }
]

import express from 'express'
import { Storage } from '@google-cloud/storage'

const app = express()
app.use(express.json())

// Initialize storage with credentials from your service account key file
// Ensure GOOGLE_APPLICATION_CREDENTIALS environment variable is set
// or pass the keyFilename to the Storage constructor.
const storage = new Storage()
const bucket = storage.bucket('your-bucket-name') // Replace with your bucket name

// Endpoint to get a signed URL for uploading a chunk
app.post('/signed-url', async (req, res) => {
  const { name, type, idx, total } = req.body
  // Chunks are stored temporarily, e.g., in a 'tmp/' directory within the bucket
  const tempObjectName = `tmp/${name}-${idx}-of-${total}`
  const file = bucket.file(tempObjectName)

  const options = {
    version: 'v4',
    action: 'write',
    expires: Date.now() + 15 * 60 * 1000, // 15 minutes
    contentType: type,
  }

  try {
    const [url] = await file.getSignedUrl(options)
    res.json({ url, tempObjectName })
  } catch (error) {
    console.error('Failed to get signed URL:', error)
    res.status(500).json({ error: 'Failed to get signed URL' })
  }
})

// Endpoint to compose chunks into a single file and clean up
app.post('/compose', async (req, res) => {
  const { name, parts } = req.body // `parts` is an array of temporary object names
  const finalFile = bucket.file(`uploads/${name}`) // Destination for the final composed file
  const sourceFiles = parts.map((partName) => bucket.file(partName))

  try {
    await finalFile.compose(sourceFiles)
    // Optionally, delete the temporary chunk files after successful composition
    await Promise.all(sourceFiles.map((f) => f.delete().catch(console.error)))
    res.json({ ok: true, message: 'File composed successfully.' })
  } catch (error) {
    console.error('Failed to compose file:', error)
    // Consider attempting to delete parts even on compose failure if appropriate
    res.status(500).json({ error: 'Failed to compose file' })
  }
})

const port = process.env.PORT || 3000
app.listen(port, () => {
  console.log(`Server listening on port ${port}`)
})

const CHUNK_SIZE = 5 * 1024 * 1024 // 5 MiB

export async function uploadFileWithChunks(file, { onProgress } = {}) {
  const totalChunks = Math.ceil(file.size / CHUNK_SIZE)
  const temporaryObjectNames = []

  for (let idx = 0; idx < totalChunks; idx++) {
    const start = idx * CHUNK_SIZE
    const end = Math.min(start + CHUNK_SIZE, file.size)
    const chunk = file.slice(start, end)

    // 1. Get a signed URL for the current chunk
    const signedUrlPayload = { name: file.name, type: file.type, idx, total: totalChunks }
    let signedUrlResponse
    try {
      const response = await fetch('/signed-url', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(signedUrlPayload),
      })
      if (!response.ok) throw new Error(`Failed to get signed URL: ${response.statusText}`)
      signedUrlResponse = await response.json()
    } catch (error) {
      console.error('Error getting signed URL for chunk:', error)
      throw error // Propagate error to be handled by caller
    }

    // 2. Upload the chunk using the signed URL
    try {
      // Use the retry function for uploading the chunk
      await retry(async () => {
        const uploadResponse = await fetch(signedUrlResponse.url, {
          method: 'PUT',
          headers: { 'Content-Type': file.type }, // GCS requires Content-Type for PUT via signed URL
          body: chunk,
        })
        if (!uploadResponse.ok)
          throw new Error(`Chunk ${idx + 1} upload failed: ${uploadResponse.statusText}`)
      })
    } catch (error) {
      console.error(`Error uploading chunk ${idx + 1}:`, error)
      throw error // Propagate error
    }

    temporaryObjectNames.push(signedUrlResponse.tempObjectName)
    onProgress?.(((idx + 1) / totalChunks) * 100)
  }

  // 3. Finalize the upload by composing all chunks
  try {
    const composeResponse = await fetch('/compose', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: file.name, parts: temporaryObjectNames }),
    })
    if (!composeResponse.ok)
      throw new Error(`Failed to compose file: ${composeResponse.statusText}`)
    const result = await composeResponse.json()
    console.log('Upload complete:', result)
  } catch (error) {
    console.error('Error composing file:', error)
    throw error // Propagate error
  }
}

async function retry(fn, attempts = 5, delay = 500) {
  for (let i = 0; i < attempts; i++) {
    try {
      return await fn()
    } catch (e) {
      if (i === attempts - 1) throw e // Rethrow last error
      await new Promise((resolve) => setTimeout(resolve, delay * 2 ** i))
      console.log(`Retrying (attempt ${i + 1}/${attempts})...`)
    }
  }
}