Video upload to my ExpressJS Railway app is suuuuper slow. If locally hosting server, super fast.

  let config = {
    baseURL: baseUrl || process.env.NEXT_PUBLIC_BASE_URL,
    headers: { "Content-Type": "multipart/form-data" },
    onUploadProgress,
  }
  const jsonResp = await axios.post(apiRoute, formData, config)

  let config = {
    baseURL: baseUrl || process.env.NEXT_PUBLIC_BASE_URL,
    headers: { "Content-Type": "multipart/form-data" },
    onUploadProgress,
  }
  const jsonResp = await axios.post(apiRoute, formData, config)

router.post(
  "/save-feedback-video",
  securityChecks,
  multer({ storage: storage }).single("feedbackVideo"),
  save_feedback_video
);

router.post(
  "/save-feedback-video",
  securityChecks,
  multer({ storage: storage }).single("feedbackVideo"),
  save_feedback_video
);

save_feedback_video

save_feedback_video

// Custom storage configuration for multer
const storage = multer.diskStorage({
  destination: function (
    req: Request,
    file: Express.Multer.File,
    cb: (error: Error | null, destination: string) => void
  ) {
    cb(null, "tmp-media/uploads/");
  },
  filename: function (
    req: Request,
    file: Express.Multer.File,
    cb: (error: Error | null, filename: string) => void
  ) {
    cb(null, file.originalname);
  },
});

// Controller
import {
  save_feedback_video,
  save_feedback_annotation_media,
} from "../controllers/feedback";

router.post(
  "/save-feedback-video",
  securityChecks,
  multer({ storage: storage }).single("feedbackVideo"),
  save_feedback_video
);

// Custom storage configuration for multer
const storage = multer.diskStorage({
  destination: function (
    req: Request,
    file: Express.Multer.File,
    cb: (error: Error | null, destination: string) => void
  ) {
    cb(null, "tmp-media/uploads/");
  },
  filename: function (
    req: Request,
    file: Express.Multer.File,
    cb: (error: Error | null, filename: string) => void
  ) {
    cb(null, file.originalname);
  },
});

// Controller
import {
  save_feedback_video,
  save_feedback_annotation_media,
} from "../controllers/feedback";

router.post(
  "/save-feedback-video",
  securityChecks,
  multer({ storage: storage }).single("feedbackVideo"),
  save_feedback_video
);

