Uploading Large Files to S3 with Multipart Chunking

const express = require("express");
const companion = require("@uppy/companion");
const port = 1337;
const app = express();

app.use("/presign", companion.app({
  providerOptions: {
    s3: {
      endpoint: S3_URL_ENDPOINT,
      getKey: (req, filename) => `${req.body.metadata.folderName}/${filename}`,
      key: YOUR_API_KEY,
      secret: YOUR_API_SECRET,
      bucket: YOUR_BUCKET_NAME,
      region: YOUR_REGION,
    },
  },
  server: { serverUrl: `localhost:${port}` },
}));

app.listen(port, () => {
  console.log(`working on ${port}`);
});

<template>
  <div class="relative">
    <div class="uppy"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import Uppy from "@uppy/core";
import Dashboard from "@uppy/dashboard";
import AwsS3Multipart from "@uppy/aws-s3-multipart";
import "@uppy/core/dist/style.min.css";
import "@uppy/dashboard/dist/style.min.css";

const uppy = ref(null);

onMounted(() => {
  uppy.value = new Uppy({
    debug: false,
    autoProceed: false,
    meta: { folderName: "somefoldername" },
  });

  uppy.value
    .use(Dashboard, {
      target: ".uppy",
      inline: true,
      replaceTargetContent: true,
      showProgressDetails: true,
      height: 470,
      browserBackButtonClose: true,
    })
    .use(AwsS3Multipart, {
      companionUrl: `${import.meta.env.VITE_SERVER_ENDPOINT}/presign`,
      limit: 5,
    })
    .on("complete", (result) => {
      console.log("Upload complete:", result);
    });
});
</script>