foo.js

Client-Side:  client side: import React, { useState } from "react";

function VideoButton() {
  const [downloadLink, setDownloadLink] = useState(null);
  const [videoName, setVideoName] = useState(null); // State to store the video file name

  const uploadFile = (event) => {
    const file = event.target.files[0];
    if (file) {
      const formData = new FormData();
      formData.append("video", file);

      fetch("http://localhost:5000/compress-video", {
        method: "POST",
        body: formData,
      })
        .then((response) => {
          if (!response.ok) {
            throw new Error("Network response was not ok");
          }
          return response.text(); // Read response as text
        })
        .then((text) => {
          setVideoName(file.name); // Store the video file name in state
          setDownloadLink("success");
        })
        .catch((error) => {
          console.error("Error uploading file:", error);
        });
    }
  };

  const handleDownload = () => {
    if (downloadLink === "success" && videoName) {
      // Check if videoName is defined
      fetch(http://localhost:5000/compressed_video.mp4?fileName=${videoName})
        .then((response) => {
          if (!response.ok) {
            throw new Error("Network response was not ok");
          }
          return response.blob();
        })
        .then((blob) => {
          const url = window.URL.createObjectURL(new Blob([blob]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", "compressed_video.mp4");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((error) => {
          console.error("Error downloading file:", error);
        });
    }
  };

  return (
    <div className="flex flex-col items-center justify-center">
      <label htmlFor="video-upload" className="video-upload-button">
        Upload Video
      </label>
      <input
        id="video-upload"
        type="file"
        accept=".mp4"
        onChange={uploadFile}
        style={{ display: "none" }}
      />
      {downloadLink === "success" && (
        <button
          onClick={handleDownload}
          className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        >
          Download Compressed Video
        </button>
      )}
    </div>
  );
}

export default VideoButton;


Server-Side: server side: const express = require("express");
const cors = require("cors");
const { fork } = require("child_process");
const fileUpload = require("express-fileupload");
const path = require("path"); // Add this line to import the path module

// Create a new express application instance
const PORT = 5000;
const app = express();

// Middleware
app.use(cors());
app.use(express.json());
app.use(
  fileUpload({
    tempFileDir: "temp",
    useTempFiles: true,
  })
);

app.use(express.static(path.join(__dirname, "temp")));

// Routes
app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.post("/compress-video", (req, res) => {
  const video = req.files.video;

  if (!video) {
    return res.status(400).send("No file uploaded");
  }

  const tempFilePath = video.tempFilePath;
  if (!tempFilePath) {
    return res.status(400).send("Error processing file");
  }

  const child = fork("video.js");
  child.send({ tempFilePath, name: video.name });

  child.on("message", (message) => {
    const { statusCode, text, filePath } = message;
    if (statusCode === 200) {
      res.send(filePath); // Send file path to the client
    } else {
      res.status(statusCode).send(text);
    }
  });
});

// Serve the compressed video file
app.get("/compressed_video.mp4", (req, res) => {
  const fileName = req.query.fileName; // Get the file name from query parameters
  if (!fileName) {
    return res.status(400).send("File name not provided");
  }
  const filePath = ./temp/${fileName};
  res.download(filePath);
});

// app.post("/compress-audio", (req, res) => {
//   const audio = req.files.audio;

//   const tempFilePath = audio.tempFilePath;

//   if (audio && tempFilePath) {
//     const child = fork("audio.js");
//     child.send({ tempFilePath, name: audio.name });
//     child.on("message", (message) => {
//       const { statusCode, text } = message;
//       res.status(statusCode).send(text);
//     });
//   } else {
//     res.status(400).send("No file uploaded");
//   }
// });

app.post("/compress-audio", (req, res) => {
  const audio = req.files.audio;

  if (!audio) {
    return res.status(400).send("No file uploaded");
  }

  const tempFilePath = audio.tempFilePath;
  if (!tempFilePath) {
    return res.status(400).send("Error processing file");
  }

  const child = fork("audio.js");
  child.send({ tempFilePath, name: audio.name });

  child.on("message", (message) => {
    const { statusCode, text, filePath } = message;
    if (statusCode === 200) {
      res.send(filePath); // Send file path to the client
    } else {
      res.status(statusCode).send(text);
    }
  });
});

app.get("/compressed_audio.mp3", (req, res) => {
  const fileName = req.query.fileName; // Get the file name from query parameters
  if (!fileName) {
    return res.status(400).send("File name not provided");
  }
  const filePath = ./temp/${fileName};
  res.download(filePath);
});

// Start the server
app.listen(PORT, () => {
  console.log(Server started on  http://localhost:${PORT});
});