export const save_feedback_video = async (req: Request, res: Response) => {
  console.log(getTimestampString() + " - save_feedback_video - request:", {
    req,
  });
  if (!req.file) {
    throw createError(400, "No file provided.");
  }

  // Required to make sure file cleanup is performed on error or success
  const inputVideoPath = req.file.path;
  const convertedFilePath = `tmp-media/converted/${
    path.parse(req.file.originalname).name
  }.mp4`;

  try {
    const { userType, idToken } = req.body;
    console.log(getTimestampString() + " - save_feedback_video - params:", {
      userType,
      idToken,
    });
    const file = req.file;
    let fileName = file.originalname.toLowerCase(); // Use original so we can avoid duplicating file content. Save once, use multiple times.

    if (!(userType && file && fileName && idToken))
      throw createError(400, "Bad params.");

    const fileExtension = fileName.split(".").at(-1);
    if (!fileExtension) throw createError(400, "Bad file extension.");

    // Use original lowercase so we can avoid duplicating file content. Save once, use multiple times.
    fileName = `${path.parse(req.file.originalname).name}.mp4`.toLowerCase(); // We assume the file will be mp4 due to the conversion step

    // Ensure user of declared type is found]
    const user = await getUser({ idToken, userType });
    if (!user?.authUser?.uid)
      throw createError(401, "Bad auth - could not find user.");

    // Store media under appropriate story line storage path
    const videoStoragePath = getVideoStoragePath(
      user.authUser.uid,
      fileName // extension already on fileName
      // `${fileName}.${extension}`
    );

    // Respond early and save media in background
    res.status(200).json({
      message: "File upload successful."
    });
...

export const save_feedback_video = async (req: Request, res: Response) => {
  console.log(getTimestampString() + " - save_feedback_video - request:", {
    req,
  });
  if (!req.file) {
    throw createError(400, "No file provided.");
  }

  // Required to make sure file cleanup is performed on error or success
  const inputVideoPath = req.file.path;
  const convertedFilePath = `tmp-media/converted/${
    path.parse(req.file.originalname).name
  }.mp4`;

  try {
    const { userType, idToken } = req.body;
    console.log(getTimestampString() + " - save_feedback_video - params:", {
      userType,
      idToken,
    });
    const file = req.file;
    let fileName = file.originalname.toLowerCase(); // Use original so we can avoid duplicating file content. Save once, use multiple times.

    if (!(userType && file && fileName && idToken))
      throw createError(400, "Bad params.");

    const fileExtension = fileName.split(".").at(-1);
    if (!fileExtension) throw createError(400, "Bad file extension.");

    // Use original lowercase so we can avoid duplicating file content. Save once, use multiple times.
    fileName = `${path.parse(req.file.originalname).name}.mp4`.toLowerCase(); // We assume the file will be mp4 due to the conversion step

    // Ensure user of declared type is found]
    const user = await getUser({ idToken, userType });
    if (!user?.authUser?.uid)
      throw createError(401, "Bad auth - could not find user.");

    // Store media under appropriate story line storage path
    const videoStoragePath = getVideoStoragePath(
      user.authUser.uid,
      fileName // extension already on fileName
      // `${fileName}.${extension}`
    );

    // Respond early and save media in background
    res.status(200).json({
      message: "File upload successful."
    });
...

const TestPage = () => {
  function customUpload(file, apiRoute, baseUrl) {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest()
      xhr.open("POST", `${baseUrl}${apiRoute}`, true)
      xhr.setRequestHeader("Content-Type", "multipart/form-data")
      xhr.upload.onprogress = function (event) {
        if (event.lengthComputable) {
          const progress = (event.loaded / event.total) * 100
          console.log(`Upload progress: ${progress.toFixed(2)}%`)
        }
      }
      xhr.onload = function () {
        if (xhr.status === 200) {
          console.log("Upload complete")
          resolve(xhr.responseText)
        } else {
          console.error("Error during the upload")
          reject(new Error(`HTTP error ${xhr.status}: ${xhr.statusText}`))
        }
      }
      xhr.onerror = function () {
        console.error("Error during the upload")
        reject(new Error(`HTTP error ${xhr.status}: ${xhr.statusText}`))
      }
      const formData = new FormData()
      formData.append("file", file)
      xhr.send(formData)
    })
  }

  return (
    <div>
      <input
        type="file"
        onChange={async (e) => {
          console.log({ e })
          const file = e.target.files[0]
          const res = await customUpload(file, "/upload", "https://utilities.up.railway.app")
          console.log({ res })
        }}
      />
    </div>
  )
}

export default TestPage

const TestPage = () => {
  function customUpload(file, apiRoute, baseUrl) {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest()
      xhr.open("POST", `${baseUrl}${apiRoute}`, true)
      xhr.setRequestHeader("Content-Type", "multipart/form-data")
      xhr.upload.onprogress = function (event) {
        if (event.lengthComputable) {
          const progress = (event.loaded / event.total) * 100
          console.log(`Upload progress: ${progress.toFixed(2)}%`)
        }
      }
      xhr.onload = function () {
        if (xhr.status === 200) {
          console.log("Upload complete")
          resolve(xhr.responseText)
        } else {
          console.error("Error during the upload")
          reject(new Error(`HTTP error ${xhr.status}: ${xhr.statusText}`))
        }
      }
      xhr.onerror = function () {
        console.error("Error during the upload")
        reject(new Error(`HTTP error ${xhr.status}: ${xhr.statusText}`))
      }
      const formData = new FormData()
      formData.append("file", file)
      xhr.send(formData)
    })
  }

  return (
    <div>
      <input
        type="file"
        onChange={async (e) => {
          console.log({ e })
          const file = e.target.files[0]
          const res = await customUpload(file, "/upload", "https://utilities.up.railway.app")
          console.log({ res })
        }}
      />
    </div>
  )
}

