Failed to upload video to bunny stream with node js

Question

I'm trying to upload a video to bunny stream API with node.js using Axios but It is not working. I'm applying the same logic to get, delete videos and it is also working for changing names and change resolution, and while uploading I'm getting 400 responses. In bunny stream Dashboard the video is created every time I'm sending a request but after that video upload is getting failed. Please help to fix the issue.

Backend code:

const upload = multer();
VideoRouter.post("/upload", upload.single("video"), uploadVideo);

export const uploadVideo = async (req, res) => {
  // console.log(req.body, req.file);

  const optionsToCreateVideo = {
    method: "POST",
    url: `http://video.bunnycdn.com/library/${process.env.VIDEO_LIBRARY_ID}/videos`,
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      AccessKey: process.env.BUNNY_API_KEY,
    },
    data: JSON.stringify({ title: req.body.name }),
  };

  await axios
    .request(optionsToCreateVideo)
    .then((response) => {
      const video_id = response.data.guid;

      axios
        .put(
          `http://video.bunnycdn.com/library/${process.env.VIDEO_LIBRARY_ID}/videos/${video_id}`,
          {
            headers: {
              AccessKey: process.env.BUNNY_API_KEY,
            },
            body: req.file ,
          }
        )
        .then(function (response) {
          res.status(200).json(response);
        })
        .catch(function (error) {
          // console.error("error", error);
          res.status(400).json(error);
        });
    })
    .catch((error) => {
      console.log(error.message);
      res.status(200).json({ error: "failed!" });
    });
};

Frontend Code for handling video upload:

const handleVideoChange = (e) => {
    setVideo(e.target.files[0]);
  };

  const handleSubmit = () => {
    if (!videoName || videoName.trim().length === 0) {
      alert("Video Name is missing !");
      return;
    }
    if (!video) {
      alert("Video is missing !");
      return;
    }

    const form = new FormData();
    form.append("name", videoName);
    form.append("video", video);
    const config = {
      onUploadProgress: (progressEvent) => {
        const { loaded, total } = progressEvent;
        let percentage = Math.floor((loaded / total) * 100);
        console.log(percentage);
        setProgress(loaded);
      },
    };

    axios
      .post("http://localhost:4000/video/upload", form, config)
      .then((res) => console.log(res))
      .catch((err) => console.error(err));
  };

score 1 · Accepted Answer · answered Dec 29 '21 at 16:57

Dont send the file directly like an array or object, send it as RAW Binary using CreateReadStream:

const buffer = fs.createReadStream('path-to-file');

also second argument of put in axios is "body" and you have to directly attach the RAW binary to it.

Modify Your Axios Call in Backend code to this :

axios.put(http://video.bunnycdn.com/library/${process.env.VIDEO_LIBRARY_ID}/videos/${video_id}`,
              buffer,
              {
                headers: {
                  AccessKey: process.env.BUNNY_API_KEY,
                },
              }
            )

Hope it helps you, took me hours and hours to figure out what was wrong.

Thank you for replying, I am trying to do it this way but I'm getting a 401 responses. `axios.put(`http://video.bunnycdn.com/library/${process.env.VIDEO_LIBRARY_ID}/videos/${video_id}`, buffer, { headers: { AccessKey: process.env.BUNNY_API_KEY, }, maxBodyLength: Infinity, } );` — Arnav, Jan 01 '22 at 17:42

Failed to upload video to bunny stream with node js

1 Answers1