export default TestPage

const TestPage = () => {
  return (
    <form
      action="https://utilities.up.railway.app/upload"
      method="post"
      enctype="multipart/form-data"
    >
      <input type="file" name="file" required />
      <button type="submit">Upload</button>
    </form>
  )
}
export default TestPage

const TestPage = () => {
  return (
    <form
      action="https://utilities.up.railway.app/upload"
      method="post"
      enctype="multipart/form-data"
    >
      <input type="file" name="file" required />
      <button type="submit">Upload</button>
    </form>
  )
}
export default TestPage

async function submitForm(params, apiRoute, baseUrl) {
  try {
    // Start the timer
    console.time('submitForm');

    // Create a new FormData instance
    const formData = new FormData();

    // Iterate over the params object and append each field to the FormData
    for (const key in params) {
      if (params.hasOwnProperty(key)) {
        formData.append(key, params[key]);
      }
    }

    // Set up the fetch configuration object
    const config = {
      method: 'POST',
      body: formData
    };

    // Send the POST request with the form data
    const response = await fetch(`${baseUrl}${apiRoute}`, config);

    // Check if the response is successful
    if (!response.ok) {
      throw new Error(`HTTP error ${response.status}: ${response.statusText}`);
    }

    // Handle the response as needed
    const responseData = await response.json();

    // Stop the timer and log the elapsed time
    console.timeEnd('submitForm');

    console.log(response.status, responseData);
    return responseData;
  } catch (error) {
    // Stop the timer and log the elapsed time in case of an error
    console.timeEnd('submitForm');

    console.error('Error while submitting the form:', error.message);
    throw error;
  }
}

async function submitForm(params, apiRoute, baseUrl) {
  try {
    // Start the timer
    console.time('submitForm');

    // Create a new FormData instance
    const formData = new FormData();

    // Iterate over the params object and append each field to the FormData
    for (const key in params) {
      if (params.hasOwnProperty(key)) {
        formData.append(key, params[key]);
      }
    }

    // Set up the fetch configuration object
    const config = {
      method: 'POST',
      body: formData
    };

    // Send the POST request with the form data
    const response = await fetch(`${baseUrl}${apiRoute}`, config);

    // Check if the response is successful
    if (!response.ok) {
      throw new Error(`HTTP error ${response.status}: ${response.statusText}`);
    }

    // Handle the response as needed
    const responseData = await response.json();

    // Stop the timer and log the elapsed time
    console.timeEnd('submitForm');

    console.log(response.status, responseData);
    return responseData;
  } catch (error) {
    // Stop the timer and log the elapsed time in case of an error
    console.timeEnd('submitForm');

    console.error('Error while submitting the form:', error.message);
    throw error;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <title>Simple File Upload</title>
  </head>
  <body>
    <form
      action="https://utilities.up.railway.app/upload"
      method="post"
      enctype="multipart/form-data"
    >
      <input type="file" name="file" required />
      <button type="submit">Upload</button>
    </form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Simple File Upload</title>
  </head>
  <body>
    <form
      action="https://utilities.up.railway.app/upload"
      method="post"
      enctype="multipart/form-data"
    >
      <input type="file" name="file" required />
      <button type="submit">Upload</button>
    </form>
  </body>
</html>

uploaded file size 8.23 Megabytes
server received file in 27.18 seconds
average upload speed 0.30 Megabytes/s or 2.42 Megabits/s

uploaded file size 8.23 Megabytes
server received file in 27.18 seconds
average upload speed 0.30 Megabytes/s or 2.42 Megabits/s